Curs HTML A5

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
Elemente HTML vide ................................................................................. 21
5. ATRIBUTE HTML ......................................................... 21

Atributele HTML ....................................................................................... 21
Exemple de atribute.................................................................................... 22
Lista atributelor HTML ............................................................................. 22
6. TITLURI HTML ............................................................. 22

Liniile HTML ............................................................................................. 23
Comentarii HTML ..................................................................................... 23
Cum vedei codul HTML surs al unei pagini web.................................... 24
7. PARAGRAFE ............................................................... 24
8. FORMATAREA TEXTULUI .......................................... 24
Taguri pentru formatarea textului............................................................. 24
Exemple ...................................................................................................... 25
9. STILURI ........................................................................ 29
Taguri i atribute depite.......................................................................... 30
Exemple ...................................................................................................... 30
10. LINKURI ..................................................................... 31

Hiperlinkuri, ancore i linkuri ................................................................... 31
Atributul href ........................................................................................... 32
Atributul target ...................................................................................... 32

Atributul name........................................................................................... 32
Exemple ...................................................................................................... 33
11. IMAGINI.......................................................................36
Tagul imagine i atributul src .................................................................. 36
Atributul Alt ............................................................................................. 37
Taguri pentru imagini................................................................................ 37
Exemple ...................................................................................................... 37
12. TABELE ......................................................................41

Atributul border ...................................................................................... 42
Denumirea coloanelor ................................................................................ 42
Celule goale ................................................................................................ 42
Taguri pentru tabele .................................................................................. 43
Exemple ...................................................................................................... 43
13. LISTE...........................................................................57
Liste neordonate......................................................................................... 57
Liste ordonate............................................................................................. 57
Liste de definiii.......................................................................................... 58
Exemple ...................................................................................................... 58
14. FORMULARE ..............................................................62

9
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
10
Taguri pentru stil ....................................................................................... 87
21. ENTITILE DE TIP CARACTER...............................87

Non-breaking Space ................................................................................... 87
Simboluri uzuale ........................................................................................ 87
22. ELEMENTUL HEAD .....................................................88

Informaiile din elementul head................................................................ 88
Taguri permise n elementul head ............................................................ 89
Exemple ...................................................................................................... 89
23. ELEMENTUL META .....................................................90

Cuvinte cheie pentru motoarele de cutare ............................................... 90
Exemple ...................................................................................................... 91
24. URL .............................................................................92

Linkuri HTML........................................................................................... 92
URL - Uniform Resource Locator ............................................................. 93
Scheme URL............................................................................................... 93
25. SCRIPTURI .................................................................94

Inserarea unui script ntr-o pagin HTML ............................................... 94
Cum procedai cu browserele vechi ........................................................... 94
Tagul <noscript>................................................................................... 95
11
Taguri pentru scripturi .............................................................................. 95

Exemple ...................................................................................................... 95
26. ATRIBUTE EVENIMENT ............................................ 96

Evenimente pentru ferestre ........................................................................ 96
Evenimente pentru formulare .................................................................... 97
Evenimente pentru tastatur...................................................................... 97
Evenimente pentru mouse .......................................................................... 97
27. CALCULATORUL POATE FI SERVER WEB ............ 98

IIS - Internet Information Server............................................................... 98
Cum instalai IIS n Windows Vista........................................................... 98
Cum instalai IIS n Windows XP i Windows 2000 .................................. 98
Testai paginile web .................................................................................... 99
II. XHTML.......................................................................... 99
1. CE ESTE XHTML? ....................................................... 99
2. DE CE XHTML?............................................................ 99
3. DIFERENE NTRE XHTML I HTML ....................... 100
Cele mai importante diferene.................................................................. 100
4. SINTAXA XHTML ....................................................... 102

Reguli suplimentare privind sintaxa XHTML......................................... 102
12
Atributul lang......................................................................................... 103

Elemente XHTML obligatorii.................................................................. 103
5. DTD (DOCUMENT TYPE DEFINITIONS) XHTML ......104

Declaraia <!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
Declaraia <!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
13
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
14
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
15
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
16
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 ascuite, 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 sfrit
Documentele HTML = Pagini Web

Documentele HTML descriu paginile web
Documentele HTML conin taguri HTML i text simplu
Documentele HTML sunt numite i pagini web
Scopul unui browser web (ca Internet Explorer sau Firefox) este s citeasc
documentele HTML i s le afieze ca pagini web. Browser-ul nu afieaz
tagurile HTML, dar le utilizeaz ca s interpreteze coninutul paginii.
Exemplu:
<html>
<body>
17
<h1>Primul meu titlu</h1>

<p>Primul meu paragraf</p>
</body>
</html>
Explicaii:
Textul dintre <html> i </html> descrie pagina web
Textul dintre <body> i </body> este coninutul vizibil al paginii
Textul dintre <h1> i </h1> este afiat ca un titlu
Textul dintre <p> i </p> este afiat ca un paragraf
2. HTML S ncepem
Ce v trebuie
Nu v trebuie nimic deosebit ca s nvai HTML.
Nu avei nevoie de un editor HTML
Nu avei nevoie de un server web
Nu avei nevoie de un site web
Editarea documentelor HTML

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

Titluri
Titlurile HTML sunt definite cu tagurile pereche <h1>...... <h6>.
Exemplu:
<html>
<body>
<h1>Acesta
<h2>Acesta
<h3>Acesta
<h4>Acesta
<h5>Acesta
<h6>Acesta
este
este
este
este
este
este
titlul
titlul
titlul
titlul
titlul
titlul
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
18
</body>
</html>
Paragrafe
Paragrafele HTML sunt definite cu tagul pereche <p>.
<html>
<body>
<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.
19
4. Elemente HTML
Documentele HTML sunt definite de elementele HTML.
Elementele HTML
Un element HTML este tot ce este scris ntre un tag de nceput i un tag de
sfrit.:
Tag de nceput
Coninutul elementului
Tag de sfrit
Acesta este un
<p>
</p>
paragraf
<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/sfrit
Coninutul unui element este tot ce este scris ntre cele dou taguri
Unele elemente HTML au coninutul vid
Elementele vide sunt nchise n tagul de nceput
Majoritatea elementelor HTML pot avea atribute
Elemente HTML imbricate (nested)

Majoritatea elementelor HTML pot fi imbricate (pot conine alte elemente
HTML).
Documentele HTML sunt de fapt elemente HTML imbricate.
Exemplu de document HTML
<html>
<body>
<p>Acesta este primul meu paragraf</p>
</body>
</html>
Acest exemplu conine 3 elemente HTML:
Elementul <p>:
Elementul <p> definete un paragraf ntr-un document HTML.
20
Elementul are tagul de nceput <p> i tagul de sfrit </p>.

Coninutul elementului este: Acesta este primul meu paragraf
Elementul <body>:
<body>
<p> Acesta este primul meu paragraf </p>
</body>
Elementul
<body>
definete
corpul
unui
document
HTML.
Elementul are tagul de nceput <body> i tagul de sfrit </body>.
Acest element conine un alt element HTML (un paragraf elementul p)
Elementul <html>:
<html>
<body>
</body>
</html>
Elementul
<html>
definete
ntregul
document
HTML.
Elementul are tagul de nceput <html> i tagul de sfrit </html>.
Elementul conine un alt element HTML (corpul documentului elementul
body)
Elemente HTML vide

Elementele HTML care nu au coninut se numesc elemente vide. Elementele
vide pot fi nchise n tagul de nceput. Spre exemplu <br> este un element vid
fr tag de sfrit (definete o ntrerupere de linie). n XHTML, XML i
viitoarele versiuni de HTML, toate elementele trebuie nchise.
Adugarea unui slash n tagul de nceput, ca <br />, este un mod potrivit de
nchidere a elementelor vide, acceptat de HTML, XHTML i XML.
Obs: HTML nu este case-sesitive, dar v recomandm s scriei cu litere mici
pentru compatibilitate cu noile versiuni HTML.
5. Atribute HTML
Atributele furnizeaz informaii suplimentare despre elementele HTM.
Atributele HTML
Elementele HTML pot avea atribute
21
Atributele furnizeaz informaii suplimentare despre un element

Atributele sunt specificate numai n tagul de nceput
Atributele vin n perechi nume/valoare ca: name="value"
Exemple de atribute
Linkurile HTML sunt definite cu tagul <a>. Adresa de link precizat este un
atribut.
Exemplu:
<html>
<body>
<a href="http://www.yahoo.com">Acesta este
link</a>
un
</body>
</html>
Obs. Valorile atributelor trebuie ntotdeauna puse ntre ghilimele
n rarele situaii n care valoarea atributului conine ea nsi ghilimele, este
necesar s scriei valoarea atributului ntre apostrofuri ca n exemplul urmtor:
name='John "ShotGun" Nelson'
Lista atributelor HTML

Urmtoarea list prezint atributele standard pentru majoritatea elementelor
HTML:
Atribut
Valoare
Descriere
class
class_rule sau style_rule Clasa elementului
id
id_name
Un id unic pentru element
style
style_definition
O definiie de stil inline
title
tooltip_text
Un text afiat cnd cursorul este
fixat pe element
6. Titluri HTML
Titlurile sunt definite cu tagurile <h1> ..... <h6>.
<h1> definete cel mai mare titlu. <h6> definete cel mai mic titlu.
Exemplu:
<html>
<body>
<h1>Acesta este un titlu 1</h1>
22
<h3>Acesta
<h4>Acesta
<h5>Acesta
<h6>Acesta
este
este
este
este
un
un
un
un
titlu
titlu
titlu
titlu
3</h3>
4</h4>
5</h5>
6</h6>
</body>
</html>
Obs: Browserele adaug automat o linie vid nainte i dup un titlu.
Titlurile sunt importante
Utilizai titlurile HTML numai pentru scrierea titlurilor. Nu le utilizai pentru a
face textul BIG sau bold. Motoarele de cutare folosesc titlurile pentru a
indexa structura i coninutul paginilor web.
Este important s utilizai titlurile pentru a pune n eviden structura
documentului HTML.
Titlurile h1 ar trebui folosite ca titluri principale, urmate de titlurile h2 amd.
Liniile HTML
Tagul <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/>
<hr/>
</body>
</html>
Comentarii HTML
Comentariile pot fi inserate n codul HTML pentru a-l face mai uor de citit i
neles. Comentariile sunt ignorate de ctre browsere i nu sunt afiate.
Comentariile se scriu astfel:

23
Cum vedei codul HTML surs al unei pagini web

Facei clic dreapta pe pagin i selectai "View Source" (IE) sau "View Page
Source" (Firefox) sau similar pentru alte browsere. Se va deschide o fereastr
cu codul HTML al paginii.
7. Paragrafe
Documentele HTML sunt mprite n paragrafe. Paragrafele sunt definite cu
tagul <p>.
Obs: Browserele adaug automat o linie vid nainte i dup un paragraf. Nu
uitai 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. Utilizai tagul <br/> dac dorii o linie nou fr s ncepei un nou
paragraf.
Exemplu:
<p>Acesta este<br />un para<br />graf cu intrerupere
de linie.</p>
Obs: Nu conteaz cte linii i cte spaii inserai n documentele HTML.
Browserele vor vedea un singur spaiu i o singur linie (dac nu utilizai tagul
<br/>).
8. Formatarea textului
Taguri pentru formatarea textului
Tag
<b>
<big>
<em>
<i>
Descriere
Text ngroat
Text mare
Text accentuat
Text nclinat (italic)
24
<small>
Text mic
<strong>
Text ngroat
<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>
Definiie
Exemple
Exemplul 1
Ilustreaz cum putei 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 putei controla ntreruperile de linie i spaiul cu tagul <pre>.
<html>
25
<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.
26
<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 direcia 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>
27
</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>
28
<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 adugate elementelor
HTML fie direct, utiliznd atributul style, fie indirect prin foi separate de stiluri
(fiiere CSS). n acest material vom folosi atributul style pentru a introduce
stilurile HTML..
Exemple de utilizare a atributului style
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
29
style="text-align:center"
Taguri i atribute depite

