Pdfslide - Tips - Curs HTML A5

5/26/2018 CursHTMLa5-slidepdf.
com
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
7
http://slidepdf.com/reader/full/curs-html-a5 1/139
5/26/2018 CursHTMLa5-slidepdf.com
Elemente HTML vide.................................................................................21
5. ATRIBUTE HTML......................................................... 21
Atributele HTML ....................................................................................... 21

Exemple de atribute....................................................................................22
Lista atributelor HTML.............................................................................22
6. TITLURI HTML ............................................................. 22
Liniile HTML ............................................................................................. 23

Comentarii HTML ..................................................................................... 23
Cum vedeţi codul HTML sursă al unei pagini web....................................24
7. PARAGRAFE ............................................................... 24
8. FORMATAREA TEXTULUI.......................................... 24

Taguri pentru formatarea textului............................................................. 24
Exemple ...................................................................................................... 25
9. STILURI........................................................................ 29
Taguri şi atribute depăşite..........................................................................30
Exemple ...................................................................................................... 30
10. LINKURI ..................................................................... 31

Hiperlinkuri, ancore şi linkuri ................................................................... 31
Atributul href ...........................................................................................32
8
Atributul target ...................................................................................... 32
Atributul name........................................................................................... 32
Exemple...................................................................................................... 33
11. IMAGINI.......................................................................36
Tagul imagine şi atributul src .................................................................. 36
Atributul Alt ............................................................................................. 37
Taguri pentru imagini................................................................................ 37
Exemple...................................................................................................... 37
12. TABELE ......................................................................41

Atributul border ...................................................................................... 42
Denumirea coloanelor ................................................................................ 42
Celule goale ................................................................................................ 42
Taguri pentru tabele .................................................................................. 43
Exemple...................................................................................................... 43
13. LISTE...........................................................................57
Liste neordonate......................................................................................... 57
Liste ordonate............................................................................................. 57
Liste de definiţii.......................................................................................... 58
Exemple...................................................................................................... 58
14. FORMULARE..............................................................62
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. ENTITĂŢILE DE TIP CARACTER...............................87
Non-breaking Space ................................................................................... 87

Simboluri uzuale ........................................................................................ 87
22. ELEMENTUL HEAD .....................................................88

................................................................ 88
Informaţiile din elementul head
Taguri permise în elementul head ............................................................ 89

Exemple...................................................................................................... 89
23. ELEMENTUL META .....................................................90
Cuvinte cheie pentru motoarele de căutare ............................................... 90
Exemple...................................................................................................... 91
24. URL .............................................................................92

Linkuri HTML........................................................................................... 92
URL - Uniform Resource Locator ............................................................. 93
Scheme URL............................................................................................... 93

25. SCRIPTURI .................................................................94
Inserarea unui script într-o pagină HTML ............................................... 94
Cum procedaţi cu browserele vechi........................................................... 94
Tagul <noscript> ................................................................................... 95
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 instalaţi IIS în Windows Vista........................................................... 98
Cum instalaţi IIS în Windows XP şi Windows 2000 .................................. 98
Testaţi paginile web....................................................................................99
II. XHTML.......................................................................... 99
1. CE ESTE XHTML? ....................................................... 99
2. DE CE XHTML?............................................................ 99
3. DIFERENŢE ÎNTRE XHTML ŞI HTML ....................... 100
Cele mai importante diferenţe.................................................................. 100
4. SINTAXA XHTML....................................................... 102

Reguli suplimentare privind sintaxa XHTML......................................... 102
12
Atributul lang......................................................................................... 103
Elemente XHTML obligatorii.................................................................. 103
5. DTD (DOCUMENT TYPE DEFINITIONS) XHTML......104

este obligatorie................................................ 104
Declaraţia <!DOCTYPE>
Un exemplu XHTML ............................................................................... 105
Document Type Definitions (DTD) .......................................................... 105
6. MODULARIZAREA XHTML........................................106
Modulele XHTML.................................................................................... 106
III. LISTA TAGURILOR HTML 4.01 / XHTML 1.0 ..........107

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

Tagul <a> ................................................................................................. 112
Tagul <abbr> .......................................................................................... 114
Tagul <acronym> .................................................................................. 114
Tagul <address> ................................................................................... 115
Tagul <area> .......................................................................................... 115
Tagurile <tt> <i> <b> <big> <small> ........................................ 116
Tagul <base> .......................................................................................... 116
Tagul <bdo> ........................................................................................... 116
Tagul <blockquote> ........................................................................... 116
13
Tagul <body> .......................................................................................... 117
Tagul <br> ............................................................................................... 117
...................................................................................... 118
Tagul <button>
.................................................................................... 118
Tagul <caption>
Tagurile <em>
<strong>
<dfn>
<code> <samp> <kbd> <var>
<cite> ..................................................................................................... 118
............................................................................................ 119
Tagul <col>
Tagul <colgroup> ................................................................................. 120
Tagul <dd> ............................................................................................... 121
............................................................................................. 121
Tagul <del>
............................................................................................. 122
Tagul <div>
Tagul <dl> ............................................................................................... 122
Tagul <dt> ............................................................................................... 123
Tagul <fieldset> ................................................................................. 123
Tagul <form> .......................................................................................... 123
Tagul <frame> ........................................................................................ 125
Tagul <frameset> ................................................................................. 125
Tagul <head> .......................................................................................... 126
Tagurile <h1> .......................................................................... 126

...<h6>
Tagul <hr> ............................................................................................... 126
Tagul <html> .......................................................................................... 126
14
Tagul <iframe> ..................................................................................... 127
Tagul <img> ............................................................................................ 127
........................................................................................ 128
Tagul <input>
Tagul <ins> ............................................................................................ 129
........................................................................................ 130
Tagul <label>
Tagul <legend> ..................................................................................... 130
............................................................................................... 130
Tagul <li>
Tagul <link> .......................................................................................... 131
Tagul <map> ............................................................................................ 132
Tagul <meta> .......................................................................................... 132
Tagul <noframes> ................................................................................. 133
Tagul <noscript> ................................................................................. 133
Tagul <object> ..................................................................................... 133
............................................................................................... 134
Tagul <ol>
Tagul <optgroup> ................................................................................. 134
Tagul <option> ..................................................................................... 135
Tagul <p> ................................................................................................. 135
........................................................................................ 136
Tagul <param>
Tagul <pre> ............................................................................................ 136
Tagul <q> ................................................................................................. 136
Tagul <script> ..................................................................................... 137
15
...................................................................................... 137
Tagul <select>
Tagul <span> .......................................................................................... 138
Tagul <style> ........................................................................................ 138
şi <sup> ........................................................................ 139
Tagurile <sub>
Tagul <table> ........................................................................................ 139
, <head> şi <tfoot> ............................................. 140

Tagurile <tbody>
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 ascuţite, de
exemplu <html>
 În mod normal tagurile HTML sunt pereche ca <b> şi </b>
 Primul tag din pereche este tagul de început, al doilea de sfârşit
Documentele HTML = Pagini Web

Documentele HTML descriu paginile web

 Documentele HTML conţin taguri HTML şi text simplu

Documentele HTML sunt numite şi pagini web

Scopul unui browser web (ca Internet Explorer sau Firefox) este să citească
documentele HTML şi să le afişeze ca pagini web. Browser-ul nu afişează
tagurile HTML, dar le utilizează ca să interpreteze conţinutul paginii.
Exemplu:
<html>
<body>
17
<h1>Primul meu titlu</h1>

<p>Primul meu paragraf</p>
</body>
</html>
Explicaţii:
Textul dintre <html> şi </html>
 descrie pagina web
Textul dintre <body>
 şi </body> este conţinutul vizibil al paginii
Textul dintre <h1>
 şi </h1> este afişat ca un titlu
Textul dintre <p> şi </p>
 este afişat ca un paragraf
2. HTML – Să începem
Ce vă trebuie
Nu vă trebuie nimic deosebit ca să învăţaţi HTML.
Nu aveţi nevoie de un editor HTML

Nu aveţi nevoie de un server web


Nu aveţi nevoie de un site web


Editarea documentelor HTML

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

Titluri
Titlurile HTML sunt definite cu tagurile pereche <h1>...... <h6>
.
Exemplu:
<html>
<body>
<h1>Acesta este titlul 1</h1>

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
Un HTML
element HTML este tot ce este scris între un tag de început şi un tag de
sfârşit.:
Tag de început Conţinutul elementului Tag de sfârşit
Acesta este un
<p> paragraf </p>
<a
href="default.htm" Acesta este un link </a>
>
<br />
Sintaxa unui element HTML

 Un element HTML începe cu un tag de deschidere/început

 Un element HTML se încheie cu tag de închidere/sfârşit

 Conţinutul unui element este tot ce este scris între cele două taguri

 Unele elemente HTML au conţinutul vid

 Elementele vide sunt închise în tagul de început

Majoritatea elementelor HTML pot avea atribute
Elemente HTML imbricate (nested)
Majoritatea elementelor HTML pot fi imbricate (pot conţine alte elemente
HTML).
Documentele HTML sunt de fapt elemente HTML imbricate.
Exemplu de document HTML
<html>
<body>
<p>Acesta este primul meu paragraf</p>
</body>
</html>
Acest exemplu conţine 3 elemente HTML:
Elementul <p>:
Elementul <p>
defineşte un paragraf într-un document HTML.
20
Elementul are tagul de început <p> şi tagul de sfârşit </p>.

Conţinutul elementului este: Acesta este primul meu paragraf
Elementul <body>
:
<body>
<p> Acesta este primul meu paragraf </p>
</body>
Elementul <body> defineşte corpul unui document HTML.
Elementul are tagul de început <body> şi tagul de sfârşit </body>.
Acest element conţine un alt element HTML (un paragraf – elementul p)
Elementul <html>
:
<html>
<body>
</body>
</html>
Elementul <html> defineşte întregul document HTML.
Elementul are tagul de început <html> şi tagul de sfârşit </html>.
Elementul conţine un alt element HTML (corpul documentului – elementul
body)
Elemente HTML vide

Elementele HTML care nu au conţinut se numesc elemente vide. Elementele
vide pot fi închise în tagul de început. Spre exemplu <br> este un element vid
fără tag de sfârşit (defineşte o întrerupere de linie). În XHTML, XML şi
viitoarele versiuni de HTML, toate elementele trebuie închise.
Adăugarea unui slash în tagul de început, ca <br /> , este un mod potrivit de
închidere
Obs: HTML a elementelor vide, acceptat
nu este case-sesitive, dardevăHTML, XHTML
recomandăm să şiscrieţi
XML.cu litere mici
pentru compatibilitate cu noile versiuni HTML.
5. Atribute HTML
Atributele furnizează informaţii suplimentare despre elementele HTM.
Atributele HTML
Elementele
 HTML pot avea atribute
21

 Atributele furnizează informaţii suplimentare despre un element

 Atributele sunt specificate numai în tagul de început

 Atributele vin în perechi nume/valoare ca: name="value"
Exemple de atribute
Linkurile HTML sunt definite cu tagul <a>
. Adresa de link precizată este un
atribut.
Exemplu:
<html>
<body>
<a href="http://www.yahoo.com">Acesta este un

link</a>
</body>
</html>
Obs. Valorile atributelor trebuie întotdeauna puse între ghilimele
În rarele situaţii în care valoarea atributului conţine ea însăşi ghilimele, este
necesar să scrieţi valoarea atributului între apostrofuri ca în exemplul următor:
name='John "ShotGun" Nelson'
Lista atributelor HTML
Următoarea listă prezintă atributele standard pentru majoritatea elementelor
HTML:
Atribut Valoare Descriere
class class_rule sau style_rule Clasa elementului
id id_name Un id unic pentru element
style style_definition O definiţie de stil inline
title tooltip_text Un text afişat când cursorul este
fixat pe element
6. Titluri HTML
Titlurile sunt definite cu tagurile <h1> ..... <h6> .
<h1> defineşte cel mai mare titlu. <h6>
defineşte cel mai mic titlu.
Exemplu:
<html>
<body>
<h1>Acesta este un titlu 1</h1>

22

</body>
</html>
Obs: Browserele adaugă automat o linie vidă înainte şi după un titlu.
Titlurile sunt importante

Utilizaţi titlurile HTML numai pentru scrierea titlurilor. Nu le utilizaţi pentru a
face textul BIG sau bold. Motoarele de căutare folosesc titlurile pentru a
indexa structura şi conţinutul paginilor web.
Este important să utilizaţi titlurile pentru a pune în evidenţă structura
documentului HTML.
Titlurile h1 ar trebui folosite ca titluri principale, urmate de titlurile h2 şamd.
Liniile HTML
Tagul <hr/>
este utilizat pentru a crea o linie orizontală.
Exemplu:
<html>
<body>
<p>Tagul hr defineste o linie orizontala:</p>