n HTML 4, anumite taguri i atribute sunt definite ca depite. Asta nseamn
c ele nu vor mai fi acceptate n urmtoarele versiuni HTML i XHTML.
Mesajul este clar: nu mai folosii aceste taguri i atribute.
Aceste taguri i atribute nu mai trebuiesc folosite:
Taguri
Descriere
<center>
Element centrat
<font> i <basefont>
Fonturi HTML
<s> i <strike>
Text tiat
<u>
Text subliniat
Atribute
Descriere
align
Alinierea textului
bgcolor
Culoarea fundalului (background)
color
Culoarea textului
n locul lor folosii stiluri.
Exemple
Culoare background:
Atributul style definete un stil pentru elementul <body>.
<html>
<body style="background-color:yellow">
<h2>Acesta este un fundal colorat cu atributul
style</h2>
</body>
</html>
Familia de fonturi, culoare i mrime:
Atributul style definete un stil pentru elementul <p>.
<html>
<body>
<h1 style="font-family:verdana">Un titlu</h1>
<p style="font-family:courier new; color:red; fontsize:20px;">
30
Acesta este un paragraf stilizat cu atributul

style</p>
</body>
</html>
Alinierea textului:
Atributul style definete 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 fiier de sunet, un film, etc.
O ancor este o destinaia unui hiperlink n interiorul unui document.
Elementul <a> este utilizat pentru a defini hiperlegturile i ancorele.
Folosim termenul link cnd elementul <a> indic o resurs web i termenul
ancor cnd elementul <a> definete o adres din interiorul documentului.
Sintaxa unui link HTML este:
<a href="url">Textul afisat</a>
Tagul de nceput conine atribute despre link.
Elementul de coninut definete textul ce va fi afiat.
31
Obs: Elementul coninut nu trebuie s fie neaprat text. Putei folosi o imagine
sau orice alt element HTML.
Atributul href
Definete adresa legturii.
Elementul <a> urmtor definete o legtur ctre Gmail:
<a href="http://www.gmail.com/">Serviciul e-mail
Google!</a>
Codul de mai sus va fi afiat de browser astfel:
Serviciul e-mail Google!
Atributul target
Atributul definete unde se va deschide documentul referit de link.
Codul urmtor va deschide documentul ntr-o nou fereastr:
<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
Cnd este folosit atributul name, elementul <a> definete o ancor n interiorul
unui document HTML. Ancorele nu sunt afiate ntr-un mod special, ele sunt
invizibile pentru cititor.
Sintaxa de definire a unei ancore este:
<a name="label">Orice continut</a>
Sintaxa legturii ctre o ancor este:
<a href="#label">Orice coninut</a>
Simbolul # din atributul href definete o legtur ctre o ancor.
Exemple:
O ancor n interiorul unui document HTML:
32
<a name="tips">Sectiunea de Sfaturi Utile</a>

O legtur ctre Seciunea de Sfaturi Utile din interiorul aceluiai document:
<a href="#tips">
Mergeti la Sectiunea de Sfaturi Utile</a>
O legtur ctre 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. Fiecrui capitol din document i este atribuit o
ancor i linkurile ctre aceste ancore sunt amplasate la nceputul
documentului. Dac browserul nu gsete o anumit ancor, merge la nceputul
documentulu i nu se genereaz nici-o eroare.
Exemple
Exemplul 1
Ilustreaz cum putem folosi o imagine ca link.
<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:
<img border="0" src="smiley.gif" alt="Tutoriale"
width="32"
height="32" />
</a>
</p>
</body>
</html>
33
Exemplul 2
Ilustreaz cum se folosesc linkurile i ancorele pentru a sri 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><a name="C4">Capitolul 4</a></h2>
<h2><a name="C10">Capitolul 10</a></h2>
34
</body>
</html>
Exemplul 3
Ilustreaz cum putei iei 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 facei link ctre utilitarul de e-mail (va funciona numai dac
serviciul e-mail este instalat).
<html>
<body>
<p>
Acesta este un link ctre e-mail:
<a
href="mailto:someone@gmail.com?subject=Buna%20ziua">
Send Mail</a>
</p>
<p>
<b>Nota:</b> Spatiile dintre cuvinte ar trebui
nlocuite cu %20
35
pentru <b>a fi siguri</b> ca browserul va afisa

textul corect.
</p>
</body>
</html>
Exemplul
Ilustreaz crearea un link de e-mail mai complicat.
<html>
<body>
<p>
Acesta este un link ctre e-mail:
<a href="mailto:unu@gmail.com?cc=
doi@gmail.com&bcc
=trei@gmail.com&subject
=Orarul%20Seminariilor&body=
Noul%20orar%20al%20seminariilor%20se%20va%20afisa%20v
ineri!">
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 conine numai atribute i nu are
tag de nchidere.
36
Pentru a afia o imagine pe o pagin trebuie s folosii atributul src care

reprezint sursa imaginii. Valoarea atributului src este URL-ul imaginii pe
care dorii s o afiai n pagin.
Sintaxa de definire a unei imagini este:
<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 afieaz imaginea n locul n care tagul de imagine apare n
document. Dac punei tagul imagine ntre dou paragrafe, browserul afieaz
primul paragraf, apoi imaginea, apoi al doilea paragraf.
Atributul Alt
Atributul alt este folosit pentru a defini un text alternativ pentru imagine.
Valoarea atributului alt este un text definit de autor:
<img src="boat.gif" alt="O barca mare" />
Atributul alt informeaz cititorul ce lipsete din pagin dac browserul nu
poate ncarca imaginea. Browserul va afia n loc de imagine textul alternativ.
Este indicat s introducei atributul alt pentru orice imagine de pe pagin
pentru a mbunti afiarea paginii pentru cei care au browsere text-only. Dac
pagina conine multe imagini, dureaz mult pentru a fi ncrcat aa c folosii
cu atenie imaginile.
Taguri pentru imagini

Tag
<img>
<map>
<area>
Descriere
Definete o imagine
Definete o imagine mapat
Definete o zon de hiperlink n interiorul unei imagini mapate
Exemple
Exemplul 1
Ilustreaz cum se insereaz ntr-o pagin web imagini situate n acelai director.
<html>
<body>
<p>
O imagine statica:
<img src="constr4.gif" width="144" height="50" />
37
</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 adug 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>
38
</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
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 stnga sau la dreapta unui paragraf.
<html>
<body>
39
<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>
</p>
<p>
</p>
<p>
</p>
<p>Puteti mari sau micsora o imagine modificand
atributele "height" si "width".</p>
</body>
</html>
Exemplul 7
Ilustreaz cum se folosete o imagine drept link.
40
<html>
<body>
<p>Crearea unui link pentru o imagine:
<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 mprit n linii (cu tagul
<tr>), i fiecare linie este mprit n celule de date (cu tagul <td>). Notaia
td nseamn "table data", coninutul unei celule din tabel. O celul poate
conine text, imagini, liste, paragrafe, formulare, linii orizontale, alt tabel , etc.
41
Exemplu:
<table border="1">
<tr>
<td>linia 1, celula
<td>linia 1, celula
</tr>
<tr>
<td>linia 2, celula
<td>linia 2, celula
</tr>
</table>
1</td>
2</td>
1</td>
2</td>
Atributul border
Dac atributul border nu este specificat, tabelul va fi afiat fr chenare
(borduri). Pentru a afia un tabel cu chenare trebuie utilizat atributul border.
Denumirea coloanelor
Crearea unei celule de titlu se face cu tagul <th>. Textul dintr-o celul de titlu
este ngroat i centrat.
Exemplu:
<table border="1">
<tr>
<th>Un titlu</th>
<th>Alt titlu</th>
</tr>
<tr>
<td>linia 1, celula 1</td>
</tr>
<tr>
</tr>
</table>
Celule goale
Cele mai multe browsere nu afieaz prea bine celulele din tabel care nu au
coninut. Pentru a corecta acest lucru, adugai un non-breaking space
( ) n celula vid i chenarul se va afia corect.
Exemplu:
<table border="1">
<tr>
42

</tr>
<tr>
<td> </td>
</tr>
</table>
Taguri pentru tabele