<hr/>
<p>Acesta este un paragraf</p>
<hr/>
<hr/>
</body>
</html>
Comentarii HTML
Comentariile pot fi inserate în codul HTML pentru a-l face mai uşor de citit şi
înţeles. Comentariile sunt ignorate de către browsere şi nu sunt afişate.
Comentariile se scriu astfel:

23
Cum vedeţi codul HTML sursă al unei pagini web

Faceţi clic dreapta pe pagină şi selectaţi "View Source" (IE) sau "View Page
Source" (Firefox) sau similar pentru alte browsere. Se va deschide o fereastră
cu codul HTML al paginii.
7. Paragrafe
Documentele HTML sunt împărţite în paragrafe. Paragrafele sunt definite cu
tagul <p> .
Obs: Browserele adaugă automat o linie vidă înainte şi după un paragraf. Nu
uitaţi tagul de închidere.
Exemplu:
<html>
<body>
<p>Acesta este primul paragraf.</p>
<p>Acesta al doilea paragraf.</p>
<p>Acesta este al treilea paragraf.</p>
<p>Nu uitati sa inchideti tagurile HTML!</p>
</body>

</html>
Obs: Noile versiuni HTML nu vor permite omiterea tagurilor de încheiere.
Obs. Utilizaţi tagul <br/>
dacă doriţi o linie nouă fără să începeţi un nou
paragraf.
Exemplu:
<p>Acesta este<br />un para<br />graf cu intrerupere
de linie.</p>
Obs: Nu contează câte linii şi câte spaţii inseraţi în documentele HTML.
Browserele vor vedea un singur spaţiu şi o singură linie (dacă nu utilizaţi tagul
<br/> ).
8. Formatarea textului
Taguri pentru formatarea textului
Tag Descriere
<b> Text îngroşat
<big> Text mare
<em> Text accentuat
<i> Text înclinat (italic)
24
<small> Text mic

<strong> Text îngroşat
<sub> Textul subscript (indice)
<sup> Text superscript (exponent)
<ins> Text inserat
<del> Text şters
<pre> Text preformatat
<code> Text tip cod de calculator
<kbd> Text de la tastatură
<abbr> Abreviere
<acronym> Acronim
<blockquote> Adresă
<address> Citat lung
<q> Citat scurt
<cite> Citat
<dfn> Definiţie
Exemple
Exemplul 1 puteţi formata textul într-un document HTML.

Ilustrează cum
<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 texttext
<p><small>Acest esteeste
italic</i></p>
small</small></p>
<p>Acesta este<sub> subscript</sub> si
<sup>superscript</sup></p>
</body>
</html>
Exemplul 2
Ilustrează cum puteţi controla întreruperile de linie şi spaţiul cu tagul <pre>
<html> .
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
next print
i 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 se scrie o adresă într-un document HTML.

Ilustrează cum
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
pozitionat pe sau abrevierii cand mouse-ul este
element.
</p>
</body>
</html>
Exemplul 6
Ilustrează cum poate fi schimbată direcţia unui text.
<html>
<body>
<p>
Daca browserul suporta tagul bdo,urmatoarea
linie de text va fi
scrisa de la dreapta la stanga( atributul rtl):
</p>
<bdo dir="rtl">Un text ebraic</bdo>
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ă
document. cum se marchează un text care a fost şters sau inserat într-un
<html>
<body>
<p>
O duzina are
<del>douazeci</del>
<ins>douasprezece</ins>
</p> elemente
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 adăugate elementelor
HTML fie direct, utilizând atributul style, fie indirect prin foi separate de stiluri
(fişiere CSS). În acest material vom folosi atributul style pentru a introduce
stilurile HTML..
Exemple de utilizare a atributului style

style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
29
style="text-align:center"
Taguri şi atribute depăşite

În HTML 4, anumite taguri şi atribute sunt definite ca depăşite. Asta înseamnă
că ele nu vor mai fi acceptate în următoarele versiuni HTML şi XHTML.
Mesajul este clar: nu mai folosiţi aceste taguri şi atribute.
Aceste taguri şi atribute nu mai trebuiesc folosite:
Taguri Descriere
<center> Element centrat
<font> şi <basefont> Fonturi HTML
<s> şi <strike> Text tăiat
<u> Text subliniat
Atribute
align Descriere
Alinierea textului
bgcolor Culoarea fundalului (background)
color Culoarea textului
În locul lor folosiţi stiluri.
Exemple
Culoare background:
Atributul style defineşte un stil pentru elementul <body>
.
<html>
<body style="background-color:yellow">
<h2>Acesta este un fundal colorat cu atributul

style</h2>
</body>
</html>
Familia de fonturi, culoare şi mărime:

Atributul style defineşte un stil pentru elementul <p>
.
<html>
<body>
<h1 style="font-family:verdana">Un titlu</h1>
<p style="font-family:courier new; color:red; font-

size:20px;">
30
Acesta este un paragraf stilizat cu atributul

style</p>
</body>
</html>
Alinierea textului:
Atributul style defineşte un stil pentru elementul <h1>
.
<html>
<body>
<h1 style="text-align:center">Acesta este titlu
1</h1>
<p>Titlul anterior este aliniat la centrul acestei

pagini cu atributul style. Titlul anterior este
aliniat la centrul acestei pagini cu atributul style.
Titlul anterior este aliniat la centrul acestei
pagini cu atributul style.
</p>
</body>
</html>
10. Linkuri
Un link este „adresa” unui document sau resurse de pe web.
Hiperlinkuri, ancore şi linkuri

În termeni web, un hiperlink este o referinţă (o adresă) a unei resurse de pe
web. Un hiperlink poate referi orice resursă de pe web: o pagină HML, o
imagine, un fişier de sunet, un film, etc.
O ancoră este o destinaţia unui hiperlink în interiorul unui document.
Elementul <a> este utilizat pentru a defini hiperlegăturile şi ancorele.
Folosim termenul link când elementul <a> indică o resursă web şi termenul
ancoră când elementul <a> defineşte o adresă din interiorul documentului.
Sintaxa unui link HTML este:

<a href="url">Textul afisat</a>
Tagul de început conţine atribute despre link.
Elementul de conţinut defineşte textul ce va fi afişat.
31
Obs: Elementul conţinut nu trebuie să fie neapărat text. Puteţi folosi o imagine

sau orice alt element HTML.
Atributul href
Defineşte „adresa”
Elementul <a> legăturii.
următor defineşte o legătură către Gmail:
<a href="http://www.gmail.com/">Serviciul e-mail
Google!</a>
Codul de mai sus va fi afişat de browser astfel:
Serviciul e-mail Google!
Atributul target
Atributul defineşte unde se va deschide documentul referit de link.
Codul următor va deschide documentul într-o nouă fereastră:
<html>
<body>
<a href="lastpage.htm" target="_blank">Ultima

Pagina</a>
<p>
Dacă atributul target este "_blank",documentul
referit va fi deschis intr-o noua fereastra.
</p>
</body>

</html>
Atributul name
Când este folosit atributul name, elementul <a>
defineşte o ancoră în interiorul
unui document
invizibile pentru HTML.
cititor. Ancorele nu sunt afişate într-un mod special, ele sunt
Sintaxa de definire a unei ancore este:
<a name="label">Orice continut</a>
Sintaxa legăturii către o ancoră este:

<a href="#label">Orice conţinut</a>
Simbolul # din atributul href defineşte o legătură către o ancoră.
Exemple:
O ancoră în interiorul unui document HTML:
32
<a name="tips">Sectiunea de Sfaturi Utile</a>
O legătură către Secţiunea de Sfaturi Utile din interiorul aceluiaşi document:

<a href="#tips">
Mergeti la Sectiunea de Sfaturi Utile</a>
O legătură către Sectiunea de Sfaturi Utile dintr-un alt document HTML:

<a href="http://www.MyPage.com/Tutorial#tips">
Mergeti la Sectiunea de Sfaturi Utile </a>
Ancorele sunt folosite frecvent pentru a crea "table of contents" (cuprins) la
începutul unui document mare. Fiecărui capitol din document îi este atribuită o
ancoră şi linkurile către aceste ancore sunt amplasate la începutul
documentului. Dacă browserul nu găseşte o anumită ancoră, merge la începutul
documentulu şi nu se generează nici-o eroare.

Exemple
Exemplul 1
Ilustrează cum putem folosi o imagine ca link.
<html>
<body>
<p>Crearea unei imagini drept link:

<a href="mypage.htm">
<img src="smiley.gif" alt="Tutoriale" width="32"
height="32" />
</a>
</p>
<p>Imaginea nu are bordura, dar este un link:
<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 sări în altă parte a
documentului.
<html>
<body>
<p><a href="#C4">Vezi Capitolul 4.</a></p>

<p><a href="#C10">Vezi Capitolul 10.</a></p>
<h2>Capitolul 1</h2>
<p>Acest capitol explica ............</p>
<h2><a name="C4">Capitolul 4</a></h2>
<h2><a name="C10">Capitolul 10</a></h2>

34
</body>
</html>
Exemplul 3
Ilustrează cum puteţi ieşi dacă pagina se blochează într-un cadru.
<html>
<body>
<p>Cadrul este blocat?</p>
<a href="http://www.yahoo.com/" target="_top">Apasati

aici!</a>
</body>
</html>
Exemplul 4
Ilustrează cum să faceţi link către utilitarul de e-mail (va funcţiona numai dacă
serviciul e-mail este instalat).
<html>
<body>
<p>
Acesta este un link către e-mail:
<a
href="mailto: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 5
Ilustrează crearea un link de e-mail mai complicat.
<html>
<body>
<p>
Acesta este un link către 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 conţine numai atribute şi nu are
tag de închidere.
36
Pentru a afişa o imagine pe o pagină trebuie să folosiţi atributul src care

reprezintă sursa imaginii. Valoarea atributului src este URL-ul imaginii pe
care doriţi să o afişaţi în pagină.
Sintaxa de definire a unei imagini este:
<img src="url" />
URL indică locul în care este stocată imaginea.
O imagine cu numele "boat.gif" localizată în directorul "images" pe situl
"www.msn.com" are URL-ul:
http://www.msn.com/images/boat.gif .
Browserul afişează imaginea în locul în care tagul de imagine apare în
document. Dacă puneţi tagul imagine între două paragrafe, browserul afişează
primul paragraf, apoi imaginea, apoi al doilea paragraf.
Atributul Alt
Atributul alt este folosit pentru a defini un text alternativ pentru imagine.
Valoarea atributului alt este un text definit de autor:
<img src="boat.gif" alt="O barca mare" />
Atributul alt informează cititorul ce lipseşte din pagină dacă browserul nu
poate încarca imaginea. Browserul va afişa în loc de imagine textul alternativ.
Este indicat să introduceţi atributul alt pentru orice imagine de pe pagină
pentru a îmbunătăţi afişarea paginii pentru cei care au browsere text-only. Dacă
pagina conţine multe imagini, durează mult pentru a fi încărcată aşa că folosiţi
cu atenţie imaginile.
Taguri pentru imagini

Tag Descriere
<img> Defineşte o imagine
<map> Defineşte o imagine mapată
<area> Defineşte o zonă de hiperlink în interiorul unei imagini mapate
Exemple
Exemplul 1
Ilustrează cum se inserează într-o pagină web imagini situate în acelaşi director.
<html>
<body>
<p>
O imagine statica:
<img src="constr4.gif" width="144" height="50" />
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 se adăugă o imagine de fundal (background) unei pagini HTML.

Ilustrează cum
<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>
implicita!</p> Alinierea bottom (la baza) este
<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 stânga 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>
<img
</p> src="hackanm.gif" width="70" height="70" />
<p>Puteti mari sau micsora o imagine modificand
atributele "height" si "width".</p>
</body>
</html>
Exemplul 7 se foloseşte o imagine drept link.

Ilustrează cum
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 împărţit în linii (cu tagul
<tr> ), şi fiecare linie este împărţită în celule de date (cu tagul <td> ). Notaţia
înseamnă
td
conţine "table liste,
text, imagini, data",paragrafe,
conţinutulformulare,
unei celule
linii din tabel. Oaltcelulă
orizontale, tabel , poate
etc.
41
Exemplu:
<table border="1">
<tr>
<td>linia 1, celula 1</td>
</tr>
<tr>
</tr>
</table>
Atributul border
Dacă atributul border nu este specificat, tabelul va fi afişat fără chenare
(borduri). Pentru a afişa un tabel cu chenare trebuie utilizat atributul border.
Denumirea coloanelor
Crearea unei celule de titlu se face cu tagul <th>
. Textul dintr-o celulă de titlu
este îngroşat şi centrat.
Exemplu:
<table border="1">
<tr>
<th>Un
<th>Alttitlu</th>
titlu</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Celule goale
Cele mai multe browsere nu afişează prea bine celulele din tabel care nu au
conţinut. Pentru a corecta acest lucru, adăugaţi un non-breaking space
( ) în celula vidă şi chenarul se va afişa corect.
Exemplu:
<table border="1">
<tr>
42

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

Tag Descriere
<table> Defineşte un tabel
<th> Defineşte o celulă de titlu
<tr>
<td> Defineşte
Defineşte oo linie
celulădin
detabel
date
<caption> Defineşte titlul unui tabel (table caption)
<colgroup> Defineşte un grup de coloane din tabel
<col> Defineşte valorile atributelor pentru una sau mai multe coloane
din tabel.
<thead> Defineşte capul tabelului
<tbody> Defineşte corpul tabelului
<tfoot> Defineşte subsolul tabelului
Exemple
Exemplul 1
Ilustrează cum se defineşte un tabel într-un document HTML.
<html>
<body>
<p>
Fiecare tabel incepe cu tagul <b>table</b>.
Fiecare linie incepe cu tagul <b>tr</b>.
Fiecare celula de date incepe cu tagul <b>td</b>.
</p>
<h4>Tabel cu o coloana:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
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
<tr> border="15">
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
</body>
</html>
Exemplul 3
Ilustrează cum se creează un tabel fără borduri.
<html>
<body>
<h4>Acest tabel nu are chenar pentru ca lipseste

atributul border</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
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 afişează titlurile coloanelor şi ale liniilor.
<html>
<body>
<h4>Titlurile coloanelor (table headers):</h4>

<table border="1">
<tr>
<th>Nume</th>
<th>Telefon</th>
<th>Telefon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Titlurile liniilor (vertical headers):</h4>

<table border="1">
<tr>
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 conţinut.
<html>
<body>
<table border="1">
<tr>
<td>Un text</td>
<td>Alt text</td>
</tr>
<tr>
<td></td>
<td>Alt text</td>
</tr>
</table>
<p>
O celula vida din tabel nu are bordura chiar daca
inserati in celula un spatiu.
</p>
<p>
Solutia este sa inserati in celula un caracter non-
breaking space.
</p>
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
<tablecelula care se intinde pe doua linii:</h4>
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>
Exemplulcum
Ilustrează 8 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 spaţiu
între conţinutul celulei şi chenarul ei.
<html>
<body>
<h4>Fara cellpadding:</h4>
<table border="1">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
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 creşte spaţiul dintre
celulele tabelului.
<html>
<body>
<h4>Tabel fara atributul cellspacing:</h4>

<table border="1">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>Tabel cu atributul cellspacing:</h4>

<table border="1"
cellspacing="10">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
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 conţinutul celulelor
tabelului.
<html>
<body>
<table width="400" border="1">

<tr>
<th align="left">Bani cheltuiti in....</th>
<th align="right">Ianuarie</th>
<th align="right">Februarie</th>
</tr>
<tr>
<td align="left">Haine</td>
<td align="right">241.10 RON</td>
</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
<tr> frame="above">
<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 definiţii..
Liste neordonate
O listă neordonată este o listă de itemi marcaţi cu simboluri (cercuri, pătrate,
puncte).
O listă neordonată începe cu tagul <ul> . Fiecare item din listă începe cu tagul
<li> .
Exemplu:
<ul>
<li>Cafea</li>
<li>Lapte</li>
</ul>
Browserul afişează lista de mai sus astfel:
Cafea

Lapte

Liste ordonate
O listă ordonată este o listă de itemi marcaţi cu numere sau litere.
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
O listă de definiţii
de definiţii este o listă de termeni împreună cu descrierea lor.
O listă de definiţii începe cu tagul <dl> (definition list).
Fiecare termen din listă începe cu tagul <dt> (definition term).
Fiecare descriere începe cu tagul <dd> (definition description).
Exemplu:
<dl>
<dt>Cafea</dt>
<dd>Bautura neagra fierbinte</dd>
<dt>Lapte</dt>
<dd>Bautura alba rece</dd>
</dl>
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 marcaţi cu cercuri goale:</h4>

<ul type="circle">
<li>Apa</li>
<li>Lapte</li>
<li>Ceai</li>
<li>Cafea</li>
</ul>
<h4>Itemi marcati cu patrate:</h4>

<ul type="square">
<li>Carti</li>
<li>Caiete</li>
<li>Creioane</li>
<li>Pixuri</li>
</ul>
</body>
</html>
Exemplul 3
Ilustrează cum pot fi create liste imbricate (nested lists).
<html>
<body>
<h4>O lista imbricata:</h4>

<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ul>
</li>
<li>Lapte</li>
</ul>
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 definiţii.
<html>
<body>
<h4>O lista de definitii:</h4>
<dl>
<dt>Cafea</dt>
<dd>Bautura fierbinte de culoare neagra</dd>
<dt>Lapte</dt>
<dd>Bautura rece de culoare alba</dd>
</dl>
</body>
61
</html>
14. Formulare
Formularele HTML sunt utilizate pentru a selecta diferitele tipuri de informaţii
introduse de utilizator.
Un formular este o zonă care conţine elemente de formular.
Elementele unui formular (câmpuri de text, meniuri drop-down, butoane radio,
căsuţe de validare, etc.) permit utilizatorului să introducă informaţii în
formular.
Un formular este definit cu tagul <form> conform sintaxei:
<form>
.
elemente de intrare
.
</form>
Tagul input
Cel mai utilizat tag de formulare este tagul <input> . Tipul intrării este
specificat prin atributul type. Cele mai folosite tipuri de input sunt prezentate
în continuare.
Câmpuri de text (text fields)

Câmpurile de text sunt folosite atunci când vrem ca utilizatorul să introducă în
formular litere, numere, etc.
Exemplu:
<form>
Nume:
<input type="text" name="nume" />
<br />
Prenume:
<input type="text" name="prenume" />
</form>
În browser formularul arată astfel:
Nume:
Prenume:
Observaţi că formularul propriu-zis nu este vizibil. În majoritatea browserelor,
lungimea unui câmp de text este implicit setată la 20 de caractere.
62
Butoane radio
Butoanele radio se folosesc când dorim ca utilizatorul să selecteze o singură
opţiune dintr-o listă posibilă.
Exemplu:
<form>
<input type="radio" name="sex"
value="barbat"/>Masculin
<br />
<input type="radio" name="sex"
value="femeie"/>Feminin
</form>
Masculin
Feminin
Observaţi că numai o opţiune poate fi selectată la un moment dat.
Căsuţe de validare
Căsuţele de validare se folosesc atunci când utilizatorul poate să selecteze una
sau mai multe opţiuni dintr-o listă posibilă.
Exemplu:
<form>
Am pisica:
<input type="checkbox" name="pet" value="Pisica" />
<br />
Am caine:
<input type="checkbox" name="pet" value="Caine" />
<br />
Am papagal:
<input type="checkbox" name="pet" value="Papagal" />
</form>
Am pisica:
Am caine:
Am papagal:
Atributul action şi butonul submit

63
Când utilizatorul apasă butonul "Submit", conţinutul formularului este trimis

către server. Atributul action al tagului form defineşte numele fişierului în
care se trimite conţinutul formularului. Informaţiile din acest fişier sunt uzual
prelucrate cu scripturi.
Exemplu:
<form name="input" action="html_form_submit.asp"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Submit
Username:
Dacă tastaţi nişte caractere în câmpul de text de mai sus şi apăsaţi butonul
"Submit", browserul va trimite informaţia tastată unei pagini numite
"html_form_submit.asp". Pagina vă va arăta informaţia primită.
Taguri pentru formulare

Tag Descriere
<form> Defineşte un formular pentru informaţiile introduse de utilizator
<input> Defineşte un câmp de intrare
<textarea> Defineşte o zonă de text multi-linie
<label> Defineşte eticheta unui control
<fieldset> Defineşte un set de câmpuri
<legend> Defineşte denumirea unui set de câmpuri (fieldset)
<select> Defineşte o listă selectabilă (o listă drop-down )
<option> Defineşte
<optgroup>
Defineşte ounopţiune
grup dedintr-o
opţiunilistă drop-down
<button> Defineşte un buton ce poate fi apăsat
Exemple
Exemplul 1
Ilustrează cum pot fi create câmpuri de text într-o pagină HTM.
<html>
<body>
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 câmpuri pentru parole.
<html>
<body>
<form action="">
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Cand tastati caractere intr-un camp de parola,
browserul afiseaza astericsuri in locul caracterelor.
</p>
</body>
</html>
Exemplul 3
Ilustrează
selecta sau cum pot fi create căsuţe de validare pe care utilizatorul le poate
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
opţiune 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 număr nelimitat de caractere.
<html>
<body>
<textarea rows="10" cols="30"> Pisica se joaca in
gradina. </textarea>
</body>
</html>
Exemplul 8
Ilustrează cum se creează un buton într-o pagină HTML.
<html>
<body>
<form action="">
<input type="button" value="Apasati!">
</form>
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ă câmpuri de text şi un buton de submit pe o
pagină HTML.
<html>
<body>
<form name="input" action="html_form_action.asp"

method="get">
Introduceti prenumele:
<input type="text" name="prenume" size="20">
<br>
Introduceti numele:
<input type="text" name="nume" size="20">
<br>
<input type="submit" value="Trimite">
</form>
<p>
68
Daca apasati butonul „Trimite", veti trimite

informaţia catre o pagina numita
html_form_action.asp.
</p>
</body>
</html>
Exemplul 11
Acest formular conţine trei căsuţe de validare şi un buton de trimitere (submit).
<html>
<body>

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

Pretutindeni pe web veţi găsi pagini formatate ca paginile de ziar utilizând
coloanele HTML.
Layout cu tabele
O practică uzuală este folosirea Un tabel HTML (<table> ) este
tabelelor (table) pentru a stabili utilizat pentru a împărţi această
aspectul unei pagini HTML. porţiune de pagină în două coloane.
Această porţiune de pagină este Secretul este să folosiţi tabele fără

organizată în două coloane, ca o chenar (border) şi poate ceva mai
pagină de ziar. multă spaţiere (cell-padding).
Aşa cum puteţi observa, există Oricât de mult text aţi adăuga în
coloana stângă şi coloana dreaptă. această porţiune de pagină, el va
rămâne în interiorul celor două
76
Acest text este afişat în coloana din coloane.

stânga.
Exemplu
<html>
<body>
<table border="0" width="100%" cellpadding="10">

<tr>
<td width="50%" valign="top">

Un text. Un text. Un text. Un text. Un text. Un text.
Un text. Un text. Un text. Un text. Un text.
</td>
<td width="50%" valign="top">
Alt text. Alt text. Alt text. Alt text. Alt text. Alt
text. Alt text. Alt text. Alt text. Alt text.
</td>
</tr>
</table>
</body>
</html>
17. Cadre (frames)

Cu ajutorul cadrelor puteţi afişa mai multe documente HTML în aceeaşi
fereastră de browser. Fiecare document HTML este numit cadru (frame) şi
este independent de celelalte documente deschise în fereastră.
Dezavantajele utilizării cadrelor:
 Programatorul paginii trebuie să ţină evidenţa mai multor documente
HTML
 Este dificil de listat întreaga pagină
Tagul frameset
 Tagul <frameset> defineşte cum este împărţită fereastra în cadre
 Fiecare frameset defineşte un set de linii sau un set de coloane

Valoarea liniilor/coloanelor
ocupa fiecare linie/coloană. reprezintă porţiunea de ecran pe care o va
77
Tagul frame

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

Tag
<frameset> Descriere
Defineşte un set de cadre
<frame> Defineşte un cadru
<noframes> Defineşte o secţiune fără cadre pentru browserele care nu
recunosc cadrele
<iframe> Defineşte un cadru inline
Exemple
Exemplul 1
Ilustrează proiectarea unui frameset vertical cu trei documente diferite.
<html>
<frameset cols="25%,50%,25%">
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 cu trei documente şi cum se combină
liniile şi coloanele. frameset
79
<html>
<frameset rows="50%,50%">
</frameset>
</frameset>
</html>
Exemplul 5
Ilustrează utilizarea atributului noresize astfel încât utilizatorul să nu poată
redimensiona cadrele.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
Exemplul 6
Ilustrează cum se proiectează un cadru de navigare. Cadrul de navigare conţine
o listă de linkuri care au al doilea cadru drept target. Fişierul numit
"nav_frame.htm" conţine trei link-uri care au următorul cod sursă:
<a href ="frame_a.htm" target ="showframe">Cadrul
a</a><br>
<a href ="frame_b.htm" target ="showframe">Cadrul
b</a><br>
<a href ="frame_c.htm" target ="showframe">Cadrul
80
c</a>
Al doilea cadru va afişa documentul corespunzător link-ului activ.
<html>
<frameset cols="120,*">
<frame src="nav_frame.htm">
<frame src="frame_a.htm" name="showframe">
</frameset>
</html>
Exemplul 7
Ilustrează cum se creează un cadru inline (un cadru în interiorul unei pagini
HTML).
<html>
<body>
<iframe src="mypage.htm"></iframe>
<p>Unele browsere nu recunosc cadrele inline.</p>