Tag
Descriere
<table>
Definete un tabel
<th>
Definete o celul de titlu
<tr>
Definete o linie din tabel
<td>
Definete o celul de date
<caption> Definete titlul unui tabel (table caption)
<colgroup> Definete un grup de coloane din tabel
Definete valorile atributelor pentru una sau mai multe coloane
<col>
din tabel.
<thead>
Definete capul tabelului
<tbody>
Definete corpul tabelului
<tfoot>
Definete subsolul tabelului
Exemple
Exemplul 1
Ilustreaz cum se definete 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>
43
</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>
44
<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 fr 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>
45
<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 afieaz 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>
46
<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 coninut.
<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 nonbreaking space.
</p>
47
<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>
48
<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:
49
<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 spaiu
ntre coninutul 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>
50
</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 crete spaiul 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>
51
<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>
52
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 coninutul 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>
</tr>
<tr>
<td align="left">Cosmetice</td>
</tr>
<tr>
53
<td align="left">Mancare</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>
54
<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>
55
<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>
56
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 definiii..
Liste neordonate
O list neordonat este o list de itemi marcai cu simboluri (cercuri, ptrate,
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 afieaz lista de mai sus astfel:
Cafea
Lapte
Liste ordonate
O list ordonat este o list de itemi marcai cu numere sau litere.
57
O list ordonat ncepe cu tagul <ol>. Fiecare item din list ncepe cu tagul
<li>.
Exemplu:
<ol>
<li>Cafea</li>
<li>Lapte</li>
</ol>
1. Cafea
2. Lapte
ntr-o list ordonat sau neordonat pot s apar paragrafe, ntreruperi de linie
(line break), imagini, linkuri, alte liste, etc.
Liste de definiii
O list de definiii este o list de termeni mpreun cu descrierea lor.
O list de definiii ncepe cu tagul <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>
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>
58
<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>
59
<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 marcai 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>
60
</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 definiii.
<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>
61
</html>
14. Formulare
Formularele HTML sunt utilizate pentru a selecta diferitele tipuri de informaii
introduse de utilizator.
Un formular este o zon care conine elemente de formular.
Elementele unui formular (cmpuri de text, meniuri drop-down, butoane radio,
csue de validare, etc.) permit utilizatorului s introduc informaii n
formular.
Un formular este definit cu tagul <form> conform sintaxei:
<form>
.
elemente de intrare
.
</form>
Tagul input
Cel mai utilizat tag de formulare este tagul <input>. Tipul intrrii este
specificat prin atributul type. Cele mai folosite tipuri de input sunt prezentate
n continuare.
Cmpuri de text (text fields)

Cmpurile de text sunt folosite atunci cnd vrem ca utilizatorul s introduc n
formular litere, numere, etc.
Exemplu:
<form>
Nume:
<input type="text" name="nume" />
<br />
Prenume:
<input type="text" name="prenume" />
</form>
n browser formularul arat astfel:
Nume:
Prenume:
Observai c formularul propriu-zis nu este vizibil. n majoritatea browserelor,
lungimea unui cmp de text este implicit setat la 20 de caractere.
62
Butoane radio
Butoanele radio se folosesc cnd dorim ca utilizatorul s selecteze o singur
opiune dintr-o list posibil.
Exemplu:
<form>
<input type="radio" name="sex"
value="barbat"/>Masculin
<br />
<input type="radio" name="sex"
value="femeie"/>Feminin
</form>
Masculin
Feminin
Observai c numai o opiune poate fi selectat la un moment dat.
Csue de validare
Csuele de validare se folosesc atunci cnd utilizatorul poate s selecteze una
sau mai multe opiuni dintr-o list posibil.
Exemplu:
<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>
Am pisica:
Am caine:
Am papagal:
Atributul action i butonul submit

63
Cnd utilizatorul apas butonul "Submit", coninutul formularului este trimis

ctre server. Atributul action al tagului form definete numele fiierului n
care se trimite coninutul formularului. Informaiile din acest fiier sunt uzual
prelucrate cu scripturi.
Exemplu:
<form name="input" action="html_form_submit.asp"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Submit
Username:
Dac tastai nite caractere n cmpul de text de mai sus i apsai butonul
"Submit", browserul va trimite informaia tastat unei pagini numite
"html_form_submit.asp". Pagina v va arta informaia primit.
Taguri pentru formulare

Tag
Descriere
<form>
Definete un formular pentru informaiile introduse de utilizator
<input>
Definete un cmp de intrare
<textarea> Definete o zon de text multi-linie
<label>
Definete eticheta unui control
<fieldset> Definete un set de cmpuri
<legend> Definete denumirea unui set de cmpuri (fieldset)
<select> Definete o list selectabil (o list drop-down )
<optgroup> Definete un grup de opiuni
<option> Definete o opiune dintr-o list drop-down
<button> Definete un buton ce poate fi apsat
Exemple
Exemplul 1
Ilustreaz cum pot fi create cmpuri de text ntr-o pagin HTM.
<html>
<body>
64
<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 cmpuri 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 csue 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">
65
<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>
66
</form>
</body>
</html>
Exemplul 6
Ilustreaz cum se poate crea o list drop-down simpl (o list selectabil) cu o
opiune preselectat.
<html>
<body>
<form action="">
<select name="masini">
<option value="fiat"
selected="selected">Fiat</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 numr 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>
67
</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 cmpuri 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>
68
Daca apasati butonul Trimite", veti trimite

informaia catre o pagina numita
html_form_action.asp.
</p>
</body>
</html>
Exemplul 11
Acest formular conine trei csue de validare i un buton de trimitere (submit).
<html>
<body>
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", informaia va fi
trimisa catre pagina html_form_action.asp.
</p>
</body>
</html>
Exemplul 12
Acest formular conine dou butoane radio i un buton de trimitere (submit).
<html>
<body>
method="get">
Masculin:
69
<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:someone@gmail.com" 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>
70
</html>
15. Culori
Valorile culorilor
Culorile HTML sunt definite utiliznd notaia hexazecimal (hex) pentru
combinarea valorilor culorilor de baz Red, Green, i Blue (RGB rou, verde,
albastru).
Fiecare culoare de baz este reprezentat prin dou cifre hexazecimale avnd
valori cuprinse ntre 00 i FF, adic ntre 0 i 255 n baza zece. Cele ase cifre
hexazecimale care reprezint culoarea sunt precedate de caracterul #.
Valoare
hexazecimala
Valoare RGB
#000000
rgb(0,0,0)
#FF0000
rgb(255,0,0)
#00FF00
rgb(0,255,0)
#0000FF
rgb(0,0,255)
#FFFF00
rgb(255,255,0)
#00FFFF
rgb(0,255,255)
#FF00FF
rgb(255,0,255)
#C0C0C0
rgb(192,192,192)
#FFFFFF
rgb(255,255,255)
Exemplu:
<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">
71
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 afieze cel puin 6384 de
culori diferite. Aproape 150 de nume de culori sunt recunoscute de majoritatea
browserelor.
Consoriul World Wide Web Consortium (W3C) a stabilit 16 nume de culori
valide pentru HTML i CSS: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow. Dac dorii s
folosii alte culori, va trebui s specificai valoarea lor hexazecimal.
Acum civa ani, cnd calculatoarele recunoteau maxim 255 de culori diferite,
a fost stabilit o list de 216 culori sigure pentru web care sunt afiate corect
de toate calculatoarele care utilizeaz o palet de 255 de culori.
Lista de mai jos prezint lista complet a culorilor recunoscute de majoritatea
browserelor, n ordine alfabetic.
Numele culorii
HEX
AliceBlue
#F0F8FF
AntiqueWhite
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Black
#000000
BlanchedAlmond
#FFEBCD
Blue
#0000FF
BlueViolet
#8A2BE2
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
72
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#808080
#008000
#ADFF2F
#F0FFF0
73
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
#90EE90
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
74
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
75
SlateBlue
#6A5ACD
SlateGray
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32
Deoarece aceast list nu este recunoscut de W3C, dac dorii documente
HTML sau CSS valide, folosii n loc de numele culorii valoarea ei
hexazecimal.
16. Aspectul unei pagini web (layout)

Pretutindeni pe web vei gsi pagini formatate ca paginile de ziar utiliznd
coloanele HTML.
Layout cu tabele
O practic uzual este folosirea
tabelelor (table) pentru a stabili
aspectul unei pagini HTML.
Un tabel HTML (<table>) este

utilizat pentru a mpri aceast
poriune de pagin n dou coloane.
Aceast poriune de pagin este

organizat n dou coloane, ca o
pagin de ziar.
Secretul este s folosii tabele fr

chenar (border) i poate ceva mai
mult spaiere (cell-padding).
Aa cum putei observa, exist

coloana stng i coloana dreapt.
Orict de mult text ai aduga n

aceast poriune de pagin, el va
rmne n interiorul celor dou
76
Acest text este afiat n coloana din

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

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

text. Alt text.
</tr>
</table>
</body>
</html>
17. Cadre (frames)

Cu ajutorul cadrelor putei afia mai multe documente HTML n aceeai
fereastr de browser. Fiecare document HTML este numit cadru (frame) i
este independent de celelalte documente deschise n fereastr.
Dezavantajele utilizrii cadrelor:
Programatorul paginii trebuie s in evidena mai multor documente
HTML
Este dificil de listat ntreaga pagin
Tagul frameset
Tagul <frameset> definete cum este mprit fereastra n cadre

Fiecare frameset definete un set de linii sau un set de coloane
Valoarea liniilor/coloanelor reprezint poriunea de ecran pe care o va
ocupa fiecare linie/coloan.
77
Tagul frame
Tagul <frame> definete ce document HTML va fi afiat n fiecare

cadru
n exemplul urmtor este definit un frameset cu dou coloane. Prima
coloan este setat la 25% din limea ferestrei, iar a doua coloan la 75% din
limea ferestre. Documentul "frame_a.htm" va fi deschis n prima coloan, iar
"frame_b.htm" n a doua coloan:
<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 spaiul rmas
(cols="25%,*").
Dac un cadru are borduri vizibile, utilizatorul poate redimensiona cadrul
trgnd cu mouse-ul de acestea. Pentru a mpiedica acest lucru, putei aduga
atributul noresize="noresize" n tagul <frame>. Pentru browserele
care nu recunosc cadrele, adugai tagul <noframes>.
Taguri pentru cadre

Tag
Descriere
<frameset> Definete un set de cadre
<frame>
Definete un cadru
<noframes> Definete o seciune fr cadre pentru browserele care nu
recunosc cadrele
<iframe> Definete un cadru inline
Exemple
Exemplul 1
Ilustreaz proiectarea unui frameset vertical cu trei documente diferite.
<html>
<frameset cols="25%,50%,25%">
78
<frame src="frame_c.htm">
</frameset>
</html>
Exemplul 2
Ilustreaz proiectarea unui frameset orizontal cu trei documente.
<html>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Exemplul 3
Ilustreaz utilizarea tagului <noframes> pentru browserele care nu recunosc
cadrele.
<html>
<frameset cols="25%,50%,25%">
<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.
79
<html>
<frameset rows="50%,50%">
</frameset>
</frameset>
</html>
Exemplul 5
Ilustreaz utilizarea atributului noresize astfel nct utilizatorul s nu poat
redimensiona cadrele.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<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 conine
o list de linkuri care au al doilea cadru drept target. Fiierul numit
"nav_frame.htm" conine trei link-uri care au urmtorul cod surs:
<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
80
c</a>
Al doilea cadru va afia documentul corespunztor 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 conine dou cadre. Unul din cadre se deschide la o anumit
seciune dintr-un fiier specificat prin <a name="C10"> n pagina
"link.htm".
<html>
<frame src="link.htm#C10">
</frameset>
</html
81
Exemplul 9
Acest exemplu conine dou cadre. Cadrul de navigare (content.htm) din stnga
ferestrei conine o list de linkuri care au drept target al doilea cadru (link.htm).
Al doilea cadru afieaz documentul selectat. Unul din linkurile din cadrul de
navigare este ctre o anumit seciune din fiierul destinaie. Codul din fiierul
"content.htm" arat astfel:
<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 conine 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 depit i va fi nlturat n viitoarele versiuni.
Dei este nc folosit frecvent, ar trebui s-l evitai i s folosii n locul lui
stiluri.
Codul HTML urmtor precizeaz dimensiune i tipul fontului pentru textul
afiat de browser :
<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

82
Atribut
Exemplu
size="number"
size="2"
size="+number"
size="+1"
size="-number"
size="-1"
face="face-name"
color="colorvalue"
color="colorname"
face="Times"
Descriere
Definete dimensiunea
fontului
Mrete cu 1 dimensiunea
fontului
Micoreaz cu 1 dimensiunea
fontului
Definete numele fontului
color="#eeff00" Definete culoarea fontului

color="red"
Definete culoarea fontului
Tagul <font> nu ar trebui folosit

Tagul <font> este depit n ultimele versiuni HTML (HTML 4 i XHTML).
Consoriul World Wide Web (W3C) a nlturat tagul <font>
din
recomandri. n viitoarele versiuni HTML, vor fi folosite foile de stiluri (CSS)
pentru a defini aspectul i a afia proprietile unui element HTML.
Modul corect este s utilizai stilurile.
Exemplul 1
Ilustreaz cum se stabilete fontul unui text.
<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 stabilete 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 stabilete culoarea unui text.
<html>
83
<body>
<h1 style="color:blue">Un titlu</h1>
<p style="color:red">Un paragraf</p>
</body>
</html>
Exemplul 4
Ilustreaz cum se stabilete fontul, dimensiunea i culoarea unui text.
<html>
<body>
<p style="font-family:verdana;fontsize: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 conin taguri pentru formatarea
documentului. Tagurile au fost concepute s defineasc coninutul unui
document, ca n exemplul urmtor:
<h1>Acesta este un titlu</h1>
Cnd taguri ca <font> i atributele de culoare au fost adugate n versiunea
HTML 3.2, a nceput comarul pentru proiectanii web. Proiectarea unor siteuri web mari n care informaiile despre font i culoare trebuiau adugate pe
fiecare pagin web, a devenit o activitate costisitoare i plictisitoare.
n HTML 4.0 toate formatrile sunt nlturate din document i memorate ntr-o
foaie separat de stiluri.
Deoarece HTML 4.0 separ prezentarea de structura documentului, obinem
controlul complet al aspectului documentului fr a interfera n mod nefericit
cu coninutul acestuia.
20. Stiluri n HTML 4.0

Exemple
Exemplul 1
84
Ilustreaz cum se formateaz un document HTML cu ajutorul informaiilor de

stil adugate n seciunea <head>.
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
</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 folosete 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>
85
<p>La fel!</p>
</body>
</html>
Cum folosim stilurile

Cnd browserul citete o foaie de stiluri, va formata documentul conform
precizrilor din foaie. Sunt trei modaliti de a insera o foaie de stiluri ntr-un
document HTML:
Foaie de stiluri extern

Este ideal cnd stilul respectiv trebuie aplicat mai multor pagini. Cu o foaie de
stil extern, putei modifica coninutul ntregului site web modificnd un singur
fiier. Fiecare pagin din site trebuie s se lege la foaia de stiluri cu tagul
<link> plasat n seciunea head ca n exemplul urmtor:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Foaie de stiluri intern

Se folosete cnd un singur document are un anumit stil. Stilul intern respectiv
se definete n seciunea head cu ajutorul tagului <style> ca n exemplul
urmtor:
<head>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Stiluri inline
Stilul inline se folosete cnd un anumit stil se aplic unui element care apare o
singur dat n document.
n acest caz, atributul style se aplic n tagul elementului respectiv i poate
conine orice proprieti CSS. Exemplul urmtor ilustreaz cum se schimb
culoarea i marginea stng pentru un paragraf:
<p style="color: red; margin-left: 20px">
Acesta este un paragraf.
</p>
86
Taguri pentru stil

Tag
Descriere
<style>
Definete un stil
<link>
Definete referina la o resurs
<div>
Definete o seciune din document
<span>
Definete o seciune din document
21. Entitile de tip caracter

Unele caractere sunt rezervate n HTML. Spre exemplu, nu putei folosi
simbolurile mai mic i mai mare deoarece fac parte din sintaxa unui tag i
browserul le poate interpreta eronat.
Dac dorii ca browserul s afieze corect aceste caractere trebuie s inserai
simbolurile corespunztoare n codul HTML.
O entitate de tip caracter (simbol) are urmtoarea sintax: &entity_name;
sau &#entity_code;
Pentru a afia semnul mai mic trebuie s scriei: < sau <
Dei denumirile simbolurilor sunt mai uor de reinut, nu toate browserele
recunosc denumirile entitilor ci codul asociat entitii..
Non-breaking Space
Cel mai utilizat simbol din HTML este non-breaking space (spaiu nentrerupt).
n mod normal HTML va trunchia spaiile din textul paginii, reducnd spaiile
succesive la unul singur. Pentru a aduga mai multe spaii n pagin, folosii
simbolul .
Exemplu
<html>
<body>
<p>Entitati de tip caracter</p>
<p>&</p>
<p>©</p>
</body>
</html>
Simboluri uzuale
Obs. Denumirile simbolurilor sunt case-sensitive!
87
Caracter
<
>
&
Descriere
non-breaking space
mai mic dect
mai mare dect
ampersand
cent
pound
yen
euro
section
copyright
marc nregistrat
Nume

<
>
&
¢
£
¥
€
§
©
®
Cod

<
>
&
¢
£
¥
€
§
©
®
Codurile pentru diacriticele din limba romn sunt:

valoare
cod
ă
Ă
â
Â
î
Î
ş
Ş
ţ
Ţ
22. Elementul head

Elementul head conine informaii generale despre document, numite i metainformaii. Meta nseamn informaii despre.
Informaiile din elementul head

Informaiile din interiorul elementului head nu ar trebui afiate de ctre
browser.
88
Conform standardului HTML, numai cteva taguri sunt permise n elementul

head i anume:<base>, <link>, <meta>, <title>, <style> i
<script>.
Evitai s inserai n elementul head alte taguri n afara celor de mai sus.
Taguri permise n elementul head

Tag
<head>
<title>
<base>
<link>
<meta>
Descriere
Definete informaii despre document
Definete titlul documentului
Definete un URL de baz pentru toate linkurile din pagin
Definete referina unei resurse
Definete meta informaii
Exemple
Exemplul 1
Informaia title din elementul head nu este afiat n fereastra browserului.
<html>
<head>
<title>Acest titlu nu este afisat</title>
</head>
<body>
<p>Acest text este afisat.</p>
</body>
</html>
Exemplul 2
Ilustreaz cu se folosete tagul base astfel nct 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>
89
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

Aa cum am vzut n capitolul anterior, elementul head conine informaii
generale (meta informaii) despre document.
Cel mai adesea, elementul meta furnizeaz informaii relevante pentru
browsere sau motoarele de cutare, cum ar fi descrierea coninutului
documentului.
Cuvinte cheie pentru motoarele de cutare

Unele motoare de cutare folosesc numele i atributele de coninut din tagul
meta pentru a indexa paginile dumneavoastr.
Spre exemplu, elementul meta urmtor poate oferi o descriere a paginii:
<meta name="description" content="Tutoriale pentru
HTML si CSS"/>
Acest element meta definete cuvintele cheie pentru pagin:
<meta name="keywords" content="HTML, CSS,
JavaScript"/>
Scopul atributelor name i content este s descrie coninutul paginii.
Totui, pentru c unii webmasteri utilizeaz tagurile meta pentru spam, spre
exemplu repetarea cuvintelor cheie pentru a obine o poziie mai bun la
indexare, unele motoare de cutare nu mai folosesc n ntregime cuvintele cheie
din meta.
90
Exemple
Exemplul 1
Informaiile 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
Informaiile 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>
91
<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>
Vei 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
92
Cnd apsai un link dintr-un document HTML, tagul <a> indic ctre o
adres web cu o valoare a atributului href ca aceasta: <a
href="mypage.htm">O pagina</a>.
Plecnd de la acest tag, browserul va construi o adresa web completa ca
aceasta: http://www.mysite.com/html/mypage.htm pentru a accesa pagina.
URL - Uniform Resource Locator

Uniform Resource Locator (URL) este utilizat pentru a adresa orice resurs de
pe
web.
O
adres
web
complet
ca
aceasta
:
http://www.mysite.com/html/mypage.htm respect urmtoarele reguli de
sintax:
schema://host.domain:port/path/filename
schema definete tipul de serviciu de Internet. Tipul cel mai comun este http.
domain definete numele domeniului Internet yahoo.com.
Construcia host definete domeniul gazd. Dac este omis, gazda implicit
pentru http este www.
Construcia :port definete numrul de port pentru gazd i este n mod normal
omis. Portul implicit pentru http este 80.
Construcia path definete o cale (un subdirector) de pe server. Dac calea este
omis, resursa (documentul) trebuie s se gseasc n directorul rdcin al
site-ului web.
Construcia filename definete numele documentului. Numele implicit poate fi
default.asp, sau index.html sau altceva, n funcie de setrile serverului web.
Scheme URL
n tabelul urmtor putei gsi cele mai folosite scheme URL:
Schema
Ce acceseaz
file
un fiier de pe calculatorul local
ftp
un fiier de pe un server FTP
http
un fiier de pe un server World Wide Web
gopher
un fiier de pe un server Gopher
news
un grup de tiri Usenet
telnet
o conexiune Telnet
WAIS
un fiier de pe un server WAIS
Accesarea unui newsgroup
Urmtorul cod HTML:
<a href="news:alt.html">HTML Newsgroup</a>
creeaz un link ctre un newsgroup ca acesta HTML Newsgroup.
93
Descrcarea cu FTP
Urmtorul cod HTML:
<a
href="ftp://www.w3schools.com/ftp/winzip.exe">Downloa
d WinZip</a>
Creeaz un link pentru a descrca un fiier, ca acesta: Download WinZip.
(Linkul nu funcioneaz dac sursa nu posed un director ftp.)
Link ctre propriul e-mail
Urmtorul cod HTML:
<a
href="mailto:someone@yahoo.com">someone@yahoo.com</a>
creeaz un link ctre propriul e-mail ca acesta someone@yahoo.com
25. Scripturi
Pentru a face paginile HTML mai dinamice i mai interactive, putei aduga
scripturi.
Inserarea unui script ntr-o pagin HTML

n HTML un script este definit cu tagul <script>. Trebuie s utilizai
atributul type pentru a specifica limbajul scriptului.
Exemplu:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Acest script determin afiarea urmtorului mesaj:
Hello World!
Cum procedai cu browserele vechi

Un browser care nu recunoate tagul <script>, va afia coninutul scriptului
ca text pe pagin. Pentru a evita acest lucru, ar trebui s ascundei scriptul n
taguri tip comentariu. Un browser care nu recunoate tagul <script> va
ignora acest comentariu i nu va mai afia coninutul tagului, n timp ce un
94
browser nou va nelege c scriptul trebuie executat, chiar dac este inclus n
taguri de comentariu.
Exemplu:
<!-document.write("Hello World!")
//-->
</script>
Tagul <noscript>
Acest tag este utilizat pentru a defini un text alternativ dac scriptul nu poate fi
executat. Se folosete pentru browserele care recunosc tagul <script>, dar
nu accept limbajul n care este scris. n aceast situaie, browserele vor afia
textul din tagul <noscript>. Tagul va fi ignorat de browserele care pot
executa scriptul.
Exemplu:
<!-document.write("Hello World!")
//-->
</script>
<noscript>Browserul dvs. nu poate executa
JavaScript!</noscript>
Taguri pentru scripturi

Tag
<script>
<noscript>
<object>
<param>
Descriere
Definete un script
Definete un text alternativ dac scriptul nu poate fi executat
Definete un obiect (embedded)
Definete un set de parametri de execuie pentru obiect
Exemple
Exemplul 1
Ilustreaz cum inserai un script Java ntr-un document HTML.
<html>
<body>
document.write("<h1>Hello World!</h1>")
95
</script>
</body>
</html>
Exemplul 2
Ilustreaz cum trebuie procedat cu browserele care nu recunosc scripturile.
<html>
<body>
<!-document.write("Daca acest text este afisat,
browserul dvs. recunoaste scripturile!")
//-->
</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 declana evenimente n browser, spre
exemplu, executarea unui script Java cnd un utilizator face click pe un element
HTML. n continuare este prezentat o list de atribute care pot fi inserate n
tagurile HTML pentru a defini evenimente.
Evenimente pentru ferestre

Pot s apar numai n elementule body i frameset.
Atribut
Valoare Descriere
96
onload
script
onunload
script
Scriptul va fi executat cnd documentul se

ncarc
Scriptul va fi executat cnd documentul nu se
ncarc
Evenimente pentru formulare

Pot aprea numai n elementele unui formular.
Atribut
Valoare Descriere
onchange
script
Scriptul va fi executat cnd elementul se
modific
onsubmit
script
Scriptul va fi executat cnd formularul este
trimis (cu butonul submit)
onreset
script
Scriptul va fi executat cnd formularul este
resetat (cu butonul reset)
onselect
script
Scriptul va fi executat cnd elementul este
selectat
onblur
script
Scriptul va fi executat cnd utilizatorul face
click n afara elementului
onfocus
script
Scriptul va fi executat cnd utilizatorul face
click pe element (focus)
Evenimente pentru tastatur

Nu pot s apar n elementele base, bdo, br, frame, frameset, head,
html, iframe, meta, param, script, style i title.
Atribut
Valoare Descriere
onkeydown
script
Scriptul va fi executat cnd este apsat o tast
onkeypress
script
Scriptul va fi executat cnd o tast este apsat
i eliberat
onkeyup
script
Scriptul va fi executat cnd o tast este
eliberat
Evenimente pentru mouse

Nu pot s apar n elementele base, bdo, br, frame, frameset,
head, html, iframe, meta, param, script, style,
title.
Atribut
Valoare Descriere
onclick
script
Scriptul va fi executat cnd se face click cu
mouse-ul
97
ondblclick
script
onmousedown
script
onmousemove
script
onmouseout
script
onmouseover
script
onmouseup
script
Scriptul va fi executat cnd se face dublu click

cu mouse-ul
Scriptul va fi executat cnd un buton de mouse
este apsat
Scriptul va fi executat cnd cursorul mouseului se mic
Scriptul va fi executat cnd cursorul mouseului prsete elementul
Scriptul va fi executat cnd cursorul mouseului se mic peste element
Scriptul va fi executat cnd butonul mouse-ului
este eliberat
27. Calculatorul poate fi server WEB

Dac vrei ca alii s poat vedea paginile dvs. trebuie s le publicai pe web.
Pentru a v publica paginile, trebuie s le salvai pe un server web.
Calculatorul dvs. poate funciona ca un server web dac instalai IIS. Microsoft
IIS este o component gratuit de server web.
IIS - Internet Information Server

IIS este un set de servicii bazate pe Internet pentru servere creat de Microsoft
pentru a fi utilizat cu Microsoft Windows. IIS este disponibil pentru Windows
2000, XP, Vista i Windows NT. IIS este uor de instalat i este ideal pentru
proiectarea i testarea aplicaiilor web.
IIS include Active Server Pages (ASP), un standard de scripturi orientate pe
server care poate fi utilizat pentru a crea aplicaii web dinamice i interactive.
Cum instalai IIS n Windows Vista

Parcurgei urmtorii pai:
1. Deschidei Control Panel din Start menu
2. Deschidei cu dublu click Programs and Features
3. Click pe "Turn Windows features on or off"
4. Selectai csua pentru Internet Information Services (IIS), i click OK
Dup ce ai instalat IIS, rulai Run Windows Update.
Cum instalai IIS n Windows XP i Windows 2000

Parcurgei urmtorii pai:
1. n Start menu, click Settings i selectai Control Panel
2. Dublu click pe Add or Remove Programs
98
3. Click Add/Remove Windows Components

4. Click Internet Information Services (IIS)
5. Click Details
6. Selectai csua pentru World Wide Web Service, i click OK
7. n seciunea Windows Component , click Next pentru a instala IIS
Dup ce ai instalat IIS, rulai Run Windows Update.
Testai paginile web

Dup ce ai instalat IIS parcurgei urmtorii pai:
1. Cutai n C: un folder nou numit Inetpub
2. Deschidei folderul Inetpub i cutai folderul wwwroot
3. Creai un nou folder, ca "MyWeb", n wwwroot
4. Scriei un cod ASP i salvai-l ca "test1.asp" n folderul creat anterior
5. Deschidei browserul i tastai "http://localhost/MyWeb/test1.asp",
pentru a vedea pagina web pe care ai creat-o.
II. XHTML
1. Ce este XHTML?
Pentru a putea nelege XHTML, trebuie s avei cunotine elementare despre
HTML i proiectarea paginilor web.
XHTML este abrevierea pentru EXtensible HyperText Markup
Language
XHTML este aproape identic cu HTML 4.01
XHTML este o versiune mai strict i mai curat a HTML-ului
XHTML este HTML definit ca o aplicaie XML
XHTML este o recomandare a consoriului W3C
Toate browserele recunosc XHTML
2. De ce XHTML?
XHTML este o combinaie ntre HTML i XML (EXtensible Markup
Language).
XHTML const n toate elementele din HTML 4.01, combinate cu sintaxa
strict din XML.
Multe pagini internet conin cod HTML ru.
Urmtorul cod va funciona corect ntr-un browser, chiar dac nu respect
regulile HTML:
99
<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 informaia, iar HTML este proiectat s afieze
informaia.
Astzi, piaa este format din diferite tehnologii de browser, unele rulnd pe
calculatoare, altele pe telefoane mobile i alte dispozitive de mic gabarit.
Ultimele menionate, nu au resursele sau puterea de a interpreta un limbaj de
marcare ru.
Combinnd punctele tari din HTML i XML, a rezultat XHTML, un limbaj de
marcare util acum i n viitor.
3. Diferene ntre XHTML i HTML

Cele mai importante diferene
Elementele XHTML trebuie imbricate corect

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

n HTML, unele elemente pot fi imbricate incorect, ca n exemplul urmtor:
<b><i>Acest text este bold si italic.</b></i>
n XHTML, toate elementele trebuie imbricate corect, ca n exemplul urmtor:
<b><i>Acest text este bold si italic.</i></b>
Obs: O greeal comun la definirea listele imbricate este c se uit c
elementele listei interioare trebuie s fie ntre tagurile <li> i </li>.
Acest cod este greit:
<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ul>
100
<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
greit:
<p>Acesta este un paragraf
<p>Acesta este alt paragraf
Modul corect de scriere este:
<p>Acesta este alt paragraf</p>
Elementele vide trebuie de asemenea nchise.
O intrerupere de linie: <br>
O linie orizontala: <hr>
O imagine: <img src="happy.gif" alt="Happy face">
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.
<BODY>
<P>Acesta este un paragraf</P>
101
</BODY>
<body>
</body>
Documentele XHTML trebuie s aib un element rdcin

Toate elementele XHTML trebuie s fie incluse n elementul rdcin
<html>. Elementele descendente (descendenii) trebuie s fie n perechi i
incluse corect n elementul printe.
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 nlocuiete numele atributului
Declaraia DOCTYPE este obligatorie
Numele atributele trebuie scrise cu litere mici

<table WIDTH="100%">
<table width="100%">
Valorile atributelor trebuie scrise ntre ghilimele

<table width=100%>
<table width="100%">
102
Minimizarea atributelor este interzis

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
<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 fiecrui element XHTML. El specific limba n
care este scris coninutul unui element.
Dac utilizai atributul lang ntr-un element, trebuie s adugai i atributul
xml:lang, ca n exemplul urmtor:
<div lang="it" xml:lang="it">Ciao bella!</div>
Elemente XHTML obligatorii

103
Toate documentele XHTML trebuie s aib o declaraie DOCTYPE. Elementele

html, head, title, i body nu pot lipsi.
Un exemplu de document XHTML cu numrul minim de taguri obligatorii:
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aici este titlul</title>
</head>
<body>
</body>
</html>
Obs: Declaraia DOCTYPE nu face parte din documentul XHTML propriu-zis.
Nu este un element XHTML.
Obs: Atributul xmlns din <html>, specific spaiul de nume xml pentru un
document i este necesar n documentele XHTML. Totui, validatorul HTML
de la w3.org ignor absena atributului xmlns deoarece spaiul de nume
"xmlns=http://www.w3.org/1999/xhtml" este implicit i va fi adugat automat
n tagul <html> al documentului, chiar dac l-ai omis.
5. DTD (Document Type Definitions) XHTML

Cel mai ntlnit DTD este XHTML Transitional.
Declaraia <!DOCTYPE> este obligatorie

Un document XHTML este format din trei pri principale:
declaraia DOCTYPE
Seciunea <head>
Seciunea <body>
Structura de baz a unui document este:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
104
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/xhtml1transitional.dtd">
<html>
<head>
<title>Un document simplu</title>
</head>
<body>
<p>Un paragraf</p>
</body>
</html>
Declaraia DOCTYPE definete tipul documentului. n rest documentul arat ca
n HTML.
Document Type Definitions (DTD)
O declaraie DTD specific sintaxa unei pagini web n SGML

DTD-urile sunt utilizate de aplicaiile SGML, cum este HTML, pentru
a specifica regulile pentru documentele de un anumit tip, inclusiv un
set de declaraii de elemente i entiti
n XHTML, DTD descrie ntr-un limbaj precis, neles de calculator,
sintaxa acceptat pentru marcajul XHTML
n XHTML sunt trei tipuri de DTD:
STRICT
TRANSITIONAL
FRAMESET
XHTML 1.0 Strict
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Folosii aceast declaraie DOCTYPE cnd dorii un marcaj curat, independent
de elementele de prezentare. Utilizai-l mpreun cu CSS.
XHTML 1.0 Transitional
Transitional//EN"
105
Folosii aceast declaraie DOCTYPE cnd dorii s folosii facilitile HTML

de prezentare.
XHTML 1.0 Frameset
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
Folosii aceast declaraie DOCTYPE cnd dorii s utilizai cadre (frames)
HTML.
Un document XHTML poate fi validat cu validatorul W3C. nainte de a valida
documentulXHTML, inserai declaraia DTD potrivit din cele trei declaraii
prezentate anterior.
6. Modularizarea XHTML
Modelul de modularizare XHTML definete modulele XHTML.
XHTML conine majoritatea facilitilor necesare unui proiectant web. Pentru
unele aplicaii, XHTML este prea mare i prea complex, pentru altele este prea
simplu. Prin mprirea XHTML n module, comsoriul W3C a creat seturi mici
i bine definite de elemente XHTML care pot fi folosite separat pentru
dispozitivele mici, sau pot fi combinate cu alte standarde XML n aplicaii mult
mai complexe.
Cu un XHTML modularizat, proiectaii pot:
Alege elemente suportate de un dispozitiv
Simplifica XHTML-ul pentru dispozitive mici
Extinde XHTML-ul pentru aplicaii complexe prin adugarea de noi
funcionaliti XML (ca MathML, SVG, Voice i Multimedia)
Defini profiluri XHTML ca XHTML Basic (un subset XHTML pentru
dispozitive mobile)
Modulele XHTML
Consoriul W3C a mprit definiiile XHTML n 28 de module:
Numele modulului
Descriere
Applet Module
Definete elementul applet* (depit)
Base Module
Definete elementele de baz
Basic Forms Module
Definete elementele de baz pentru formulare
Basic Tables Module
Definete elementele de baz pentru tabele
Bi-directional Text Module Definete elementul bdo
Client Image Map Module Definete elementele de mapare a imaginilor pentru
browser
106
Edit Module
Forms Module
Frames Module
Hypertext Module
Iframe Module
Image Module
Intrinsic Events Module
Legacy Module
Link Module
List Module
Metainformation Module
Name Identification
Module
Object Module
Presentation Module
Scripting Module
Server Image Map Module
Definete elementele de editare del i ins

Definete toate elementele folosite n formulare
Definete elementele pentru frameset
Definete elementul a
Definete elementul iframe
Definete elementul img
Definete atributele evenimentelor, ca onblur i
onchange
Definete elementele i atributele depite*
Definete elementul link
Definete elementele pentru liste ol, li, ul, dd, dt, i
dl
Definete elementul meta
Definete atributul depit* name
Definete elementele object i param

Definete elementele de prezentare, ca b i i
Definete elementele script i noscript
Definete elementele de mapare a imaginii pentru
server
Structure Module
Definete elementele html, head, title i body
Style Attribute Module
Definete atributul style
Style Sheet Module
Definete elementul style
Tables Module
Definete elementele utilizate n tabele
Target Module
Definete atributul target
Text Module
Definete elementele container pentru text, ca p i
h1
* Elementele depite nu ar trebui folosite n XHTML.
III. LISTA TAGURILOR HTML 4.01 /

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

Definete un comentariu
STF
<!DOCTYPE>
Definete tipul documentului
STF
107
<a>
<abbr>
<acronym>
<address>
<area />
<b>
<base />
<bdo>
<big>
<blockquote>
<body>
<br />
<button>
<caption>
<cite>
<code>
<col />
<colgroup>
<dd>
<del>
<dfn>
<div>
<dl>
<dt>
<em>
<fieldset>
<form>
<frame />
<frameset>
<h1> to <h6>
Definete o ancor
STF
Definete o abreviere
STF
Definete un acronim
STF
Definete informaiile de contact pentru
STF
autorul documentului
Definete o zon n interiorul unei imagini STF
mapate
Definete un text ngroat
STF
Definete o adres implicit sau o
STF
destinaie implicit pentru toate linkurile
dintr-o pagin
Definete direcia textului
STF
Definete un text mare
STF
Definete un citat lung
STF
Definete corpul documentului
STF
Definete o ntrerupere de linie
STF
Definete un buton ce poate fi apsat
STF
Definete titlul unui tabel
STF
Definete un citat
STF
Definete un text tip cod de calculator
STF
Definete valorile atributelor pentru una
STF
sau mai multe coloane dintr-un tabel
Definete un grup de coloane dintr-un tabel STF
pentru formatare
Definete descrierea unui termen dintr-o STF
list de definiii
Definete un text ters
STF
Definete o termen de definiie
STF
Definete o seciune dintr-un document
STF
Definete o list de definiii
STF
Definete un element dintr-o list de
STF
definiii
Definete un text emphasized (accentuat) STF
Definete un chenar n jurul elementelor STF
unui formular
Definete un formular HTML pentru
STF
utilizator
Definete o fereastr (un cadru) dintr-un F
frameset
Definete un set de cadre
F
Definesc titlurile HTML
STF
108
<head>
<hr />
<html>
<i>
<iframe>
<img />
<input />
<ins>
<kbd>
<label>
<legend>
<li>
<link />
<map>
<meta />
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param />
<pre>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<style>
Definete informaiile despre document

STF
Definete o linie orizontal
STF
Definete un document HTML
STF
Definete un text italic
STF
Definete un cadru inline
TF
Definete o imagine
STF
Definete un control de intrare
STF
Definete un text inserat
STF
Definete un text de la tastatur
STF
Definete eticheta unui element de intrare STF
Definete un titlu pentru un element
STF
fieldset
Definete un item dintr-o list
STF
Definete relaia dintre un document i o STF
resurs extern
Definete o imagine mapat
STF
Definete meta-datele despre un document STF
HTML
Definete un coninut alternativ pentru
TF
utilizatorii care nu accept cadrele
Definete un coninut alternativ pentru
STF
utilizatorii care nu accept scripturile de
server
Definete un obiect mpachetat
STF
Definete o list ordonat
STF
Definete un grup de opiuni nrudite dintr- STF
o list de selecie
Definete o opiune dintr-o list de selecie STF
Definete un paragraf
STF
Definete un parametru pentru un obiect STF
Definete un text preformatat
STF
Definete un citat scurt
STF
Definete un model de cod de calculator STF
Definete un script pentru client
STF
Definete o list de selecie (o list drop- STF
down)
Definete un text mic
STF
Definete o seciune dintr-un document
STF
Definete un text ngroat
STF
Definete informaiile de stil pentru un
STF
109
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<ul>
<var>
document
Definete un text de tip indice
Definete un text de tip exponent
Definete un tabel
Grupeaz coninutul corpului unui tabel
Definete o celul dintr-un tabel
Definete un control de intrare multi-linie
Grupeaz coninutul subsolului unui tabel
Definete o celul de tip titlu ntr-un tabel
Grupeaz coninutul de tip titlu dintr-un
tabel
Definete titlul unui document
Definete o linie dintr-un tabel
Definete un text tip teletype
Definete o list neordonat
Definete o variabil
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
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. Putei folosi comentariile pentru a explica codul
sau pentru a stoca informaii specifice, cum ar fi scripturile i elementele de stil
(pentru browserele vechi). Acest tag nu are atribute standard sau atribute de
evenimente.
Declaraia <!DOCTYPE>
Exemplu de document cu o declaraie de XHTML 1.0 Transitional:
Transitional//EN"
<html>
<head>
<title>Title of the document</title>
</head>
<body>
110
The content of the document......

</body>
</html>
Declaraia doctype ar trebui s fie prima dintr-un document HTML, nainte
de tagul <html>.
Declaraia doctype nu este un tag HTML; este o indicaie pentru browserele
web referitoare la versiunea de limbaj de marcare utilizat n scrierea paginii.
Declaraia doctype se refer la DTD (Document Type Definition ).
Declaraii doctype disponibile n recomandrile W3C
HTML 4.01 Strict
Documentul poate conine toate elementele i atributele HTML, dar nu poate
conine elemente de prezentare sau elemente depite (ca font). Nu sunt
permise elemente frameset. Sintaxa declaraiei este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Documentul poate conine toate elementele i atributele HTML, inclusiv
elementele de prezentare i cele depite (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.
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
XHTML 1.0 Transitional
111
Este la fel ca HTML 4.01 Transitional, dar marcajele trebuie s respecte

regulile XML.
Transitional//EN"
XHTML 1.0 Frameset
Este la fel ca XHTML 1.0 Transitional, dar este permis utilizarea elementelor
frameset.
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
XHTML 1.1
Este la fel ca XHTML 1.0 Strict, dar pot fi adugate 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> definete o ancor care poate fi folosit n dou moduri:
1. Pentru a crea un link ctre 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 destinaia link-ului. n mod predefinit, linkurile sunt afiate 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 roie
Linkurile pot fi stilizate cu CSS.
Atribute opionale
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
STF
documentului referit
112
coords
href
hreflang
name
rel
coordinates Specific coordonatele unui link

STF
URL
Specific destinaia unui link
STF
language_code Specific limba documentului referit
STF
section_name Specific numele unei ancore
STF
text
Specific relaia dintre documentul curent STF
i documentul referit
rev
text
Specific relaia dintre documentul referit STF
i documentul curent document
shape
default
Specific forma unui link
STF
rect
circle
poly
target
_blank
Specific unde se va deschide documentul TF
_parent
referit
_self
_top
framename
Atribute standard
Atribut
Valoare
Descriere
DTD
accesskey character
Specific o tast (shortcut) pentru a accesa STF
elementul
class
classname
Specific numele clasei unui element
STF
dir
rtl
Specific direcia textului pentru
STF
ltr
coninutul unui element
id
id
Specific un id unic pentru un element
STF
lang
language_code Specific limba pentru coninutul unui
STF
element
style
style_definition Specific stilul inline a unui element
STF
tabindex number
Specific ordinea tab a unui element
STF
title
text
Specific informaii suplimentare despre STF
un element
xml:lang language_code Specific limba pentru coninutul unui
STF
element, n documentele XHTML
Atribute pentru evenimente
Atribut
Valoare
Descriere
DTD
onblur
script
Script executat cnd se face click cu
STF
mouse-ul n afara elementului
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 cnd mouse-ul viziteaz STF
elementul
113
onmousedown script
onmousemove script
onmouseout script
onmouseover script
onmouseup
script
onkeydown script
onkeypress script
onkeyup
script
Script executat cnd butonul mouse-ului

este apsat
Script executat cnd cursorul mouse-ului
se mic
prsete un element
se mic peste un element
Script executat cnd butonul mouse-ului
este eliberat
Script executat cnd este apsat o tast
Script executat cnd o tast este apsat i
eliberat
Script executat cnd o tast este eliberat
STF
STF
STF
STF
STF
STF
STF
STF
Tagul <abbr>
Exemplu:
<abbr title="Organizatia Natiunilor Unite">ONU</abbr>
a fost fondata in 1945.
Tagul <abbr> descrie o fraz abreviat.
Marcnd abrevierile, putei furniza informaii utile browserelor i motoarelor de
cutare.
Obs: Atributul title este utilizat pentru a afia versiunea complet a
expresiei abreviate, atunci cnd mouse-ul se mic 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 definete un acronim, adic un text care poate fi pronunat ca i cum ar fi
un cuvnt (NATO, NASA, GUI).
Marcnd acronimele, putei furniza informaii utile browserelor i motoarelor
de cutare.
Obs: Atributul title este utilizat pentru a afia versiunea complet a
acronimului, atunci cnd mouse-ul se mic peste el.
114

onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <address>
Exemplu:
<address>
Proiectat de Web Design co.<br />
<a href="mailto:us@example.org">Contact</a><br />
Adresa: Bucuresti, Aleea Viilor nr.156<br />
Tel: 021.335.1237
</address>
Tagul definete informaiile 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, coninutul elementului este afiat n italic i, uzual,
browserul va aduga o ntrerupere de linie nainte i dup elementul adres.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <area>
Tagul definete o zon dintr-o imagine mapat (o imagine cu zone ce pot fi
acionate 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 relaie 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 neaprat atributul alt
care specific un text alternativ pentru zona definit.
Atribute opionale
Atribut
Valoare
Descriere
DTD
coords
coordinates Specific coordonatele zonei
STF
href
URL
Specific destinaia unui link din zon
STF
nohref
nohref
Specific faptul c zona nu are un link
STF
asociat
shape
default
Specific forma zonei
STF
rect
circle
poly
115
target
_blank
Specific unde se va deschide pagina
TF
_parent
precizat n atributul href
_self
_top
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 depite, dar e posibil s obinei
rezultate mai bune cu CSS.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <base>
Tagul specific o adres sau o destinaie 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 STF
relative din pagin
target _blank
Specific unde se vor deschide toate linkurile din TF
_parent
pagin
_self
_top
framename
Tagul nu are atribute standard sau de evenimente.
Tagul <bdo>
Tagul permite specificarea direciei textului i suprascrie algoritmul
bidirecional. Are obligatoriu atributul dir care specific direcia textului din
interiorul elementului, cu valorile posibile ltr i rtl.
Tagul nu are atribute de evenimente.
Tagul <blockquote>
116
Tagul definete un citat lung. Browserul insereaz spaiu alb nainte i dup
acest element i o margine.
Obs: Pentru a marca citatele scurte folosii elementul q.
Tagul poate avea atributul opional cite, un URL care specific sursa
citatului.
Atribute standard: class, dir, id, lang, style, tabindex, title,
xml:lang
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <body>
Tagul definete corpul documentului.
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 STF
mouse
onload
script
Script executat cnd documentul se
ncarc
onmousedown script
Script executat cnd butonul mouse-ului STF
este apsat
onmousemove script
Script executat cnd cursorul mouse-ului STF
se mic
onmouseout script
prsete un element
onmouseover script
se mic peste un element
onmouseup script
Script executat cnd butonul mouse-ului STF
este eliberat
onkeydown script
Script executat cnd o tast este apsat STF
onkeypress script
Script executat cnd o tast este apsat i STF
eliberat
onkeyup
script
Script executat cnd o tast este eliberat STF
onunload
script
Script executat cnd documentul nu se
ncarc
Tagul <br>
117
Tagul insereaz o ntrerupere de linie i este un tag vid, fr tag de nchidere.

n XHTML tagul trebuie nchis corect astfel: <br />.
Obs: Nu folosii tagul pentru a crea paragrafe.
Atribute standard: class, id, style, title
Tagul nu are atribute pentru evenimente.
Tagul <button>
Tagul definete un buton ce poate fi apsat de utilizator. n interiorul
elementului putei avea text sau imagini. Aceasta este diferena dintre acest
buton i cel creat cu un element input.
Specificai ntotdeauna atributul type. Pentru IE tipul implicit este "button",
n timp ce n alte browsere (i n specificaia W3C) este "submit".
Atribute opionale
Atribut
Valoare
Descriere
DTD
disabled disabled
Specific c butonul este dezactivat
STF
name
name
Specific numele butonului
STF
type
button
Specific tipul butonului
STF
reset
submit
value
text
Specific valoarea care va trimis de
STF
browser
onfocus,
onmousedown,
onmousemove,
onmouseout,
Tagul <caption>
Tagul definete titlul unui tabel i trebuie inserat n document imediat dup
tagul <table>. Putei specifica un singur titlu pentru un tabel. Uzual titlul va
fi centrat n raport cu tabelul.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagurile <em> <strong> <dfn> <code> <samp> <kbd>

<var> <cite>
Sunt taguri pentru formatarea unei poriuni de text. Ele nu sunt depite, dar se
pot obine rezultate mai bune cu CSS.
118

onmousemove,
onmouseout,
onmouseover,
onmouseup,
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 definete 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.
Dei n HTML <col> nu are tag de nchidere, n XHTML tagul trebuie nchis
corect.
Obs: Dac adugai atributul class n tagul <col>, atunci putei formata
coloanele cu CSS.
119
Atribute opionale
Attribute Value
align
left
right
center
justify
char
char
character
charoff number
span
number
Description
Specific alinierea coninutului coloanei
DTD
STF
Specific alinierea coninutului coloanei la un

caracter
Specific numrul de caractere cu care va fi
aliniat coninutul fa de caracterul specificat
cu atributul char
Specific numrul de coloane pe care se va
ntinde elementul col
Specific alinierea vertical a coninutului
relativ la un element col
STF
STF
STF
valign top
STF
middle
bottom
baseline
width
%
Specific limea elementului col
STF
pixels
relative_length
onmousemove,
onmouseout,
onmouseover,
onmouseup,
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>
120
<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 adugai atributul class n tagul <colgroup>, atunci putei
formata coloanele cu CSS.
Atribute opionale: aceleai ca la tagul <col>
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <dd>
Tagul descrie un element (item) dintr-o list de definiii.
Tagul este utilizat mpreun cu <dl> (care declar o list de definiii) i <dt>
(care definete un termen din list).
n interiorul tagului <dd> pot s apar paragrafe, ntreruperi de linie, imagini,
liste, etc.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <del>
Tagul definete un text care a fost ters dintr-un document.
Obs: Folosii acest tag mpreun cu tagul <ins> pentru a descrie actualizrile
i modificrile fcute n document.
Atribute opionale
121
Atribut
cite
Valoare
URL
Descriere
DTD
Specific URL-ul unui document care STF
explic de ce a fost ters textul
datetime YYYY-MMSpecific data i ora la care a fost
STF
DDThh:mm:ssTZD
ters textul
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <div>
Exemplu:
<html>
<body>
<h3>Acesta este un titlu</h3>
<div style="color:#00FF00">
<h3>Acesta este un titlu dintr-o sectiune div</h3>
<p>Acesta este un paragraf dintr-o seciune
div.</p>
</div>
</body>
</html>
Tagul definete o seciune 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 afieaz o ntrerupere de linie nainte i dup un
element div.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <dl>
Tagul declar o list de definiii i este utilizat mpreun cu tagurile <dt> i
<dd>.
122

onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <dt>
Tagul definete un item dintr-o list de definiii i este utilizat mpreun cu
tagurile <dl> i <dd>.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
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> definete un titlu pentru elementul fieldset.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <form>
Tagul este utilizat pentru a crea formulare HTML pentru intrrile utilizatorului.
Un formular poate conine elemente de intrare, cum ar fi: cmpuri de text,
csue de validare (checkbox), butoane radio, butoane de trimitere (submit) etc.
123
Un formular poate conine i meniuri de selectare, precum i elemente

textarea, fieldset, legend, i label.
Formularele sunt folosite pentru a trimite date ctre server..
Obs: Elementul form este un element la nivel de bloc i creeaz o ntrerupere
de linie, nainte i dup el nsui.
Atribute obligatorii
Atribut
Valoare
Descriere
DTD
action
URL
Specific unde se trimit datele din formular STF
cnd acesta este submis (submit)
Atribute opionale
Atribut
Valoare
accept
MIME_type
Descriere
DTD
Specific tipurile de fiiere ce pot fi
STF
uploadate prin intermediul formularului
accept- charset
Specific seturile de caractere din datele
STF
charset
formularului pe care serverul le poate
manevra
enctype application/x- Specific cum trebuie codate datele din
STF
www-formformular nainte de a fi trimise la server
urlencoded
multipart/formdata
text/plain
method
get
Specific cum se trimit datele din formular STF
post
name
name
Specific numele formularului
TF
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup la care se adaug atributele:
onreset script Script executat cnd formularul este resetat
onsubmit script Script executat cnd formularul este trimis (submit)
124
Tagul <frame>
Tagul definete 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 dorii s validai o pagin care conine cadre, fii siguri c
doctype este setat pe "Frameset DTD".
Important: Nu putei folosi elementul body mpreun cu un element
frameset. Totui, dac adugai tagul <noframes> pentru browserele care
nu recunosc cadrele, va trebui s includei textul n elementul body.
Atribute opionale
Atribut
Valoare
Descriere
DTD
frameborder 0
Specific dac se afieaz sau nu un
F
1
chenar n jurul cadrului
longdesc
URL
Specific o pagin care conine descrierea F
extins a coninutului cadrului
marginheight pixels
Specific marginile de sus i de jos ale
F
cadrului
marginwidth pixels
Specific marginile din dreapta i din
F
stnga ale cadrului
name
name
Specific numele cadrului
F
noresize
noresize
Specific faptul c nu se poate
F
redimensiona cadrul
scrolling
yes
Specific dac se afieaz sau nu bare de F
no
derulare n cadru
auto
src
URL
Specific URL-ul documentului afiat n F
cadru
Tagul nu accept atribute de evenimente.
Tagul <frameset>
Elementul frameset pstreaz dou sau mai multe cadre (elemente frame).
Fiecare cadru pstreaz un document separat. Elementul frameset arat
doar cte linii sau cte coloane for fi n frameset.
Atribute opionale
Atribut
Valoare
Descriere
DTD
cols
pixels
Specific numrul i dimensiunea coloanelor F
%
din frameset
125
*
pixels
Specific numrul i dimensiunea liniilor
%
din frameset
*
Atribute pentru evenimente: onload, onunload
rows
Tagul <head>
Acest element este un container pentru toate elementele care se plaseaz aici:
scripturi, informaii despre foile de stil, meta informaii etc.
n seciunea head pot fi adugate urmtoarele taguri: <base>, <link>,
<meta>, <script>, <style> i <title>.
Tagul <title> definete titlul documentului i este singurul obligatoriu din
aceast seciune.
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute eveniment.
Tagurile <h1> ...<h6>

Aceste taguri definesc titlurile HTML.
Tagul <h1> definete cel mai mare titlu i <h6> definete cel mai mic titlu.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <hr>
Tagul creeaz o linie orizontal ntr-o pagin web care poate fi folosit pentru a
separa coninutul.
Dei n HTML <hr> nu are tag de nchidere, n XHTML tagul se nchide
astfel: <hr />.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <html>
Tagul spune browserului c acesta este un document HTML. Este cel mai
exterior tag n HTML i XHTML i se mai numete element rdcin.
Elementul doctype trebuie plasat n document naintea elementului html.
126

Tagul <iframe>
Tagul definete un cadru inline care conine un alt document.
Obs: Pentru browserele care nu recunosc acest tag, plasai textul dorit ntre
tagurile <iframe> i </iframe>.
Atribute opionale
Atribut
Valoare Descriere
DTD
frameborder 1
Specific dac se afieaz un chenar sau nu n TF
0
jurul elementului
height
pixels Specific nlimea elementului
TF
%
longdesc
URL
Specific o pagin care conine o descriere
TF
extins a coninutului cadrului
marginheight pixels Specific marginile de sus i de jos ale
TF
cadrului
marginwidth pixels Specific marginile din stnga i din dreapta TF
cadrului
name
name Specific numele cadrului
TF
scrolling
yes
Specific dac se afieaz sau nu bare de
TF
no
derulare n cadru
auto
src
URL
Specific URL-ul documentului ce trebuie
TF
afiat n cadru
width
pixels Specific limea cadrului
TF
%
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 afieze un text alternativ dac imaginea
nu poate fi ncrcat, nu un text afiat cnd mouse-ul trece peste imagine.
Pentru a afia un text cnd mouse-ul trece peste o imagine sau peste o imagine
mapat, utilizai atributul title, ca n exemplul urmtor:
127
<img src="smiley.gif" alt="Smiley face"

title="Smiley face" />
Obs: Cnd o pagin web este ncrcat n browser, acesta ia imaginea de pe un
server web i o insereaz n pagin. De aceea, asigurai-v c imaginea se
gsete n acelai loc relativ la pagina web, altfel utilizatorii vor primi un
simbol de link rupt. Acest simbol este afiat atunci cnd browserul nu gsete o
imagine.
Atribut
Valoare Descriere
DTD
alt
text
Specific un text alternativ pentru imagine
STF
src
URL
Specific URL-ul imaginii
STF
Atribute opionale
Atribut
Valoare Descriere
DTD
height
pixels
Specific nlimea unei imagini
STF
%
longdesc URL
Specific URL-ul unui document care conine o STF
descriere extins a imaginii
usemap
#mapname Specific o imagine ca imagine mapat pentru
STF
client
width
pixels
Specific limea unei imagini
STF
%
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup, onabort(script executat cnd
ncrcarea imaginii este ntrerupt)
Tagul <input>
Tagul este utilizat pentru a selecta informaia introdus de utilizator.
Un cmp de intrare (input) poate fi un cmp de text, o csu de validare, un
cmp 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, utilizai tagul <label>.
Atribute opionale
Atribut
Valoare Descriere
DTD
accept
MIME_type Specific tipul fiierelor care pot fi submise
STF
(numai pentru type="file")
alt
text
Specific un text alternativ pentru o imagine
STF
(numai pentru type="image")
checked checked
Specific c elementul de intrare trebuie s fie STF
128
disabled disabled
maxlength number
name
name
readonly readonly
size
src
number
URL
type
preselectat cnd pagina se ncarc (pentru

type="checkbox" sau type="radio")
Specific c elementul de intrare trebuie
dezactivat cnd pagina se ncarc
Specific lungimea maxim (n caractere) a
unui cmp de intrare (pentru type="text" sau
type="password")
Specific un nume pentru un element de intrare
Specific c un cmp de intrare este read-only
(pentru type="text" sau type="password")
Specific limea unui cmp de intrare
Specific URL-ul unei imagini afiat ca buton
de submitere
Specific tipul unui element de intrare
STF
STF
STF
STF
STF
STF
button
STF
checkbox
file
hidden
image
password
radio
reset
submit
text
value
value
Specific valoarea unui element de intrare
STF
Atribute standard: acceskey, class, dir, id, lang, style,
Atribute pentru evenimente: onblur, onchange (script executat cnd
elementul
se
modific),
onclick,
ondblclick,
onfocus,
onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup, onkeydown, onkeypress, onkeyup, onselect(script
executat cnd elementul este selectat)
Tagul <ins>
Tagul definete textul care a fost inserat ntr-un document.
Obs: Folosii-l mpreun cu tagul <del> pentru a descrie actualizrile i
modificrile fcute n document.
Atribute opionale
Atribut
Valoare
Descriere
DTD
cite
URL
Specific URL-ul unui document care
STF
explic de ce textul a fost
inserat/modificat
129
datetime YYYY-MMSpecific data i ora la care a fost

STF
DDThh:mm:ssTZD inserat/schimbat textul
xml:lang
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <label>
Definete eticheta unui element de intrare dintr-un formular.
Eticheta nu are un efect deosebit pentru utilizator, dar mbuntete
accesibilitatea utilizatorilor de mouse. Dac facei clic pe textul etichetei,
elementul respectiv este selectat.
Atribute opionale
Atribut
Valoare Descriere
DTD
for
element_id Specific crui element din formular i
STF
corespunde eticheta.
onfocus,
onmousedown,
onmousemove,
onmouseout,
Tagul <legend>
Tagul definete titlul unui element fieldset.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <li>
Tagul definete un item dintr-o list ordonat sau neordonat.
Obs: Utilizai CSS pentru a defini tipul listei i a elementelor din list.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
130
Tagul <link>
Tagul definete relaia dintre document i o resurs extern.
Este frecvent utilizat pentru a lega foile de stil la document.
Dei n HTML <link> nu are tag de nchidere, n XHTML el trebuie nchis
corect.
Obs: Elementul link trebuie inclus n seciunea head, i poate s apar de
mai multe ori.
Atribute opionale
Atribut
Valoare
Descriere
DTD
charset char_encoding Specific tipul de codare a caracterelor pentru STF
documentul referit
href
URL
Specific locaia documentului referit
STF
hreflang language_code Specific limba textului din documentul
STF
referit
media
screen
Specific pe ce dispozitiv va fi afiat
STF
tty
documentul referit
tv
projection
handheld
print
braille
aural
all
rel
alternate
Specific relaia dintre documentul curent i STF
appendix
documentul referit
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
rev
alternate
Specific relaia dintre documentul referit i STF
appendix
documentul curent
bookmark
131
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
target _blank
Specific unde se va ncrca documentul
TF
_self
referit
_top
_parent
frame_name
type
MIME_type Specific tipul MIME al documentului referit STF
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <map>
Tagul definete 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 relaie ntre imagine i hart (map).
Elementul map conine un anumit numr de elemente area, care definesc
zonele din imaginea mapat ce pot fi activate cu mouse-ul.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <meta>
Metadata este informaia despre date..
132
Tagul <meta> furnizeaz metadatele despre documentul HTML. Metadata nu

va fi afiat 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.
Atribut
Valoare Descriere
DTD
content text
Specific coninutul meta-informaiei
STF
Tagul nu are atribute eveniment
Tagul <noframes>
Tagul este utilizat pentru browserele care nu recunosc cadrele.
Elementul noframes poate conine toate elementele care apar uzual n
elementul body al unei pagini HTML.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <noscript>
Tagul este utilizat pentru a furniza un coninut alternativ pentru utilizatorii care
au dezactivat scripturile n browser sau care au un browser care nu recunoate
scripturile client.
Elementul noscript poate conine toate elementele care apar uzual n
elementul body al unei pagini HTML.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <object>
Exemplu:
<object classid="clsid:F08DF954-8592-11D1-B16A00C0F0283628" 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" />
133
<param name="Max" value="10" />

</object>
Tagul este utilizat pentru a include obiecte ca imaginile, fiiere audio, video,
apleturi Java, ActiveX, PDF i Flash.
Elementul object a fost introdus pentru a nlocui elementele img i
applet. Din pcate, acceptarea elementului object n browsere depinde de
tipul obiectului i browserele importante folosesc coduri diferite pentru a
ncrca un obiect de acelai tip. Din fericire, elementul object ofer o soluie:
dac elementul nu este afiat, codul dintre tagurile <object> i </object>
va fi executat. n acest fel, pot fi mai multe elemente object imbricate (cte
unul pentru fiecare browser).
Obs: Tagul <param> definete setrile pentru execuia (run-time) obiectului.
Important: Nu folosii tagul <object> pentru imagini, ci tagul <img>!
xml:lang
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <ol>
Tagul este utilizat pentru a crea o list ordonat.
Obs: Utilizai CSS pentru a defini tipul listei..
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <optgroup>
Exemplu:
<html>
<body>
<select>
<optgroup label="Masini suedeze">
</optgroup>
<optgroup label="Masini germane">
<option value="mercedes">Mercedes</option>
</optgroup>
134
</select>
</body>
</html>
Tagul este utilizat pentru a grupa opiunile nrudite dintr-o list de
selecie.
Dac avei o list de opiuni lung, gruparea opiunilor nrudite uureaz
utilizarea ei.
Atribut
Valoare Descriere
DTD
label
text
Specific o descriere pentru grupul de opiuni
STF
Atribute opionale
Atribut
Valoare Descriere
DTD
disabled disabled Specific c un grup de opiuni este dezactivat STF
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <option>
Tagul definete o opiune dintr-o list de selecie. Elementul option se scrie
n interiorul elementului select.
n HTML <option> nu are tag de nchidere, dar n XTML tagul trebuie
nchis corect.
Atribute opionale
Atribut
Valoare Descriere
DTD
disabled disabled Specific o opiune dezactivat
STF
label
text
Specific o etichet scurt pentru o opiune
STF
selected selected Specific c opiunea este implicit selectat
STF
value
text
Specific valoarea care se trimite serverului cnd STF
formularul este submis.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <p>
Tagul definete un paragraf. Elementul creeaz n mod automat un spaiu
nainte i dup paragraf. Spaiul este aplicat automat de browser sau l putei
specifica ntr-o foaie de stil
135

onmousemove,
onmouseout,
onmouseover,
onmouseup,
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.
Atribut
Valoare Descriere
DTD
name
name
Definete numele parametrului (pentru a fi
STF
utilizat n script)
Atribute opionale
Atribut
Valoare Descriere
DTD
type
MIME_type Specific tipul MIME al parametrului
STF
value
value
Specific valoarea parametrului
STF
valuetype data
Specific tipul valorii
STF
ref
object
Tagul suport numai atributul standard id i nici-un atribut pentru evenimente.
Tagul <pre>
Tagul definete un text pre-formatat.
Textul din elementul pre este afiat cu un font cu pas fix (uzual Courier), i
pstreaz spaiile i ntreruperile de linie.
Obs: Utilizai elementul pre pentru a afia coduri de calculator (cum ar fi
secvene de programe).
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <q>
Tagul definete un citat scurt.
Browserul va afia citatul ntre ghilimele..
Atribute opionale
Atribut
Valoare Descriere
cite
URL
Specific sursa citatului
136
DTD
STF

onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <script>
Tagul este utilizat pentru a defini un script client, cum ar JavaScript.
Elementul script fie conine instruciunile scriptului, fie adreseaz un script
dintr-un fiier extern cu atributul src.
Atributul obligatoriu type specific tipul MIME al scriptului.
n general, JavaScript se folosete pentru gestionarea imaginilor, validarea
formularelor i schimbri dinamice ale coninutului.
Atribute opionale
Atribut
Valoare Descriere
DTD
charset charset
Specific tipul de codare utilizat n fiierul extern STF
de script
defer
defer
Specific c execuia scriptului va fi amnat
STF
pn cnd pagina este ncrcat
src
URL
Specific URL-ul fiierului script extern
STF
xml:space preserve Specific care spaii albe din cod trebuie pstrate
Tagul nu suport atribute standard sau pentru evenimente.
Tagul <select>
Tagul este utilizat pentru a crea o list de selecie (o list drop-down).
Tagul <option> din elementul select definete opiunile disponibile din
list.
Obs: Elementul select este un control pentru formulare i poate fi utilizat
ntr-un formular pentru a colecta informaiile furnizate de utilizator.
Atribute opionale
Atribut
Valoare Descriere
DTD
disabled disabled Specific dac lista drop-down este dezactivat STF
multiple multiple Specific c pot fi selectate opiuni multiple
STF
name
name
Specific numele listei
STF
size
number
Specific numrul de opiuni vizibile n list
STF
xml:lang
Atribute pentru evenimente: onblur, onchange, onclick,
ondblclick, onfocus, onmousedown, onmousemove, onmouseout,
137
Tagul <span>
Exemplu:
<html>
<head>
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 poriuni de text sau de document n vederea
formatrii cu ajutorul stilurilor sau n vederea manipulrii coninutului cu
JavaScript.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <style>
Tagul definete informaii de stil pentru un document HTML.
Elementul style specific cum vor arta elementele HTML n browser.
Atributul obligatoriu type definete coninutul elementului style. Singura
valoare posibil este "text/css".
Elementul style se scrie ntotdeauna n seciunea head.
Tip: Pentru a utiliza o foaie extern de stiluri, utilizai tagul <link>.
Atribute opionale
Atribut
Valoare Descriere
DTD
media
screen
Specific stiluri pentru diferite tipuri de media STF
tty
tv
projection
handheld
print
braille
138
aural
all
Atribute standard: dir, lang, title, xml:lang
Tagurile <sub> i <sup>

Tagul <sub> definete textul subscript care apare ca jumtate de caracter sub
linia de baz a textului (util pentru formule chimice).
Tagul <sup> definete textul superscript care apare ca jumtate de caracter
deasupra liniei textului (util pentru note de subsol).
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <table>
Tagul definete un tabel HTML.
Un tabel HTML simplu const n elementul table i unul sau mai multe
elemente tr, th, i td.
Elementul tr definete o linie din tabel, elementul th definete un cap de tabel
i elementul td definete o celul din tabel.
Tabelele mai complexe pot include elementele caption, col, colgroup,
thead, tfoot i tbody.
Atribute opionale
Atribut
Valoare Descriere
DTD
border
pixels
Specific limea chenarului din jurul tabelului STF
cellpadding pixels
Specific spaiul dintre chenarul celulei i
STF
coninutul celulei
cellspacing pixels
Specific spaiul dintre celule
STF
frame
void
Specific care parte a chenarului exterior va fi STF
above
vizibil
below
hsides
lhs
rhs
vsides
box
border
rules
none
Specific care parte a chenarului interior va fi STF
groups vizibil
rows
139
cols
all
summary
text
Specific un sumar pentru coninutul tabelului STF
width
pixels
Specific limea unui tabel
STF
%
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagurile <tbody>, <head>
<tfoot>
Exemplu:
<html>
<head>
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>
140
<td>160RON</td>
</tr>
</tbody>
</table>
</body>
</html>
Tagul tbody este utilizat pentru a grupa coninutul din corpul unui tabel.
Elementul tbody trebuie utilizat mpreun cu elementele thead i tfoot.
Elementul thead este utilizat pentru a grupa coninutul din capul de tabel, iar
elementul tfoot este utilizat pentru a grupa coninutul din subsolul unui tabel
HTML.
Obs: Elementul <tfoot> trebuie s apar n descrierea tabelului naintea
elementului <tbody>, astfel nct browserul s poat reda subsolul nainte de
a primi toate liniile de date.
Atribute opionale
Atribut
Valoare Descriere
DTD
align
right
Aliniaz coninutul din elementul tbody
STF
left
center
justify
char
char
character Aliniaz coninutul din tbody la un caracter
STF
charoff number
Specific numrul de caractere cu care coninutul STF
elementului tbody va fi aliniat fa de caracterul
specificat cu atributul char
valign
top
Aliniaz vertical coninutul din elementul tbody STF
middle
bottom
baseline
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagurile <td> i <th>

Tagul <td> definete o celul standard dintr-un tabel HTML.
Tagul <th> definete o celul de titlu dintr-un tabel HTML.
Un tabel HTML are dou tipuri de celule:
Celule de titlu conin informaiile din capul tabelului (create cu
elementul th)
141
Celule standard conin date (create cu elementul td)

Textul dintr-o celul de titlu este ngroat i centrat.
Textul dintr-o celul standard este normal i aliniat la stnga.
Obs: Utilizai atribute colspan i rowspan pentru a lsa coninutul s se
ntind pe mai multe coloane sau linii.
Atribute opionale
Atribut Valoare
Descriere
DTD
abbr
text
Specific o versiune abreviat pentru
STF
coninutul unei celule
align left
Aliniaz coninutul unei celule
STF
right
center
justify
char
axis
category_name ncadreaz celula ntr-o categorie
STF
char
character
Aliniaz coninutul celulei la un caracter
STF
charoff number
Specific numrul de caractere cu care
STF
coninutul celulei va fi aliniat fa de caracterul
specificat cu atributul char
colspan number
Specific numrul de coloane pe care se ntinde STF
o celul
headers headercells'_id Specific titlurile din tabel relaionate cu o
STF
celul
rowspan number
Specific numrul de linii pe care se ntinde o STF
celul
scope col
Definete un mod de asociere ntre celule de STF
colgroup
titlu i celulele de date
row
rowgroup
valign top
Aliniaz vertical coninutul unei celule
STF
middle
bottom
baseline
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <textarea>
Tagul definete o zon de text multi-linie pentru informaia introdus de
utilizator.
142
O zon de text poate pstra un numr nelimitat de caractere i textul este afiat
cu un font cu pas fix (uzual Courier).
Mrimea elementului textarea poate fi specificat cu atributele cols i
rows, sau cu proprietile CSS height i width.
Atribut
Valoare
cols
number
rows
number
Atribute opionale
Atribut
Valoare
disabled disabled
Descriere
Specific limea vizibil a elementului
Specific numrul vizibil de linii din element
DTD
STF
STF
Descriere
DTD
Specific c elementul textarea este
STF
dezactivat
name
name_of_textarea Specific numele elementului
STF
readonly readonly
Specific c elementul este read-only
STF
Atribute pentru evenimente: onblur, onchange, onclick,
ondblclick, onfocus, onmousedown, onmousemove, onmouseout,
Tagul <title>
Tagul definete titlul unui document.
Elementul title este obligatoriu n documentele HTML/XHTML.
Elementul title:
Definete un titlu n bara de instrumente (toolbar-ul) browserului
Furnizeaz un titlu pentru pagin cnd este adugat n favorite
Afieaz un titlu pentru pagin n rezultatele furnizate de motoarele de
cutare
Tagul <tr>
Tagul definete o linie ntr-un tabel HTML.
Un element tr conine unul sau mai multe elemente th sau td.
Atribute opionale
Atribut
Valoare Descriere
align
right
Aliniaz coninutul liniei
left
center
143
DTD
STF
justify
char
char
character Aliniaz coninutul liniei la un caracter
STF
charoff number
Stabilete numrul de caractere cu care va fi
STF
aliniat coninutul liniei fa de caracterul precizat
cu atributul char
valign
top
Aliniaz vertical coninutul liniei
STF
middle
bottom
baseline
onmousemove,
onmouseout,
onmouseover,
onmouseup,
Tagul <ul>
Tagul definete o list neordonat.
Obs: Utilizai CSS pentru a defini tipul unei liste.
onmousemove,
onmouseout,
onmouseover,
onmouseup,
144
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 Huanu Crearea i programarea paginilor WEB, Editura
L&S Soft, 2006
http://www.ecursuri.ro
http://www.w3schools.com
http://www.tutorialehtml.com
145

Curs HTML A5

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML A5

Încărcat de

Drepturi de autor:

Formate disponibile

CUPRINS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Documentele HTML = Pagini Web

<h1>Primul meu titlu</h1>

Editarea documentelor HTML

3. Patru exemple simple

Sintaxa unui element HTML

Un element HTML ncepe cu un tag de deschidere/nceput

Elemente HTML imbricate (nested)

Elementul are tagul de nceput <p> i tagul de sfrit </p>.

Elemente HTML vide

Elementele HTML pot avea atribute

Atributele furnizeaz informaii suplimentare despre un element

Lista atributelor HTML

Cum vedei codul HTML surs al unei pagini web

<p>Cele mai multe browsere vor afisa textul sters ca

Taguri i atribute depite

Acesta este un paragraf stilizat cu atributul

Hiperlinkuri, ancore i linkuri

<a name="tips">Sectiunea de Sfaturi Utile</a>

pentru <b>a fi siguri</b> ca browserul va afisa

Pentru a afia o imagine pe o pagin trebuie s folosii atributul src care

Taguri pentru imagini

<td>linia 1, celula 1</td>

Taguri pentru tabele

<h4>Cu un chenar gros:</h4>

<p>Caracterul non-breaking space incepe cu un

<h4>O celula care se intinde pe doua coloane:</h4>

<h4>Tabel cu atributul frame="void":</h4>

<h4>Itemi marcati cu cercuri pline (implicit):</h4>

Cmpuri de text (text fields)

Atributul action i butonul submit