<p>In acest caz, iframe-ul nu este vizibil.</p>
</body>
</html>
Exemplul 8
Acest exemplu conţine două cadre. Unul din cadre se deschide la o anumită
secţiune dintr-un fişier specificată prin <a name="C10"> în pagina
"link.htm".
<html>
<frame src="link.htm#C10">
</frameset>
</html
81
Exemplul 9
Acest exemplu conţine două cadre. Cadrul de navigare (content.htm) din stânga
ferestrei conţine o listă de linkuri care au drept target al doilea cadru (link.htm).
Al doilea cadru afişează documentul selectat. Unul din linkurile din cadrul de
navigare este către o anumită secţiune din fişierul destinaţie. Codul din fişierul
"content.htm" arată astfel:
<a href ="link.htm" target ="showframe">Link fara
ancora</a><br>
<a href ="link.htm#C10" target ="showframe">Link cu
ancora</a>.
Codul HTML al paginii care conţine cele două cadre este:
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm" name="showframe">
</frameset>
</html>
18. Fonturi
Tagul <font> din HTML este depăşit şi va fi înlăturat în viitoarele versiuni.
Deşi este încă folosit frecvent, ar trebui să-l evitaţi şi să folosiţi în locul lui
stiluri.
Codul HTML următor precizează dimensiune şi tipul fontului pentru textul
afişat de browser :
<p>
<font size="2" face="Verdana">
Acesta este un paragraf.</font>
</p>
<p>
<font size="3" face="Times">
Acesta este un alt paragraf.
</font>

</p>
Atribute pentru font

82
Atribut Exemplu Descriere

size="number" size="2" Defineşte dimensiunea
fontului
size="+number" size="+1" Măreşte cu 1 dimensiunea
fontului
Micşorează cu 1 dimensiunea
size="-number" size="-1"
fontului
face="face-name" face="Times" Defineşte numele fontului
color="color-
value" color="#eeff00" Defineşte culoarea fontului
color="color-
name" color="red" Defineşte culoarea fontului
Tagul <font> nu ar trebui folosit

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

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

Exemple
Exemplul 1
84
Ilustrează cum se formatează un document HTML cu ajutorul informaţiilor de

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

Când browserul citeşte o foaie de stiluri, va formata documentul conform
precizărilor din foaie. Sunt trei modalităţi de a insera o foaie de stiluri într-un
document HTML:
Foaie de stiluri externă

Este ideală când stilul respectiv trebuie aplicat mai multor pagini. Cu o foaie de
stil externă, puteţi modifica conţinutul întregului site web modificând un singur
fişier. Fiecare pagină din site trebuie să se lege la foaia de stiluri cu tagul
<link> plasat în secţiunea head ca în exemplul următor:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Foaie de stiluri internă

Se foloseşte când un singur document are un anumit stil. Stilul intern respectiv
se defineşte în secţiunea head cu ajutorul tagului <style> ca în exemplul
următor:
<head>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Stiluri inline
Stilul inline se foloseşte când un anumit stil se aplică unui element care apare o
singură dată în document.
În acest caz, atributul style se aplică în tagul elementului respectiv şi poate
conţine orice proprietăţi CSS. Exemplul următor ilustrează cum se schimbă
culoarea şi marginea stângă pentru un paragraf:
<p style="color: red; margin-left: 20px">
Acesta
</p> este un paragraf.
86
Taguri pentru stil

Tag Descriere
<style> Defineşte un stil
<link> Defineşte referinţa la o resursă
<div> Defineşte o secţiune din document
<span> Defineşte o secţiune din document
21. Entităţile de tip caracter

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

non-breaking space
< mai mic decât < <
> mai mare decât > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® marcă înregistrată ® ®

Codurile pentru diacriticele din limba română sunt:
valoare cod
ă ă
Ă Ă
â â
Â Â
î î
Î Î
ş ş
Ş Ş
ţ ţ
Ţ Ţ
22. Elementul head

Elementul head conţine informaţii generale despre document, numite şi meta-
informaţii. Meta înseamnă „informaţii despre”.
Informaţiile din elementul head

Informaţiile din interiorul elementului head nu ar trebui afişate de către
browser.
88
Conform standardului HTML, numai câteva taguri sunt permise în elementul

head şi anume:<base> , <link> , <meta> , <title> , <style>
şi
<script> .
Evitaţi să inseraţi în elementul head alte taguri în afara celor de mai sus.
Taguri permise în elementul head

Tag Descriere
<head> Defineşte informaţii despre document
<title> Defineşte titlul documentului
<base> Defineşte un URL de bază pentru toate linkurile din pagină
<link> Defineşte referinţa unei resurse
<meta> Defineşte meta informaţii
Exemple
Exemplul 1
Informaţia title din elementul head
nu este afişată în fereastra browserului.
<html>
<head>
<title>Acest titlu nu este afisat</title>
</head>
<body>
<p>Acest text este afisat.</p>
</body>
</html>
Exemplul 2
Ilustrează cu se foloseşte tagul astfel încât toate linkurile din pagină să se
deschidă într-o fereastră nouă. base
<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
Aşa cum am văzut în capitolul anterior, elementul head
conţine informaţii
generale (meta informaţii) despre document.
Cel mai adesea, elementul meta furnizează informaţii relevante pentru
browsere sau motoarele de căutare, cum ar fi descrierea conţinutului
documentului.
Cuvinte cheie pentru motoarele de căutare

Unele motoare de căutare folosesc numele şi atributele de conţinut din tagul
meta pentru a indexa paginile dumneavoastră.
Spre exemplu, elementul meta următor poate oferi o descriere a paginii:
<meta name="description" content="Tutoriale pentru
HTML si CSS"/>
Acest element meta defineşte cuvintele cheie pentru pagină:

<meta name="keywords" content="HTML, CSS,
JavaScript"/>
Scopul atributelor name şi content este să descrie conţinutul paginii.

Totuşi, pentru că unii webmasteri utilizează tagurile meta pentru spam, spre
exemplu repetarea cuvintelor cheie pentru a obţine o poziţie mai bună la
indexare, unele motoare de căutare nu mai folosesc în întregime cuvintele cheie
din meta.
90
Exemple
Exemplul 1
Informaţiile din elementul meta descriu documentul.
<html>
<head>
<meta name="author"
content="Cosmin Petrescu">
<meta name="revised"
content="Cosmin Petrescu,9/07/09">
<meta name="generator"
content="Microsoft FrontPage 4.0">
</head>
<body>
<p>
Atributele meta din acest document identifica autorul
si editorul utilizat pentru crearea paginii.
</p>
</body>
</html>
Exemplul 2
Informaţiile din elementul meta descriu cuvintele cheie.
<html>
<head>
<meta name="description"
content="Exemple HTML">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript,
VBScript">
</head>
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>
Veţi fi redirectat catre noua adresa in cinci
secunde.
</p>
<p>
Daca vedeti acest mesaj pentru mai mult de 5 secunde,
va rog apasati linkul de mai sus!
</p>
</body>
</html>
24. URL
Linkuri HTML
92
Când apăsaţi un link dintr-un document HTML, tagul <a> indică către o

adresă web cu o valoare a atributului href ca aceasta: <a
href="mypage.htm">O pagina</a> .
Plecând de la acest tag, browserul va construi o adresa web completa ca
aceasta: http://www.mysite.com/html/mypage.htm pentru a accesa pagina.
URL - Uniform Resource Locator

Uniform Resource Locator (URL) este utilizat pentru a adresa orice resursă de
pe web. O adresă web completă ca aceasta :
http://www.mysite.com/html/mypage.htm respectă următoarele reguli de
sintaxă:
schema://host.domain:port/path/filename
schema defineşte tipul de serviciu de Internet. Tipul cel mai comun este http.
domain defineşte
Construcţia numele domeniului
host defineşte domeniul Internet yahoo.com.
gazdă. Dacă este omis, gazda implicită
pentru http este www.
Construcţia :port defineşte numărul de port pentru gazdă şi este în mod normal
omis. Portul implicit pentru http este 80.
Construcţia path defineşte o cale (un subdirector) de pe server. Dacă calea este
omisă, resursa (documentul) trebuie să se găsească în directorul rădăcină al
site-ului web.
Construcţia filename defineşte numele documentului. Numele implicit poate fi
default.asp, sau index.html sau altceva, în funcţie de setările serverului web.
Scheme URL
În tabelul următor puteţi găsi cele mai folosite scheme URL:
Schema Ce accesează
file un fişier de pe calculatorul local
ftp un fişier de pe un server FTP
http un fişier de pe un server World Wide Web
gopher un fişier de pe un server Gopher
news un grup de ştiri Usenet
telnet o conexiune Telnet
WAIS un fişier de pe un server WAIS
Accesarea unui newsgroup

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

<a
href="mailto:someone@yahoo.com">someone@yahoo.com</a>
creează un link către propriul e-mail ca acesta someone@yahoo.com
25. Scripturi
Pentru a face paginile HTML mai dinamice şi mai interactive, puteţi adăuga
scripturi.
Inserarea unui script într-o pagină HTML

În HTML un script este definit cu tagul <script> . Trebuie să utilizaţi
atributul type pentru a specifica limbajul scriptului.
Exemplu:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Acest script determină afişarea următorului mesaj:
Hello World!
Cum procedaţi cu browserele vechi

Un browser care nu recunoaşte tagul <script> , va afişa conţinutul scriptului
ca text pe pagină. Pentru a evita acest lucru, ar trebui să ascundeţi scriptul în
taguri tip comentariu. Un browser care nu recunoaşte tagul <script> va
ignora acest comentariu şi nu va mai afişa conţinutul tagului, în timp ce un
94
browser nou va înţelege că scriptul trebuie executat, chiar dacă este inclus în
taguri de comentariu.
Exemplu:

</script>
Tagul <noscript>

Acest tag este utilizat pentru a defini un text alternativ dacă scriptul nu poate fi
executat. Se foloseşte pentru browserele care recunosc tagul <script> , dar
nu acceptă limbajul în care este scris. În această situaţie, browserele vor afişa
textul
executadin tagul <noscript>
scriptul. . Tagul va fi ignorat de browserele care pot
Exemplu:

</script>
<noscript>Browserul dvs. nu poate executa
JavaScript!</noscript>
Taguri pentru scripturi

Tag Descriere
<script> Defineşte un script
<noscript> Defineşte un text alternativ dacă scriptul nu poate fi executat
<object> Defineşte un obiect (embedded)
<param> Defineşte un set de parametri de execuţie pentru obiect
Exemple
Exemplul 1
Ilustrează cum inseraţi un script Java într-un document HTML.
<html>
<body>
document.write("<h1>Hello World!</h1>")
95
</script>
</body>
</html>
Exemplul 2
Ilustrează cum trebuie procedat cu browserele care nu recunosc scripturile.
<html>
<body>

</script>
<noscript>Browserul nu accepta JavaScript!</noscript>
<p>
Un browser care nu accepta JavaScript va afisa textul
din elementul noscript.
</p>
</body>
</html>
26. Atribute eveniment

Nou în HTML 4.0 este posibilitatea de a declanşa evenimente în browser, spre
exemplu, executarea unui script Java când un utilizator face click pe un element
HTML. În continuare este prezentată o listă de atribute care pot fi inserate în
tagurile HTML pentru a defini evenimente.
Evenimente pentru ferestre

Pot să apară numai în elementule body şi frameset.
96
onload script Scriptul va fi executat când documentul se

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

Pot apărea numai în elementele unui formular.
onchange script Scriptul va fi executat când elementul se
modifică
onsubmit script Scriptul va fi executat când formularul este
trimis (cu butonul submit)
onreset script Scriptul vabutonul
resetat (cu fi executat când formularul este
reset)
onselect script Scriptul va fi executat când elementul este
selectat
onblur script Scriptul va fi executat când utilizatorul face
click în afara elementului
onfocus script Scriptul va fi executat când utilizatorul face
click pe element (focus)
Evenimente pentru tastatură

Nu pot să apară în elementele base , bdo , br, frame, frameset, head ,
html, iframe , meta , param , script, style şi title.
onkeydown script Scriptul va fi executat când este apăsată o tastă
onkeypress script Scriptul va fi executat când o tastă este apăsată
şi eliberată
onkeyup script Scriptul va fi executat când o tastă este
eliberată
Evenimente pentru mouse

Nu pot să apară în elementele base, bdo, br, frame, frameset,
head, html, iframe, meta, param, script, style,
title.
onclick script Scriptul va fi executat când se face click cu
mouse-ul
97
ondblclick script Scriptul va fi executat când se face dublu click

cu mouse-ul
onmousedown script Scriptul va fi executat când un buton de mouse
este apăsat
onmousemove script Scriptul va fi executat când cursorul mouse-

ului se mişcă
onmouseout script Scriptul va fi executat când cursorul mouse-
ului părăseşte elementul
onmouseover script Scriptul va fi executat când cursorul mouse-
ului se mişcă peste element
onmouseup script Scriptul va fi executat când butonul mouse-ului
este eliberat
27. Calculatorul poate fi server WEB

Dacă vreţi ca alţii să poată vedea paginile dvs. trebuie să le publicaţi pe web.
Pentru a vă publica paginile, trebuie să le salvaţi pe un server web.
Calculatorul dvs. poate funcţiona ca un server web dacă instalaţi IIS. Microsoft
IIS este o componentă gratuită de server web.
IIS - Internet
IIS este un set deInformation Server
servicii bazate pe Internet pentru servere creat de Microsoft
pentru a fi utilizat cu Microsoft Windows. IIS este disponibil pentru Windows
2000, XP, Vista şi Windows NT. IIS este uşor de instalat şi este ideal pentru
proiectarea şi testarea aplicaţiilor web.
IIS include Active Server Pages (ASP), un standard de scripturi orientate pe
server care poate fi utilizat pentru a crea aplicaţii web dinamice şi interactive.
Cum instalaţi IIS în Windows Vista

Parcurgeţi următoriiControl
1. Deschideţi paşi: Panel din Start menu
2. Deschideţi cu dublu click Programs and Features
3. Click pe "Turn Windows features on or off"
4. Selectaţi căsuţa pentru Internet Information Services (IIS), şi click OK
După ce aţi instalat IIS, rulaţi Run Windows Update.
Cum instalaţi IIS în Windows XP şi Windows 2000

Parcurgeţi următorii paşi:
1.
2. În
Startclick
Dublu menu,pe click
Add orSettings
Remove şi selectaţi
ProgramsControl Panel
98
3. Click Add/Remove Windows Components

4. Click Internet Information Services (IIS)
5. Click Details
6. Selectaţi căsuţa pentru World Wide Web Service, şi click OK
7. În secţiunea Windows Component , click Next pentru a instala IIS
După ce aţi instalat IIS, rulaţi Run Windows Update.
Testaţi paginile web

După ce aţi instalat IIS parcurgeţi următorii paşi:
1. Căutaţi în C: un folder nou numit Inetpub
2. Deschideţi folderul Inetpub şi căutaţi folderul wwwroot
3. Creaţi un nou folder, ca "MyWeb", în wwwroot
4. Scrieţi un cod ASP şi salvaţi-l ca "test1.asp" în folderul creat anterior
5. Deschideţi browserul şi tastaţi "http://localhost/MyWeb/test1.asp" ,
pentru a vedea pagina web pe care aţi creat-o.
II. XHTML
1. Ce este XHTML?
Pentru a putea înţelege XHTML, trebuie să aveţi cunoştinţe elementare despre
HTML şi proiectarea paginilor web.
 XHTML este abrevierea pentru EXtensible HyperText Markup
Language
 XHTML este aproape identic cu HTML 4.01
 XHTML este o versiune mai strictă şi mai curată a HTML-ului
 XHTML este HTML definit ca o aplicaţie XML
 XHTML este o recomandare a consorţiului W3C

Toate browserele recunosc XHTML
2. De ce XHTML?
XHTML este o combinaţie între HTML şi XML (EXtensible Markup
Language).
XHTML constă în toate elementele din HTML 4.01, combinate cu sintaxa
strictă din XML.
Multe pagini internet conţin cod HTML „rău”.
Următorul
regulile cod va funcţiona corect într-un browser, chiar dacă nu respectă
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 informaţia, iar HTML este proiectat să afişeze
informaţia.
Astăzi, piaţa este formată din diferite tehnologii de browser, unele rulând pe
calculatoare, altele pe telefoane mobile şi alte dispozitive de mic gabarit.
Ultimele menţionate, nu au resursele sau puterea de a interpreta un limbaj de
marcare „rău”.
Combinând punctele tari din HTML şi XML, a rezultat XHTML, un limbaj de
marcare util acum şi în viitor.
3. Diferenţe între XHTML şi HTML

Cele mai importante diferenţe

 Elementele XHTML trebuie imbricate corect

 Elementele XHTML trebuie întotdeauna închise

Elementele XHTML trebuie scrise cu litere mici

 Documentele XHTML trebuie să aibă un element rădăcină
Elementele XHTML trebuie imbricate corect

În HTML, unele elemente pot fi imbricate incorect, ca în exemplul următor:
<b><i>Acest text este bold si italic.</b></i>
În XHTML, toate elementele trebuie imbricate corect, ca în exemplul următor:

<b><i>Acest
Obs: O greşealătext comunăeste bold silistele
la definirea italic.</i></b>
imbricate este că se uită că
elementele listei interioare trebuie să fie între tagurile <li>
şi </li>
.
Acest cod este greşit:
<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ul>
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
greşit:
<p>Acesta este un paragraf
<p>Acesta este alt paragraf
Modul corect de scriere este:

<p>Acesta
<p>Acesta este
este un
altparagraf</p>
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 rădăcină

Toate elementele XHTML trebuie să fie incluse în elementul rădăcină
<html> . Elementele descendente (descendenţii) trebuie să fie în perechi şi
incluse corect în elementul părinte.
Structura de bază a unui document este:
<html>
<head>
<body> ...
... </head>
</body>
</html>
4. Sintaxa XHTML
Reguli suplimentare privind sintaxa XHTML



Atributele trebuie scrise
Valorile atributelor cu scrise
trebuie mici ghilimele
litere între

 Minimizarea atributelor este interzisă

 Atributul id înlocuieşte numele atributului

 Declaraţia 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>
readonly>
<input disabled>
<option selected>
<frame noresize>

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<optionnoresize="noresize"
<frame selected="selected"/>
/>
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
disabled readonly="readonly"
disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
Atributul lang
Acest atribut se aplică aproape fiecărui element XHTML. El specifică limba în
care este scris conţinutul unui element.
Dacă utilizaţi atributul lang într-un element, trebuie să adăugaţi şi atributul
xml:lang, ca în exemplul următor:
<div lang="it" xml:lang="it">Ciao bella!</div>
Elemente XHTML obligatorii

103
Toate documentele XHTML trebuie să aibă o declaraţie DOCTYPE. Elementele

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

Cel mai întâlnit DTD este XHTML Transitional.
este obligatorie
Un document XHTML este format din trei părţi principale:
declaraţia DOCTYPE

Secţiunea
 <head>
StructuraSecţiunea

<body>
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/xhtml1-
transitional.dtd">
<html>
<head>
<title>Un document simplu</title>
</head>
<body>
<p>Un paragraf</p>
</body>
</html>
Declaraţia DOCTYPE defineşte tipul documentului. În rest documentul arată ca
în HTML.
Document Type Definitions (DTD)

 O declaraţie DTD specifică sintaxa unei pagini web în SGML
 DTD-urile sunt utilizate de aplicaţiile SGML, cum este HTML, pentru
a specifica regulile pentru documentele de un anumit tip, inclusiv un
 set de declaraţii
În XHTML, DTD de elemente şi entităţi
descrie într-un limbaj precis, înţeles de calculator,
sintaxa acceptată pentru marcajul XHTML
În XHTML sunt trei tipuri de DTD:
STRICT

TRANSITIONAL

FRAMESET

XHTML 1.0 Strict

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

Transitional//EN"
transitional.dtd">
105
Folosiţi această declaraţie DOCTYPE când doriţi să folosiţi facilităţile HTML

de prezentare.
XHTML 1.0 Frameset

Frameset//EN"
frameset.dtd">
Folosiţi această declaraţie DOCTYPE când doriţi să utilizaţi cadre (frames)
HTML.
Un document XHTML poate fi validat cu validatorul W3C. Înainte de a valida
documentulXHTML, inseraţi declaraţia DTD potrivită din cele trei declaraţii
prezentate anterior.
6. Modularizarea XHTML
Modelul de modularizare XHTML defineşte modulele XHTML.
XHTML conţine majoritatea facilităţilor necesare unui proiectant web. Pentru
unele aplicaţii, XHTML este prea mare şi prea complex, pentru altele este prea
simplu. Prin împărţirea XHTML în module, comsorţiul W3C a creat seturi mici
şi bine definite de elemente XHTML care pot fi folosite separat pentru
dispozitivele mici, sau pot fi combinate cu alte standarde XML în aplicaţii mult
mai complexe.
Cu un XHTML modularizat, proiectaţii pot:
Alege elemente suportate de un dispozitiv

Simplifica XHTML-ul pentru dispozitive mici


Extinde XHTML-ul pentru aplicaţii complexe prin adăugarea de noi


funcţionalităţi XML (ca MathML, SVG, Voice şi Multimedia)

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

Forms Module Defineşte toate elementele folosite în formulare
Frames Module Defineşte elementele pentru frameset
Hypertext Module Defineşte elementul a
Iframe Module
Image Module Defineşte elementul img
iframe
Intrinsic Events ModuleDefineşte atributele evenimentelor, ca onblur şi
onchange
Legacy Module Defineşte elementele şi atributele depăşite*
Link Module Defineşte elementul link
List Module Defineşte elementele pentru liste ol, li, ul, dd, dt, şi
dl
Metainformation Module Defineşte elementul meta
Name Identification Defineşte atributul depăşit* name
Module
Object Module Defineşte elementele object şi param
Presentation Module Defineşte elementele de prezentare, ca b şi i
Scripting Module Defineşte elementele script şi noscript
Server Image Map Module Defineşte elementele de mapare a imaginii pentru
server
Structure Module Defineşte elementele html, head, title şi body
Style Attribute Module Defineşte atributul style
Style Sheet Module Defineşte elementul style
Tables Module Defineşte elementele utilizate în tabele
Target Module Defineşte atributul target
Text Module Defineşte elementele container pentru text, ca p şi
h1
* Elementele depăşite nu ar trebui folosite în XHTML.
III. LISTA TAGURILOR HTML 4.01 /

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

<!DOCTYPE> Defineşte
Defineşte un comentariu
tipul documentului STF
STF
107
<a> Defineşte o ancoră STF

<abbr> Defineşte o abreviere STF
<acronym> Defineşte un acronim STF
<address> Defineşte informaţiile de contact pentru STF
autorul documentului
<area /> Defineşte o zonă în interiorul unei imagini STF
mapate
<b> Defineşte un text îngroşat STF
<base /> Defineşte o adresă implicită sau o STF
destinaţie implicită pentru toate linkurile
dintr-o pagină
<bdo> Defineşte direcţia textului STF
<big> Defineşte un text mare STF
<blockquote>
<body> Defineşte
Defineşte un citatdocumentului
corpul lung STF
STF
<br /> Defineşte o întrerupere de linie STF
<button> Defineşte un buton ce poate fi apăsat STF
<caption> Defineşte titlul unui tabel STF
<cite> Defineşte un citat STF
<code> Defineşte un text tip cod de calculator STF
<col /> Defineşte valorile atributelor pentru una STF
sau mai multe coloane dintr-un tabel
<colgroup> Defineşte un grup de coloane dintr-un tabel STF
pentru formatare
<dd> Defineşte descrierea unui termen dintr-o STF
listă de definiţii
<del> Defineşte un text şters STF
<dfn> Defineşte o termen de definiţie STF
<div> Defineşte o secţiune dintr-un document STF
<dl> Defineşte o listă de definiţii STF
<dt> Defineşte
definiţii un element dintr-o listă de STF
<em> Defineşte un text emphasized (accentuat) STF
<fieldset> Defineşte un chenar în jurul elementelor STF
unui formular
<form> Defineşte un formular HTML pentru STF
utilizator
<frame /> Defineşte o fereastră (un cadru) dintr-un F
frameset
<frameset> Defineşte un set de cadre F
<h1> to <h6> Definesc titlurile HTML STF
108
<head> Defineşte informaţiile despre document STF

<hr /> Defineşte o linie orizontală STF
<html> Defineşte un document HTML STF
<i> Defineşte un text italic STF
<iframe>
<img /> Defineşte ounimagine
cadru inline TF
STF
<input /> Defineşte un control de intrare STF
<ins> Defineşte un text inserat STF
<kbd> Defineşte un text de la tastatură STF
<label> Defineşte eticheta unui element de intrare STF
<legend> Defineşte un titlu pentru un element STF
fieldset
<li> Defineşte un item dintr-o listă STF
<link /> Defineşte relaţia dintre un document şi o STF
resursă externă
<map> Defineşte o imagine mapată STF
<meta /> Defineşte meta-datele despre un document STF
HTML
<noframes> Defineşte un conţinut alternativ pentru TF
utilizatorii care nu acceptă cadrele
<noscript> Defineşte un conţinut alternativ pentru STF
utilizatorii care nu acceptă scripturile de
server
<object> Defineşte un obiect împachetat STF
<ol> Defineşte o listă ordonată STF
<optgroup> Defineşte un grup de opţiuni înrudite dintr- STF
o listă de selecţie
<option> Defineşte o opţiune dintr-o listă de selecţie STF
<p> Defineşte un paragraf STF
<param /> Defineşte un parametru pentru un obiect STF
<pre>
<q> Defineşte un text preformatat STF
Defineşte un citat scurt STF
<samp> Defineşte un model de cod de calculator STF
<script> Defineşte un script pentru client STF
<select> Defineşte o listă de selecţie (o listă drop- STF
down)
<small> Defineşte un text mic STF
<span> Defineşte o secţiune dintr-un document STF
<strong> Defineşte un text îngroşat STF
<style> Defineşte informaţiile de stil pentru un STF
109
document
<sub> Defineşte un text de tip indice STF
<sup> Defineşte un text de tip exponent STF
<table> Defineşte un tabel STF
<tbody>
<td> Grupează oconţinutul
Defineşte corpului
celulă dintr-un unui tabel
tabel STF
<textarea> Defineşte un control de intrare multi-linie STF
<tfoot> Grupează conţinutul subsolului unui tabel STF
<th> Defineşte o celulă de tip titlu într-un tabel STF
<thead> Grupează conţinutul de tip titlu dintr-un STF
tabel
<title> Defineşte titlul unui document STF
<tr> Defineşte o linie dintr-un tabel STF
<tt> Defineşte un text tip teletype STF
<ul> Defineşte o listă neordonată STF
<var> Defineşte o variabilă STF
Tagul 

Exemplu:
<!—Acesta este un comentariu si nu va fi afisat de
browser-->
<p>Acest paragraf va fi afisat de browser.</p>

Tagul de comentariu este utilizat pentru a insera în codul sursă un comentariu
care va fi ignorat de browser. Puteţi folosi comentariile pentru a explica codul
sau pentru a stoca informaţii specifice, cum ar fi scripturile şi elementele de stil
(pentru browserele vechi). Acest tag nu are atribute standard sau atribute de
evenimente.
Exemplu de document cu o declaraţie de XHTML 1.0 Transitional:
Transitional//EN"
transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
110
The content of the document......

</body>
</html>
Declaraţia doctype ar trebui să fie prima dintr-un document HTML, înainte
de tagul <html> .
Declaraţia doctype nu este un tag HTML; este o indicaţie pentru browserele
web referitoare la versiunea de limbaj de marcare utilizat în scrierea paginii.
Declaraţia doctype se referă la DTD (Document Type Definition ).
Declaraţii doctype disponibile în recomandările W3C

HTML 4.01 Strict
Documentul poate conţine toate elementele şi atributele HTML, dar nu poate
conţine elemente frameset

permise de prezentare sau elemente
. Sintaxa declaraţieidepăşite
este: (ca font). Nu sunt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional

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

Este la fel ca HTML 4.01 Transitional, dar este permisă utilizarea elementelor
frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict

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

111
Este la fel ca HTML 4.01 Transitional, dar marcajele trebuie să respecte

regulile XML.
Transitional//EN"
transitional.dtd">
XHTML 1.0 Frameset

Este la fel ca XHTML 1.0 Transitional, dar este permisă utilizarea elementelor
frameset.
Frameset//EN"
frameset.dtd">
XHTML 1.1
Este la fel ca XHTML 1.0 Strict, dar pot fi adăugate module pentru anumite
limbi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Tagul <a>
Exemplu:
<a href="http://www.yahoo.com">Yahoo!</a>
Tagul <a> defineşte o ancoră care poate fi folosită în două moduri:
1. Pentru a crea un link către alt document, folosind atributul href
2. Pentru a crea o etichetă în interiorul unui document, folosind atributul
name
Elementul a este numit uzual link sau hiperlink. Cel mai important atribut al
elementului este href care indică destinaţia link-ului. În mod predefinit, link-
urile sunt afişate în browsere astfel :
un link nevizitat este subliniat şi are culoarea albastră

un link vizitat este subliniat şi are culoare violet


un link activ este subliniat şi are culoarea roşie


Linkurile pot fi stilizate cu CSS.

Atribute opţionale
Coloana DTD indică în care HTML 4.01/XHTML 1.0 DTD este permis
atributul. S=Strict, T=Transitional, and F=Frameset.
Atribut Valoare Descriere DTD
charset char_encoding Specifică setul de caractere al STF
documentului referit
112
coords coordinates Specifică coordonatele unui link STF

href URL Specifică destinaţia unui link STF
hreflang language_code Specifică limba documentului referit STF
name section_name Specifică numele unei ancore STF
rel text Specifică

şi relaţiareferit
documentul dintre documentul curent STF
rev text Specifică relaţia 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
_self referit
_top
ramename
Atribute standard
accesskey character Specifică o tastă (shortcut) pentru a accesa STF
elementul
class classname Specifică numele clasei unui element STF
dir rtl Specifică direcţia textului pentru STF
ltr conţinutul unui element
id id Specifică un id unic pentru un element STF
lang language_code Specifică limba pentru conţinutul 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ă informaţii suplimentare despre STF
un element
xml:lang language_code Specifică limba pentru conţinutul unui STF
element, în documentele XHTML
Atribute pentru evenimente
onblur script Script executat când 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 când mouse-ul vizitează STF
elementul
113
onmousedown script Script executat când butonul mouse-ului STF

este apăsat
onmousemove script Script executat când cursorul mouse-ului STF
se mişcă
onmouseout script Script executat când cursorul mouse-ului STF
părăseşte un element
onmouseover script Script executat când cursorul mouse-ului STF
se mişcă peste un element
onmouseup script Script executat când butonul mouse-ului STF
este eliberat
onkeydown script Script executat când este apăsată o tastă STF
onkeypress script Script executat când o tastă este apăsată şi STF
eliberată
onkeyup script Script executat când o tastă este eliberată STF
Tagul <abbr>

Exemplu:
<abbr title="Organizatia Natiunilor Unite">ONU</abbr>
a fost fondata in 1945.
Tagul <abbr> descrie o frază abreviată.
Marcând abrevierile, puteţi furniza informaţii utile browserelor şi motoarelor de
căutare.
Obs: Atributul title este utilizat pentru a afişa versiunea completă a
expresiei abreviate, atunci când mouse-ul se mişcă peste abreviere.
Atribute standard: class, dir, id , lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <acronym>
Exemplu:
Sistemele de operare Windows se bazeaza pe <acronym
title="Grafic User Interface">GUI</acronym>.
Tagul defineşte un acronim, adică un text care poate fi pronunţat ca şi cum ar fi
un cuvânt (NATO, NASA, GUI).
Marcând acronimele, puteţi furniza informaţii utile browserelor şi motoarelor
de căutare.
Obs: Atributul title este utilizat pentru a afişa versiunea completă a
acronimului, atunci când mouse-ul se mişcă peste el.
114

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 defineşte informaţiile de contact pentru autorul sau posesorul
documentului, pentru
element se adaugă ca acesta
în antetul sau să poată fipaginii
subsolul contactat
web.de utilizator. Uzual, acest
Obs. În toate browserele, conţinutul elementului este afişat în italic şi, uzual,
browserul va adăuga o întrerupere de linie înainte şi după elementul adresă.
Tagul <area>
Tagul defineşte o zonă dintr-o imagine mapată (o imagine cu zone ce pot fi
acţionate cu un click de mouse).
Elementul este scris întotdeauna în interiorul tagului <map> .
Obs: Atributul usemap din tagul <img> este asociat cu atributul name al
elementului map şi creează o relaţie între imagine şi hartă.
Obs. În HTML <area> nu are tag de închidere, dar în HTML tagul <area>
trebuie închis corect. În XHTML tagul trebuie să aibă neapărat atributul alt
care specifică
Atribute un text alternativ pentru zona definită.
opţionale
coords coordinates Specifică coordonatele zonei STF
href URL Specifică destinaţia unui link din zonă STF
nohref nohref Specifică faptul că zona nu are un link 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 depăşite, dar e posibil să obţineţi
rezultate mai bune cu CSS.
Tagul <base>
Tagul specifică o adresă sau o destinaţie implicită pentru toate linkurile dintr-o
pagină şi trebuie scris în interiorul elementului <head> . În HTML <base>
nu are tag de închidere, dar în XHTML trebuie închis corect.

Atribute
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
ramename
Tagul nu are atribute standard sau de evenimente.
Tagul <bdo>

Tagul permite specificarea direcţiei textului şi suprascrie algoritmul
bidirecţional. Are obligatoriu atributul dir care specifică direcţia textului din
interiorul elementului, cu valorile posibile ltr şi rtl.
Tagul nu are atribute de evenimente.
Tagul <blockquote>

116
Tagul defineşte un citat lung. Browserul inserează spaţiu alb înainte şi după
acest element şi o margine.
Obs: Pentru a marca citatele scurte folosiţi elementul q
.
Tagul poate avea atributul opţional cite, un URL care specifică sursa
citatului.
Atribute standard: class, dir, id , lang, style, tabindex, title,
xml:lang
Tagul <body>

Tagul defineşte corpul documentului.
Atribute
xml:lang standard:
class, dir, id
, lang, style, tabindex, title,
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 când documentul se
încarcă
onmousedown script Script executat când butonul mouse-ului STF
este apăsat
onmousemove script Script executat când cursorul mouse-ului STF
se mişcă
onmouseout script Script executat când cursorul mouse-ului STF
părăseşte un element
onmouseover script Script executat când cursorul mouse-ului STF
se mişcă peste un element
onmouseup script Script executat când butonul mouse-ului STF
este eliberat
onkeydown script Script executat când o tastă este apăsată STF
onkeypress script Script executat când o tastă este apăsată şi STF
eliberată
onkeyup script Script executat când o tastă este eliberată STF
onunload script Script executat când documentul nu se
încarcă
Tagul <br>

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

Tagul defineşte un buton ce poate fi apăsat de utilizator. În interiorul
elementului puteţi avea text sau imagini. Aceasta este diferenţa dintre acest
buton şi cel creat cu un element input.
Specificaţi întotdeauna atributul type. Pentru IE tipul implicit este "button",
în timp ce în alte browsere (şi în specificaţia W3C) este "submit".
Atribute opţionale
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
Atribute , title, xml:lang
tabindexstandard: , class, dir, id
accesskey , lang, style,
Tagul <caption>

Tagul defineşte titlul unui tabel şi trebuie inserat în document imediat după
tagul <table> . Puteţi specifica un singur titlu pentru un tabel. Uzual titlul va
fi centrat în raport cu tabelul.
Tagurile <em>

<strong>
<dfn>
<code> <samp> <kbd>
<var> <cite>
Sunt taguri pentru formatarea unei porţiuni de text. Ele nu sunt depăşite, dar se
pot obţine rezultate mai bune cu CSS.
118
Atribute standard: class, dir, id

, lang, style, title, xml:lang
Tagul <col>

Exemplu:
<html>
<body>
<table width="100%" border="1">

<col align="left" />
<col align="left" />
<col
<tr> align="right" />
<th>ISBN</th>
<th>Titlu</th>
<th>Autor</th>
</tr>
<tr>
<td>3476896</td>
<td>Ion</td>
<td>Liviu Rebreanu</td>
</tr>
<tr>
<td>2489604</td>
<td>Morometii</td>
<td>Marin Preda</td>
</tr>
</table>
</body>
</html>
Tagul defineşte valorile atributelor pentru una sau mai multe coloane dintr-un
tabel.
Tagul este util pentru a aplica un stil întregii coloane, în loc de a repeta stilul
pentru fiecare linie şi celulă.
Tagul poate fi utilizat numai în interiorul unui element table sau colgroup.
Deşi în HTML <col> nu are tag de închidere, în XHTML tagul trebuie închis
corect.
Obs: Dacăcuadăugaţi
coloanele CSS. atributul class în tagul <col>
, atunci puteţi formata
119
Atribute opţionale
Attribute Value Description DTD
align left Specifică alinierea conţinutului coloanei STF
right
center
ustify
char
char character Specifică alinierea conţinutului coloanei la un STF
caracter
charoff number Specifică numărul de caractere cu care va fi STF
aliniat conţinutul faţă de caracterul specificat
cu atributul char
span number Specifică numărul de coloane pe care se va STF
întinde elementul col
valign top Specifică alinierea verticală a conţinutului STF
middle relativ la un element col
bottom
baseline
width % Specifică lăţimea elementului col STF
ixels
relative_length
Atribute pentru, evenimente:
onmousemove onclick
onmouseout , , ondblclick, , onmousedown
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ă adăugaţi atributul class în tagul <colgroup> , atunci puteţi
formata coloanele cu CSS.
Atribute opţionale: aceleaşi ca la tagul <col>
Tagul <dd>

Tagul descrie un element (item) dintr-o listă de definiţii.
Tagul este utilizat împreună cu <dl> (care declară o listă de definiţii) şi <dt>

(care defineşte un termen din listă).
În interiorul tagului <dd> pot să apară paragrafe, întreruperi de linie, imagini,
liste, etc.
Tagul <del>

Tagul defineşte un text care a fost şters dintr-un document.
Obs: Folosiţi acest tag împreună cu tagul <ins>
pentru a descrie actualizările
şi modificările făcute în document.
Atribute opţionale
121

cite URL Specifică URL-ul unui document care STF
explică de ce a fost şters textul
datetime YYYY-MM- Specifică data şi ora la care a fost STF
DDThh:mm:ssTZD şters textul
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 secţiune
div.</p>
</div>
</body>
</html>
Tagul defineşte o secţiune dintr-un document HTML şi este deseori utilizat
pentru a grupa elemente ce vor fi formatate cu stiluri.
Obs: Elementul div este utilizat frecvent împreună cu CSS pentru a formata
aspectul (layout) unei pagini web.
În mod normal, browserele afişează o întrerupere de linie înainte şi după un
element div.
Tagul <dl>

Tagul declară o listă de definiţii şi este utilizat împreună cu tagurile <dt>
şi
<dd> .
122

Tagul defineşte
Tagul <dt> un item dintr-o listă de definiţii şi este utilizat împreună cu
tagurile <dl>
şi <dd>
.
Tagul <fieldset>

Exemplu:
<html>
<body>
<form>
<fieldset>
<legend>Date personale:</legend>
Nume: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Data nasterii: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
Tagul este utilizat pentru a grupa logic elementele unui formular.
Tagul desenează o casetă în jurul elementelor de formular grupate.
Tagul <legend> defineşte un titlu pentru elementul fieldset.
Tagul <form>

Tagul este utilizat pentru a crea formulare HTML pentru intrările utilizatorului.
Un formular poate conţine elemente de intrare, cum ar fi: câmpuri de text,
căsuţe de validare (checkbox), butoane radio, butoane de trimitere (submit) etc.
123
Un formular poate conţine şi meniuri de selectare, precum şi elemente

textarea, fieldset, legend , şi label.
Formularele sunt folosite pentru a trimite date către server..
Obs: Elementul form este un element la nivel de bloc şi creează o întrerupere
de linie, înainte şi după el însuşi.
Atribute obligatorii
action URL Specifică unde se trimit datele din formular STF
când acesta este submis (submit)
Atribute opţionale
accept MIME_type Specifică tipurile de fişiere ce pot fi STF
accept- charset uploadate prin intermediul

Specifică seturile formularului
de caractere din datele STF
charset formularului pe care serverul le poate
manevra
enctype application/x- Specifică cum trebuie codate datele din STF
www-form- formular înainte de a fi trimise la server
urlencoded
multipart/form-
data
method text/plain
get Specifică cum se trimit datele din formular STF
post
name name Specifică numele formularului TF
onkeydown, onkeypress, onkeyup la care se adaugă atributele:
onreset script Script executat când formularul este resetat
onsubmit script Script executat când formularul este trimis (submit)
124
Tagul <frame>

Tagul defineşte o fereastră (un cadru) particular dintr-un frameset.
Fiecare cadru din frameset poate avea atribute diferite, cum ar fi margini,
bare de derulare, posibilitatea de redimensionare, etc.
În HTML <frame>
corect. nu are tag de închidere, dar în XHML tagul trebuie închis
Obs: Dacă doriţi să validaţi o pagină care conţine cadre, fiţi siguri că
doctype este setat pe "Frameset DTD".
Important: Nu puteţi folosi elementul body împreună cu un element
frameset. Totuşi, dacă adăugaţi tagul <noframes> pentru browserele care
nu recunosc cadrele, va trebui să includeţi textul în elementul body.
Atribute opţionale
frameborder 0 Specifică
chenar în dacă
jurul se
afişează sau nu un F
1 cadrului
longdesc URL Specifică o pagină care conţine descrierea F
extinsă a conţinutului cadrului
marginheight ixels Specifică marginile de sus şi de jos ale F
cadrului
marginwidth ixels Specifică marginile din dreapta şi din F
stânga ale cadrului
name name Specifică numele cadrului F
noresize noresize Specifică faptul că nu se poate F
redimensiona cadrul
scrolling yes Specifică dacă se afişează sau nu bare de F
no derulare în cadru
auto
src URL Specifică URL-ul documentului afişat în F
cadru
Atribute standard: class, id
, style, title
Tagul nu acceptă atribute de evenimente.
Tagul <frameset>

Elementul frameset păstrează două sau mai multe cadre (elemente frame).
Fiecare cadru păstrează un document separat. Elementul frameset arată
doar câte linii sau câte coloane for fi în frameset.
Atribute opţionale
cols %
ixels Specifică numărul
din frameset şi dimensiunea coloanelorF
125
*
rows ixels Specifică numărul şi dimensiunea liniilor F
% din frameset
*
Atribute pentru evenimente: onload , onunload

Tagul <head>

Acest element este un container pentru toate elementele care se plasează aici:
scripturi, informaţii despre foile de stil, meta informaţii etc.
În secţiunea head pot fi adăugate următoarele taguri: <base>
, <link>,
<meta> , <script> , <style> şi <title> .
Tagul secţiune. defineşte titlul documentului şi este singurul obligatoriu din
<title>
această
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute eveniment.
Tagurile <h1>
...<h6>
Aceste taguri definesc titlurile HTML.
Tagul <h1> defineşte cel mai mare titlu şi <h6>
defineşte cel mai mic titlu.
Tagul <hr>
Tagul creează o linie orizontală într-o pagină web care poate fi folosită pentru a
separa conţinutul.
Deşi în HTML <hr> nu are tag de închidere, în XHTML tagul se închide
astfel:
Atribute . class, dir, id
<hrstandard:
/> , lang, style, title, xml:lang
Tagul <html>

Tagul spune browserului că acesta este un document HTML. Este cel mai
exterior tagdoctype
Elementul în HTML şi XHTML
trebuie şi se maiînaintea
plasat în document numeşte element html
elementului rădăcină.
.
126

Tagul <iframe>
Tagul defineşte un cadru inline care conţine un alt document.
Obs: Pentru browserele care nu recunosc acest tag, plasaţi textul dorit între
tagurile <iframe> şi </iframe> .
Atribute opţionale
frameborder 1 Specifică dacă se afişează un chenar sau nu în TF
0 urul elementului
height ixels Specifică înălţimea elementului TF
%
longdesc URL Specifică o pagină carecadrului

conţine o descriere TF
extinsă a conţinutului
marginheight ixels Specifică marginile de sus şi de jos ale TF
cadrului
marginwidth ixels Specifică marginile din stânga şi din dreapta TF
cadrului
name name Specifică numele cadrului TF
scrolling yes Specifică dacă se afişează sau nu bare de TF
no derulare în cadru
auto
src URL Specifică URL-ul documentului ce trebuie TF
afişat în cadru
width ixels Specifică lăţimea cadrului TF
%
Tagul
Tagul <img> o imagine într-o pagină HTML. Practic, imaginea nu este
împachetează
efectiv inserată în document, ci legată la pagina respectivă. Tagul <img>
creează un loc de stocare pentru imaginea referită. Tagul are două atribute
obligatorii: src şi alt.
În HTML <img> nu are tag de închidere, dar în XHTML el trebuie închis
corect.
Obs: Atributul alt este conceput să afişeze un text alternativ dacă imaginea
nu poate fi încărcată, nu un text afişat când mouse-ul trece peste imagine.
Pentru a afişa un text când mouse-ul trece peste o imagine sau peste o imagine
mapată, utilizaţi atributul title, ca în exemplul următor:
127
<img src="smiley.gif" alt="Smiley face"

title="Smiley face" />
Obs: Când o pagină web este încărcată în browser, acesta ia imaginea de pe un
server web şi o inserează în pagină. De aceea, asiguraţi-vă că imaginea se
găseşte în acelaşi loc relativ la pagina web, altfel utilizatorii vor primi un
simbol de link rupt. Acest simbol este afişat atunci când browserul nu găseşte o
imagine.
alt text Specifică un text alternativ pentru imagine STF
src URL Specifică URL-ul imaginii STF
Atribute opţionale
height ixels Specifică înălţimea unei imagini STF
%
longdesc URL Specifică URL-ul unui document care conţine o STF
descriere extinsă a imaginii
usemap #mapname Specifică o imagine ca imagine mapată pentru STF
client
width ixels Specifică lăţimea unei imagini STF
%
Atribute pentru, evenimente:
onmousemove onmouseout onclick
, , ondblclick, , onmousedown
onmouseover onmouseup,,
onkeydown, onkeypress, onkeyup, onabort(script executat când
încărcarea imaginii este întreruptă)
Tagul <input>

Tagul este utilizat pentru a selecta informaţia introdusă de utilizator.
Un câmp de intrare (input) poate fi un câmp de text, o căsuţă de validare, un
câmp de parolă, un buton radio, un buton etc.
În HTML <input> nu are tag de închidere, dar în XHTML tagul trebuie
închis astfel: <input/> .
Obs: Pentru a defini etichetele elementelor de intrare, utilizaţi tagul <label>
.
Atribute opţionale
accept MIME_type Specifică tipul fişierelor care pot fi submise STF
(numai pentru type="file")
alt text Specifică un text alternativ pentru o imagine STF
checked checked (numai pentru

Specifică type="image")
că elementul de intrare trebuie să fie STF
128
preselectat când pagina se încarcă (pentru

type="checkbox" sau type="radio")
disabled disabled Specifică că elementul de intrare trebuie STF
dezactivat când pagina se încarcă
maxlength number Specifică lungimea maximă (în caractere) a STF
unui câmp de intrare (pentru type="text" sau
type="password")
name name Specifică un nume pentru un element de intrare STF
readonly readonly Specifică că un câmp de intrare este read-only STF
(pentru type="text" sau type="password")
size number Specifică lăţimea unui câmp de intrare STF
src URL Specifică URL-ul unei imagini afişată ca buton STF
de submitere
type button
checkbox Specifică tipul unui element de intrare STF
file
hidden
image
password
radio
reset
submit
value text
value Specifică valoarea unui element de intrare STF
Atribute standard: acceskey, class, dir, id , lang, style,
Atribute pentru evenimente: onblur, onchange (script executat când
elementul se modifică), onclick, ondblclick, onfocus,
onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onkeydown, onkeypress, onkeyup, onselect(script
executat când elementul este selectat)
Tagul <ins>

Tagul defineşte textul care a fost inserat într-un document.
Obs: Folosiţi-l împreună cu tagul <del> pentru a descrie actualizările şi
modificările făcute în document.
Atribute opţionale
cite URL Specifică URL-ul unui document care STF
explică de ce textul a fost
inserat/modificat
129
datetime YYYY-MM- Specifică data şi ora la care a fost STF

DDThh:mm:ssTZD inserat/schimbat textul
xml:lang
Tagul <label>

Defineşte eticheta unui element de intrare dintr-un formular.
Eticheta nu are un efect deosebit pentru utilizator, dar îmbunătăţeşte
accesibilitatea utilizatorilor de mouse. Dacă faceţi clic pe textul etichetei,
elementulopţionale
Atribute respectiv este selectat.
for element_id Specifică cărui element din formular îi STF
corespunde eticheta.
Tagul <legend>
Tagul defineşte titlul unui element fieldset.
onmousemove, onmouseout, onmouseover , onmouseup,
Tagul <li>
Tagul defineşte un item dintr-o listă ordonată sau neordonată.
Obs: Utilizaţi CSS pentru a defini tipul listei şi a elementelor din listă.
130
Tagul <link>
Tagul defineşte relaţia dintre document şi o resursă externă.
Este frecvent utilizat pentru a lega foile de stil la document.
Deşi în HTML <link> nu are tag de închidere, în XHTML el trebuie închis
corect.
Obs: Elementul link trebuie inclus în secţiunea head , şi poate să apară de
mai multe ori.
Atribute opţionale
charset char_encoding Specifică tipul de codare a caracterelor pentru STF
documentul referit
href URL Specifică locaţia documentului referit STF
hreflang language_code Specifică limba textului din documentul STF
media screen referit

Specifică pe ce dispozitiv va fi afişat STF
tty documentul referit
tv
projection
handheld
print
braille
aural
rel all
alternate Specifică relaţia 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ă relaţia dintre documentul referit şi STF
appendix
bookmark documentul curent
131
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
target _blank Specifică unde se va încărca documentul TF
_self referit
_top
_parent
rame_name
type MIME_type Specifică tipul MIME al documentului referit STF
, , , ,
onmousemove
onkeydown onmouseout
, onkeypress , onkeyup onmouseover onmouseup
Tagul <map>

Tagul defineşte o imagine mapată (image-map) pentru client. Atributul name
este obligatoriu în elementul map.
Acest atribut este asociat cu atributul usemap al elementului <img> şi
creează o relaţie între imagine şi hartă (map).
Elementul map conţine un anumit număr de elemente area, care definesc
zonele din imaginea mapată ce pot fi activate cu mouse-ul.
Tagul <meta>

Metadata este informaţia despre date..
132
Tagul <meta> furnizează metadatele despre documentul HTML. Metadata nu

va fi afişată în browser.
Elementele meta specifică uzual descrierea paginii, cuvintele cheie, autorul
documentului, ultima modificare şi alte metadate.
În HTML <meta> nu are tag de închidere, dar în XHTML tagul trebuie închis
corect.
content text Specifică conţinutul meta-informaţiei STF
Tagul nu are atribute eveniment
Tagul <noframes>
Tagul este utilizat pentru browserele care nu recunosc cadrele.
Elementul noframes poate conţine toate elementele care apar uzual în
elementul body al unei pagini HTML.
Tagul
Tagul <noscript>
este utilizat pentru a furniza un conţinut alternativ pentru utilizatorii care
au dezactivat scripturile în browser sau care au un browser care nu recunoaşte
scripturile client.
Elementul noscript poate conţine toate elementele care apar uzual în
elementul body al unei pagini HTML.
Tagul <object>

Exemplu:
<object classid="clsid:F08DF954-8592-11D1-B16A-
00C0F0283628" id="Slider1" width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
133
<param name="Max" value="10" />

</object>
Tagul este utilizat pentru a include obiecte ca imaginile, fişiere audio, video,
apleturi Java, ActiveX, PDF şi Flash.
Elementul object a fost introdus pentru a înlocui elementele img şi
applet. Din păcate, acceptarea elementului object în browsere depinde de
tipul obiectului şi browserele importante folosesc coduri diferite pentru a
încărca un obiect de acelaşi tip. Din fericire, elementul object oferă o soluţie:
dacă elementul nu este afişat, codul dintre tagurile <object> şi </object>
va fi executat. În acest fel, pot fi mai multe elemente object imbricate (câte
unul pentru fiecare browser).
Obs: Tagul <param> defineşte setările pentru execuţia (run-time) obiectului.
Important: Nu folosiţi tagul <object> pentru imagini, ci tagul <img> !
Atribute
xml:lang standard:
class, dir, id
, lang, style, tabindex, title,
Tagul <ol>
Tagul este utilizat pentru a crea o listă ordonată.
Obs: Utilizaţi CSS pentru a defini tipul listei..
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 opţiunile înrudite dintr-o listă de
selecţie.
Dacă aveţi o listă de opţiuni lungă, gruparea opţiunilor înrudite uşurează
utilizarea ei.
label text Specifică o descriere pentru grupul de opţiuni STF
Atribute opţionale
disabled disabled class
Atribute standard: Specifică
, dir,că un
id grup ,de
, lang opţiuni
style este dezactivat
, title , xml:langSTF

Tagul <option>

Tagul defineşte o opţiune dintr-o listă de selecţie. Elementul option se scrie
în interiorul elementului .
În HTML <option> select
nu are tag de închidere, dar în XTML tagul trebuie
închis corect.
Atribute opţionale
disabled disabled Specifică o opţiune dezactivată STF
label text Specifică o etichetă scurtă pentru o opţiune STF
selected selected Specifică că opţiunea este implicit selectată STF
value text Specifică valoarea care se trimite serverului când STF
formularul este submis.
Tagul <p>

Tagul defineşte un paragraf. Elementul creează în mod automat un spaţiu
înainte
specificaşi într-o
după foaie
paragraf.
de stilSpaţiul este aplicat automat de browser sau îl puteţi
135

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.
name name Defineşte numele parametrului (pentru a fi STF
utilizat în script)
Atribute opţionale
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 şi nici-un atribut pentru evenimente.
id
Tagul <pre>
Tagul defineşte un text pre-formatat.
Textul din elementul pre este afişat cu un font cu pas fix (uzual Courier), şi
păstrează spaţiile şi întreruperile de linie.
Obs: Utilizaţi elementul pre pentru a afişa coduri de calculator (cum ar fi
secvenţe de programe).
Atribute
Atribute standard: class, dir
pentru evenimente: , id
, lang
onclick , ,ondblclick
style, title , xml:lang ,
, onmousedown
Tagul <q>

Tagul defineşte un citat scurt.
Browserul va afişa citatul între ghilimele..
Atribute opţionale
cite URL Specifică sursa citatului STF
136

Tagul <script>

Tagul este utilizat pentru a defini un script client, cum ar JavaScript.
Elementul script fie conţine instrucţiunile scriptului, fie adresează un script
dintr-un fişier extern cu atributul src.
Atributul obligatoriu type specifică tipul MIME al scriptului.
În general, JavaScript se foloseşte pentru gestionarea imaginilor, validarea
formularelor şi schimbări dinamice ale conţinutului.
Atribute opţionale
charset charset Specifică tipul de codare utilizat în fişierul externSTF
de script
defer defer Specifică că execuţia scriptului va fi amânată STF
până când pagina este încărcată
src URL Specifică URL-ul fişierului script extern STF
xml:space preserve Specifică care spaţii albe din cod trebuie păstrate
Tagul nu suportă atribute standard sau pentru evenimente.
Tagul <select>
Tagul este utilizat pentru a crea o listă de selecţie (o listă drop-down).
Tagul <option> din elementul select defineşte opţiunile disponibile din
listă.
Obs: Elementul select este un control pentru formulare şi poate fi utilizat
într-un formular pentru a colecta informaţiile furnizate de utilizator.
Atribute opţionale
multiple disabled Specifică dacă lista drop-down este dezactivată STF

disabled
multiple Specifică că pot fi selectate opţiuni multiple STF
name name Specifică numele listei STF
size number Specifică numărul de opţiuni vizibile în listă STF
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 porţiuni de text sau de document în vederea
formatării cu ajutorul stilurilor sau în vederea manipulării conţinutului cu
JavaScript.
Tagul <style>

Tagul defineşte informaţii de stil pentru un document HTML.
Elementul style specifică cum vor arăta elementele HTML în browser.
Atributul obligatoriu type defineşte conţinutul elementului style. Singura
valoare posibilă este "text/css".
Elementul style se scrie întotdeauna în secţiunea head
Tip: Pentru a utiliza . <link>
o foaie externă de stiluri, utilizaţi tagul .
Atribute opţionale
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> defineşte textul subscript care apare ca jumătate de caracter sub
linia de bază a textului (util pentru formule chimice).
Tagul <sup> defineşte textul superscript care apare ca jumătate de caracter
deasupra liniei textului (util pentru note de subsol).
Tagul <table>
Tagul defineşte un tabel HTML.
Un tabel HTML simplu constă în elementul table şi unul sau mai multe
elemente tr, th, şi td .
Elementul tr defineşte o linie din tabel, elementul th defineşte un cap de tabel
şi elementul td
defineşte o celulă din tabel.
Tabelele
thead mai complexe
, tfoot şi tbodypot
. include elementele
caption, col, colgroup,
Atribute opţionale
border ixels Specifică lăţimea chenarului din jurul tabelului STF
cellpadding ixels Specifică spaţiul dintre chenarul celulei şi STF
conţinutul celulei
cellspacing ixels Specifică spaţiul 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 conţinutul tabelului STF
width ixels Specifică lăţimea unui tabel STF
%
Tagurile <tbody>
, <head> şi <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 conţinutul din corpul unui tabel.
Elementul tbody trebuie utilizat împreună cu elementele thead şi tfoot.
Elementul thead este utilizat pentru a grupa conţinutul din capul de tabel, iar
elementul tfoot este utilizat pentru a grupa conţinutul din subsolul unui tabel
HTML.
Obs: Elementul <tfoot> trebuie să apară în descrierea tabelului înaintea
aelementului <tbody>
primi toate , astfel încât browserul să poată reda subsolul înainte de
liniile de date.
Atribute opţionale
align right Aliniază conţinutul din elementul tbody STF
left
center
ustify
char
number Aliniază
Specificăconţinutul
numărul dedincaractere
tbody lacuuncare
caracter STF
char
charoff character conţinutul STF
elementului tbody va fi aliniat faţă de caracterul
specificat cu atributul char
valign top Aliniază vertical conţinutul din elementul tbody STF
middle
bottom
baseline
Tagurile <td> şi <th>
Tagul <td> defineşte o celulă standard dintr-un tabel HTML.
Tagul <th> defineşte o celulă de titlu dintr-un tabel HTML.
Un tabel HTML are două tipuri de celule:

Celule de th
elementul titlu
) – conţin informaţiile din capul tabelului (create cu
141

 Celule standard – conţin date (create cu elementul td )
Textul dintr-o celulă de titlu este îngroşat şi centrat.
Textul dintr-o celulă standard este normal şi aliniat la stânga.
Obs: Utilizaţi atribute colspan şi rowspan pentru a lăsa conţinutul să se
întindă pe mai multe coloane sau linii.
Atribute opţionale
abbr text Specifică o versiune abreviată pentru STF
conţinutul unei celule
align left Aliniază conţinutul unei celule STF
right
center
ustify
char
axis category_name Încadrează celula într-o categorie STF
char character Aliniază conţinutul celulei la un caracter STF
charoff number Specifică numărul de caractere cu care STF
conţinutul celulei va fi aliniat faţă de caracterul
specificat cu atributul char
colspan number Specifică numărul de coloane pe care se întinde STF
o celulă
headers headercells'_id Specifică titlurile din tabel relaţionate cu o STF
rowspan number celulă

Specifică numărul de linii pe care se întinde o STF
celulă
scope col Defineşte un mod de asociere între celule de STF
colgroup titlu şi celulele de date
row
rowgroup
valign top Aliniază vertical conţinutul unei celule STF
middle
bottom
baseline
Tagul <textarea>

Tagul defineşte o zonă de text multi-linie pentru informaţia introdusă de
utilizator.
142
O zonă de text poate păstra un număr nelimitat de caractere şi textul este afişat
cu un font cu pas fix (uzual Courier).
Mărimea elementului textarea poate fi specificată cu atributele cols şi
rows, sau cu proprietăţile CSS height şi width.
cols number Specifică lăţimea vizibilă a elementului STF
rows number Specifică numărul vizibil de linii din element STF
Atribute opţionale
disabled disabled Specifică că elementul textarea este STF
dezactivat
name
readonly name_of_textarea
readonly Specifică
Specifică numele elementului
că elementul este read-only STF
STF
Atribute standard: accesskey, class, dir, id , lang, style,
Atribute pentru evenimente: onblur, onchange, onclick,
ondblclick, onfocus, onmousedown, onmousemove, onmouseout,
Tagul
Tagul <title>
defineşte titlul unui document.
Elementul title este obligatoriu în documentele HTML/XHTML.
Elementul title:
 Defineşte un titlu în bara de instrumente (toolbar-ul) browserului
 Furnizează un titlu pentru pagină când este adăugată în favorite
 Afişează un titlu pentru pagină în rezultatele furnizate de motoarele de
căutare
Tagul <tr>

Tagul defineşte o linie într-un tabel HTML.
Un element tr conţine unul sau mai multe elemente th sau td
.
Atribute opţionale
align right Aliniază conţinutul liniei STF
left
center
143
ustify
char
char character Aliniază conţinutul liniei la un caracter STF
charoff number Stabileşte numărul de caractere cu care va fi STF
aliniat conţinutul liniei faţă de caracterul precizat
cu atributul char
valign top Aliniază vertical conţinutul liniei STF
middle
bottom
baseline
Tagul <ul>

Tagul defineşte o listă neordonată.
Obs: Utilizaţi CSS pentru a defini tipul unei liste.
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
Hall, Ibrahim
2004 - Mastering the internet, xhtml and java script , Editura Prentice
Rick Darnel - Totul despre HTML 4, Editura Teora, 2000
Traian Anghel - Dezvoltarea aplicatiilor WEB folosind XHTML, PHP si

MySQL, Editura Polirom, 2005
Margareta Dina Draghici - Situri Web In HTML 4, Editura Tehnica, 2003
Tudor Sorin, Vlad Huţanu – Crearea şi programarea paginilor WEB, Editura

L&S Soft, 2006
http://www.ecursuri.ro
http://www.w3schools.com
http://www.tutorialehtml.com
145

Pdfslide - Tips - Curs HTML A5

Încărcat de

Informații document

Descriere:

Titlu original

Drepturi de autor

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?

Descriere:

Drepturi de autor:

Pdfslide - Tips - Curs HTML A5

Titlu original:

Încărcat de

Descriere:

Drepturi de autor:

5/26/2018 CursHTMLa5-slidepdf.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cum vedeţi codul HTML sursă al unei pagini web....................................24

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Liste de definiţii.......................................................................................... 58

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

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

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

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

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

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

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

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

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

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

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

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

21. ENTITĂŢILE DE TIP CARACTER...............................87

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

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

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

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

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

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

Cum procedaţi cu browserele vechi........................................................... 94

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

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

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

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

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

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

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

Cum instalaţi IIS în Windows Vista........................................................... 98

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

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