Documente Academic
Documente Profesional
Documente Cultură
I. HTML..............................................................................17
1. INTRODUCERE.............................................................17
Exemplu...................................................................................................... 17
Tagurile HTML.......................................................................................... 17
2. HTML – SĂ ÎNCEPEM...................................................18
Ce vă trebuie .............................................................................................. 18
Titluri ......................................................................................................... 18
Paragrafe.................................................................................................... 19
Link-uri ...................................................................................................... 19
Imagini ....................................................................................................... 19
Elementele HTML...................................................................................... 20
7
Elemente HTML vide ................................................................................. 21
Exemple de atribute.................................................................................... 22
7. PARAGRAFE ............................................................... 24
Exemple ...................................................................................................... 25
9. STILURI ........................................................................ 29
Exemple ...................................................................................................... 30
8
Atributul target ...................................................................................... 32
Atributul name........................................................................................... 32
Exemple ...................................................................................................... 33
11. IMAGINI.......................................................................36
Exemple ...................................................................................................... 37
Exemple ...................................................................................................... 43
13. LISTE...........................................................................57
Liste neordonate......................................................................................... 57
Liste ordonate............................................................................................. 57
Liste de definiţii.......................................................................................... 58
Exemple ...................................................................................................... 58
Exemple ...................................................................................................... 64
Layout cu tabele.......................................................................................... 76
Exemplu...................................................................................................... 77
Tagul frameset........................................................................................ 77
Tagul frame............................................................................................... 78
Exemple ...................................................................................................... 78
Exemple ...................................................................................................... 84
10
Taguri pentru stil ....................................................................................... 87
Exemple ...................................................................................................... 89
Exemple ...................................................................................................... 91
Linkuri HTML........................................................................................... 92
Scheme URL............................................................................................... 93
Tagul <noscript>................................................................................... 95
11
Taguri pentru scripturi .............................................................................. 95
Exemple ...................................................................................................... 95
II. XHTML.......................................................................... 99
2. DE CE XHTML?............................................................ 99
12
Atributul lang......................................................................................... 103
13
Tagul <body> .......................................................................................... 117
14
Tagul <iframe> ..................................................................................... 127
16
I. HTML
1. Introducere
Exemplu
<html>
<body>
</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
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
18
</body>
</html>
Paragrafe
Paragrafele HTML sunt definite cu tagul pereche <p>.
<html>
<body>
</body>
</html>
Link-uri
Link-urile HTML sunt definite cu tagul pereche <a>.
<html>
<body>
</body>
</html>
Obs: Adresa de link este precizată ca atribut.
Imagini
Imaginile HTML sunt definite cu tagul <img> (nepereche).
<html>
<body>
</body>
</html>
Obs: Numele şi dimensiunile imaginii sunt precizate ca atribute.
19
4. Elemente HTML
Documentele HTML sunt definite de elementele HTML.
Elementele HTML
Un element HTML este tot ce este scris între un tag de început şi un tag de
sfârşit.:
Tag de început Conţinutul elementului Tag de sfârşit
Acesta este un
<p> </p>
paragraf
<a
href="default.htm" Acesta este un link </a>
>
<br />
</body>
</html>
Acest exemplu conţine 3 elemente HTML:
Elementul <p>:
<p>Acesta este primul meu paragraf</p>
Elementul <p> defineşte un paragraf într-un document HTML.
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)
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>
</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>
</body>
</html>
Obs: Browserele adaugă automat o linie vidă înainte şi după un titlu.
Liniile HTML
Tagul <hr/> este utilizat pentru a crea o linie orizontală.
Exemplu:
<html>
<body>
</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>
</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
<address> Adresă
<blockquote> Citat lung
<q> Citat scurt
<cite> Citat
<dfn> Definiţie
Exemple
Exemplul 1
Ilustrează cum puteţi formata textul într-un document HTML.
<html>
<body>
</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>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Exemplul 3
Ilustrează utilizarea diferitelor taguri pentru coduri computer.
<html>
<body>
<p>
<b>Note:</b> Aceste taguri sunt uzual folosite pentru
a afisa
linii de program.
</p>
</body>
</html>
Exemplul 4
Ilustrează cum se scrie o adresă într-un document HTML.
26
<html>
<body>
<address>
Amelia Popescu<br>
Aleea Zorilor nr.156<br>
Botosani<br>
Romania
</address>
</body>
</html
Exemplul 5
Ilustrează cum se utilizează acronimele şi abrevierile.
<html>
<body>
</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>
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>
Un citat scurt:
<q>Acesta este un citat scurt.</q>
</body>
</html>
Exemplul 8
Ilustrează cum se marchează un text care a fost şters sau inserat într-un
document.
<html>
<body>
<p>
O duzina are
<del>douazeci</del>
<ins>douasprezece</ins>
elemente
</p>
28
<p>Cele mai multe browsere vor afisa textul sters ca
taiat si
textul inserat ca subliniat.
</p>
</body>
</html>
9. Stiluri
Atributul style este nou în HTML şi introduce CSS –ul în HTML.
<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>
</body>
</html>
Exemple
Culoare background:
Atributul style defineşte un stil pentru elementul <body>.
<html>
<body style="background-color:yellow">
</body>
</html>
</body>
</html>
Alinierea textului:
Atributul style defineşte un stil pentru elementul <h1>.
<html>
<body>
</body>
</html>
10. Linkuri
Un link este „adresa” unui document sau resurse de pe web.
Atributul href
Defineşte „adresa” legăturii.
Elementul <a> următor defineşte o legătură către Gmail:
<a href="http://www.gmail.com/">Serviciul e-mail
Google!</a>
Codul de mai sus va fi afişat de browser astfel:
Serviciul e-mail Google!
Atributul target
Atributul defineşte unde se va deschide documentul referit de link.
Codul următor va deschide documentul într-o nouă fereastră:
<html>
<body>
<p>
Dacă atributul target este "_blank",documentul
referit va fi deschis intr-o noua fereastra.
</p>
</body>
</html>
Atributul name
Când este folosit atributul name, elementul <a> defineşte o ancoră în interiorul
unui document HTML. Ancorele nu sunt afişate într-un mod special, ele sunt
invizibile pentru cititor.
Sintaxa de definire a unei ancore este:
<a name="label">Orice continut</a>
Exemple:
O ancoră în interiorul unui document HTML:
32
<a name="tips">Sectiunea de Sfaturi Utile</a>
Exemple
Exemplul 1
Ilustrează cum putem folosi o imagine ca link.
<html>
<body>
<a href="mypage.htm">
<img src="smiley.gif" alt="Tutoriale" width="32"
height="32" />
</a>
</p>
<a href="mypage.htm">
<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>
<h2>Capitolul 1</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 2</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 3</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 5</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 6</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 7</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 8</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 9</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 11</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 12</h2>
<p>Acest capitol explica ............</p>
34
<h2>Capitolul 13</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 14</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 15</h2>
<p>Acest capitol explica ............</p>
</body>
</html>
Exemplul 3
Ilustrează cum puteţi ieşi dacă pagina se blochează într-un cadru.
<html>
<body>
</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.
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>
</body>
</html>
Exemplul 3
Ilustrează cum se adăugă o imagine de fundal (background) unei pagini HTML.
<html>
<body background="background.jpg">
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>O imagine
<img src="hackanm.gif" width="48" height="48" />
in text.</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>
<img src="hackanm.gif" width="20" height="20" />
</p>
<p>
<img src="hackanm.gif" width="45" height="45" />
</p>
<p>
<img src="hackanm.gif" width="70" height="70" />
</p>
</body>
</html>
Exemplul 7
Ilustrează cum se foloseşte o imagine drept link.
40
<html>
<body>
</body>
</html>
Exemplul 8
Ilustrează cum se creează o imagine mapată în care fiecare zonă este un
hiperlink.
<html>
<body>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
alt="Soarele" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercur"
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm" />
</map>
</body>
</html>
12. Tabele
Tabelele se definesc cu tagul <table>. Un tabel este împărţit în linii (cu tagul
<tr>), şi fiecare linie este împărţită în celule de date (cu tagul <td>). Notaţia
td înseamnă "table data", conţinutul unei celule din tabel. O celulă poate
conţine text, imagini, liste, paragrafe, formulare, linii orizontale, alt tabel , etc.
41
Exemplu:
<table border="1">
<tr>
<td>linia 1, celula 1</td>
<td>linia 1, celula 2</td>
</tr>
<tr>
<td>linia 2, celula 1</td>
<td>linia 2, celula 2</td>
</tr>
</table>
Atributul border
Dacă atributul border nu este specificat, tabelul va fi afişat fără chenare
(borduri). Pentru a afişa un tabel cu chenare trebuie utilizat atributul border.
Denumirea coloanelor
Crearea unei celule de titlu se face cu tagul <th>. Textul dintr-o celulă de titlu
este îngroşat şi centrat.
Exemplu:
<table border="1">
<tr>
<th>Un titlu</th>
<th>Alt titlu</th>
</tr>
<tr>
<td>linia 1, celula 1</td>
<td>linia 1, celula 2</td>
</tr>
<tr>
<td>linia 2, celula 1</td>
<td>linia 2, celula 2</td>
</tr>
</table>
Celule goale
Cele mai multe browsere nu afişează prea bine celulele din tabel care nu au
conţinut. Pentru a corecta acest lucru, adăugaţi un non-breaking space
( ) în celula vidă şi chenarul se va afişa corect.
Exemplu:
<table border="1">
<tr>
42
<td>linia 1, celula 1</td>
<td>linia 1, celula 2</td>
</tr>
<tr>
<td>linia 2, celula 1</td>
<td> </td>
</tr>
</table>
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>
</body>
</html>
Exemplul 2
Ilustrează utilizarea diferitelor tipuri de borduri.
<html>
<body>
</body>
</html>
Exemplul 3
Ilustrează cum se creează un tabel fără borduri.
<html>
<body>
</body>
</html>
Exemplul 4
Ilustrează cum se afişează titlurile coloanelor şi ale liniilor.
<html>
<body>
</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>
</body>
</html>
Exemplul 8
Ilustrează cum se pot defini alte elemente în interiorul unor tabele.
<html>
<body>
<table border="1">
<tr>
<td>
<p>Un paragraf</p>
<p>Alt paragraf</p>
</td>
<td>Aceasta celula contine un tabel:
49
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Aceasta celula contine o lista
<ul>
<li>mere</li>
<li>banane</li>
<li>ananas</li>
</ul>
</td>
<td>Buna Ziua</td>
</tr>
</table>
</body>
</html>
Exemplul 9
Ilustrează folosirea atributului cellpadding pentru a crea mai mult 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>
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>
</body>
</html>
52
Exemplul 12
Ilustrează cum se adaugă un fundal uneia sau mai multor celule din tabel.
<html>
<body>
</body>
</html>
Exemplul 13
Ilustrează utilizarea atributului "align" pentru a alinia conţinutul celulelor
tabelului.
<html>
<body>
53
<td align="left">Mancare</td>
<td align="right">730.40 RON</td>
<td align="right">650.00 RON</td>
</tr>
<tr>
<th align="left">Total</th>
<th align="right">1001.50 RON</th>
<th align="right">744.65 RON</th>
</tr>
</table>
</body>
</html>
Exemplul 14
Ilustrează utilizarea atributului "frame" pentru a controla chenarul exterior al
tabelului.
<html>
<body>
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>
</body>
</html>
56
Exemplul 15
Ilustrează cum se folosesc atributele "frame" şi "border" pentru a controla
chenarul exterior al tabelului.
<html>
<body>
</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>
Browserul afişează lista de mai sus astfel:
1. Cafea
2. Lapte
Într-o listă ordonată sau neordonată pot să apară paragrafe, întreruperi de linie
(line break), imagini, linkuri, alte liste, etc.
Liste de definiţii
O listă de definiţii este o listă de termeni împreună cu descrierea lor.
O listă de definiţii începe cu tagul <dl> (definition list).
Fiecare termen din listă începe cu tagul <dt> (definition term).
Fiecare descriere începe cu tagul <dd> (definition description).
Exemplu:
<dl>
<dt>Cafea</dt>
<dd>Bautura neagra fierbinte</dd>
<dt>Lapte</dt>
<dd>Bautura alba rece</dd>
</dl>
Browserul afişează lista de mai sus astfel:
Cafea
Bautura neagra fierbinte
Lapte
Bautura alba rece
În tagul <dd> pot apare paragrafe, întreruperi de linie (line break), imagini,
linkuri, alte liste, etc.
Exemple
Exemplul 1
Ilustrează utilizarea diferitelor tipuri de liste ordonate.
<html>
<body>
</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>
</body>
</html>
Exemplul 3
Ilustrează cum pot fi create liste imbricate (nested lists).
<html>
<body>
Exemplul 4
Un alt exemplu de listă imbricată.
<html>
<body>
</body>
</html>
Exemplul 5
Ilustrează utilizarea unei liste de definiţii.
<html>
<body>
</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.
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>
În browser formularul arată astfel:
Masculin
Feminin
Observaţi că numai o opţiune poate fi selectată la un moment dat.
Căsuţe de validare
Căsuţele de validare se folosesc atunci când utilizatorul poate să selecteze una
sau mai multe opţiuni dintr-o listă posibilă.
Exemplu:
<form>
Am pisica:
<input type="checkbox" name="pet" value="Pisica" />
<br />
Am caine:
<input type="checkbox" name="pet" value="Caine" />
<br />
Am papagal:
<input type="checkbox" name="pet" value="Papagal" />
</form>
În browser formularul arată astfel:
Am pisica:
Am caine:
Am papagal:
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>
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ă.
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ă cum pot fi create căsuţe de validare pe care utilizatorul le poate
selecta sau deselecta.
<html>
<body>
<form action="">
Am pisica:
<input type="checkbox" name="pet" value="Pisica">
<br />
Am caine:
<input type="checkbox" name="pet" value="Caine">
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="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat"
selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Exemplul 7
Ilustrează cum se poate crea o zonă de text multi-linie (text area) în care user-ul
poate scrie un număr nelimitat de caractere.
<html>
<body>
</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>
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>
<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>
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">
</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 #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
73
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
74
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
75
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Deoarece această listă nu este recunoscută de W3C, dacă doriţi documente
HTML sau CSS valide, folosiţi în loc de numele culorii valoarea ei
hexazecimală.
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.
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>
</tr>
</table>
</body>
</html>
Tagul frameset
Tagul <frameset> defineşte cum este împărţită fereastra în cadre
Fiecare frameset defineşte un set de linii sau un set de coloane
Valoarea liniilor/coloanelor reprezintă porţiunea de ecran pe care o va
ocupa fiecare linie/coloană.
77
Tagul frame
Tagul <frame> defineşte ce document HTML va fi afişat în fiecare
cadru
În exemplul următor este definit un frameset cu două coloane. Prima
coloană este setată la 25% din lăţimea ferestrei, iar a doua coloană la 75% din
lăţimea ferestre. Documentul "frame_a.htm" va fi deschis în prima coloană, iar
"frame_b.htm" în a doua coloană:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Obs: Dimensiunea unei coloane din frameset poate fi dată în pixeli
(cols="200,500"), şi una dintre coloane poate fi setată la spaţiul rămas
(cols="25%,*").
Dacă un cadru are borduri vizibile, utilizatorul poate redimensiona cadrul
trăgând cu mouse-ul de acestea. Pentru a împiedica acest lucru, puteţi adăuga
atributul noresize="noresize" în tagul <frame>. Pentru browserele
care nu recunosc cadrele, adăugaţi tagul <noframes>.
Exemple
Exemplul 1
Ilustrează proiectarea unui frameset vertical cu trei documente diferite.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
78
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Exemplul 2
Ilustrează proiectarea unui frameset orizontal cu trei documente.
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Exemplul 3
Ilustrează utilizarea tagului <noframes> pentru browserele care nu recunosc
cadrele.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>
<body>Browserul dvs. nu recunoaste cadrele!</body>
</noframes>
</frameset>
</html>
Exemplul 4
Ilustrează proiectarea unui frameset cu trei documente şi cum se combină
liniile şi coloanele.
79
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>
Exemplul 5
Ilustrează utilizarea atributului noresize astfel încât utilizatorul să nu poată
redimensiona cadrele.
<html>
<frameset rows="50%,50%">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
Exemplul 6
Ilustrează cum se proiectează un cadru de navigare. Cadrul de navigare conţine
o listă de linkuri care au al doilea cadru drept target. Fişierul numit
"nav_frame.htm" conţine trei link-uri care au următorul cod sursă:
<a href ="frame_a.htm" target ="showframe">Cadrul
a</a><br>
<a href ="frame_b.htm" target ="showframe">Cadrul
b</a><br>
<a href ="frame_c.htm" target ="showframe">Cadrul
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>
</body>
</html>
Exemplul 8
Acest exemplu conţine două cadre. Unul din cadre se deschide la o anumită
secţiune dintr-un fişier specificată prin <a name="C10"> în pagina
"link.htm".
<html>
<frameset cols="20%,80%">
<frame src="frame_a.htm">
<frame src="link.htm#C10">
</frameset>
</html
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>
82
Atribut Exemplu Descriere
Defineşte dimensiunea
size="number" size="2"
fontului
Măreşte cu 1 dimensiunea
size="+number" size="+1"
fontului
Micşorează cu 1 dimensiunea
size="-number" size="-1"
fontului
face="face-name" face="Times" Defineşte numele fontului
color="color-
color="#eeff00" Defineşte culoarea fontului
value"
color="color-
color="red" Defineşte culoarea fontului
name"
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>
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>
<h1>Acesta este un titlu 1</h1>
<h3>Acesta este un titlu 3</h3>
</body>
</html>
Exemplul 2
Ilustrează crearea unui link nesubliniat folosind atributul style.
<html>
<body>
<a href="last.htm"
style="text-decoration:none">
Este un LINK!
</a>
</body>
</html>
Exemplul 3
Ilustrează cum se foloseşte tagul <link> pentru a accesa o foaie externă de
stiluri.
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css" >
</head>
<body>
<h1>Text formatat cu o foaie externa de stiluri</h1>
85
<p>La fel!</p>
</body>
</html>
Stiluri inline
Stilul inline se foloseşte când un anumit stil se aplică unui element care apare o
singură dată în document.
În acest caz, atributul style se aplică în tagul elementului respectiv şi poate
conţine orice proprietăţi CSS. Exemplul următor ilustrează cum se schimbă
culoarea şi marginea stângă pentru un paragraf:
<p style="color: red; margin-left: 20px">
Acesta este un paragraf.
</p>
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
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>
</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ă ® ®
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.
Exemple
Exemplul 1
Informaţia title din elementul head nu este afişată în fereastra browserului.
<html>
<head>
<title>Acest titlu nu este afisat</title>
</head>
<body>
<p>Acest text este afisat.</p>
</body>
</html>
Exemplul 2
Ilustrează cu se foloseşte tagul base astfel încât toate linkurile din pagină să se
deschidă într-o fereastră nouă.
<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a href="http://www.yahoo.com" target="_blank">Acest
link</a>
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>
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.
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
93
Descărcarea cu FTP
Următorul cod HTML:
<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.)
25. Scripturi
Pentru a face paginile HTML mai dinamice şi mai interactive, puteţi adăuga
scripturi.
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Acest script determină afişarea următorului mesaj:
Hello World!
94
browser nou va înţelege că scriptul trebuie executat, chiar dacă este inclus în
taguri de comentariu.
Exemplu:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
Tagul <noscript>
Acest tag este utilizat pentru a defini un text alternativ dacă scriptul nu poate fi
executat. Se foloseşte pentru browserele care recunosc tagul <script>, dar
nu acceptă limbajul în care este scris. În această situaţie, browserele vor afişa
textul din tagul <noscript>. Tagul va fi ignorat de browserele care pot
executa scriptul.
Exemplu:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>Browserul dvs. nu poate executa
JavaScript!</noscript>
Exemple
Exemplul 1
Ilustrează cum inseraţi un script Java într-un document HTML.
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
95
</script>
</body>
</html>
Exemplul 2
Ilustrează cum trebuie procedat cu browserele care nu recunosc scripturile.
<html>
<body>
<script type="text/javascript">
<!--
document.write("Daca acest text este afisat,
browserul dvs. recunoaste scripturile!")
//-->
</script>
<p>
Un browser care nu accepta JavaScript va afisa textul
din elementul noscript.
</p>
</body>
</html>
96
onload script Scriptul va fi executat când documentul se
încarcă
onunload script Scriptul va fi executat când documentul nu se
încarcă
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
II. XHTML
1. Ce este XHTML?
Pentru a putea înţelege XHTML, trebuie să aveţi cunoştinţe elementare despre
HTML şi proiectarea paginilor web.
XHTML este abrevierea pentru EXtensible HyperText Markup
Language
XHTML este aproape identic cu HTML 4.01
XHTML este o versiune mai strictă şi mai curată a HTML-ului
XHTML este HTML definit ca o aplicaţie XML
XHTML este o recomandare a consorţiului W3C
Toate browserele recunosc XHTML
2. De ce XHTML?
XHTML este o combinaţie între HTML şi XML (EXtensible Markup
Language).
XHTML constă în toate elementele din HTML 4.01, combinate cu sintaxa
strictă din XML.
Multe pagini internet conţin cod HTML „rău”.
Următorul cod va funcţiona corect într-un browser, chiar dacă nu respectă
regulile HTML:
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.
100
<li>Lapte</li>
</ul>
101
</BODY>
4. Sintaxa XHTML
Reguli suplimentare privind sintaxa XHTML
Atributele trebuie scrise cu litere mici
Valorile atributelor trebuie scrise între ghilimele
Minimizarea atributelor este interzisă
Atributul id înlocuieşte numele atributului
Declaraţia DOCTYPE este obligatorie
Aceasta este o listă cu atribute minimizate în HTML şi cum ar trebui ele scrise
în XHTML:
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
Atributul lang
Acest atribut se aplică aproape fiecărui element XHTML. El specifică limba în
care este scris conţinutul unui element.
Dacă utilizaţi atributul lang într-un element, trebuie să adăugaţi şi atributul
xml:lang, ca în exemplul următor:
<div lang="it" xml:lang="it">Ciao bella!</div>
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.
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.
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 Defineşte elementul iframe
Image Module Defineşte elementul img
Intrinsic Events Module Defineşte atributele evenimentelor, ca onblur şi
onchange
Legacy Module Defineşte elementele şi atributele depăşite*
Link Module Defineşte elementul link
List Module Defineşte elementele pentru liste ol, li, ul, dd, dt, şi
dl
Metainformation Module Defineşte elementul meta
Name Identification 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.
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> Defineşte un citat lung STF
<body> Defineşte corpul documentului STF
<br /> Defineşte o întrerupere de linie STF
<button> Defineşte un buton ce poate fi apăsat STF
<caption> Defineşte titlul unui tabel STF
<cite> Defineşte un citat STF
<code> Defineşte un text tip cod de calculator STF
<col /> Defineşte valorile atributelor pentru una 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 un element dintr-o listă de STF
definiţii
<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> Defineşte un cadru inline TF
<img /> Defineşte o imagine STF
<input /> Defineşte un control de intrare STF
<ins> Defineşte un text inserat STF
<kbd> Defineşte un text de la tastatură STF
<label> Defineşte eticheta unui element de intrare STF
<legend> Defineşte un titlu pentru un element 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> Defineşte un text preformatat STF
<q> Defineşte un citat scurt STF
<samp> Defineşte un model de cod de calculator STF
<script> Defineşte un script pentru client STF
<select> Defineşte o listă de selecţie (o listă drop- 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> Grupează conţinutul corpului unui tabel STF
<td> Defineşte o celulă dintr-un tabel STF
<textarea> Defineşte un control de intrare multi-linie STF
<tfoot> Grupează conţinutul subsolului unui tabel STF
<th> Defineşte o celulă de tip titlu într-un tabel STF
<thead> Grupează conţinutul de tip titlu dintr-un 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-->
Declaraţia <!DOCTYPE>
Exemplu de document cu o declaraţie de XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
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 ).
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ă relaţia dintre documentul curent STF
şi documentul referit
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 referit
_self
_top
framename
Atribute standard
Atribut Valoare Descriere DTD
accesskey character Specifică o tastă (shortcut) pentru a accesa STF
elementul
class classname Specifică numele clasei unui element STF
dir rtl Specifică 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
Atribut Valoare Descriere DTD
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.
Atribute standard: class, dir, id, lang, style, title, xml:lang
114
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <address>
Exemplu:
<address>
Proiectat de Web Design co.<br />
<a href="mailto: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 ca acesta să poată fi contactat de utilizator. Uzual, acest
element se adaugă în antetul sau subsolul paginii web.
Obs. În toate browserele, conţinutul elementului este afişat în italic şi, uzual,
browserul va adăuga o întrerupere de linie înainte şi după elementul adresă.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <area>
Tagul defineşte o zonă dintr-o imagine mapată (o imagine cu zone ce pot fi
acţionate cu un click de mouse).
Elementul este scris întotdeauna în interiorul tagului <map>.
Obs: Atributul usemap din tagul <img> este asociat cu atributul name al
elementului map şi creează o relaţie între imagine şi hartă.
Obs. În HTML <area> nu are tag de închidere, dar în HTML tagul <area>
trebuie închis corect. În XHTML tagul trebuie să aibă neapărat atributul alt
care specifică un text alternativ pentru zona definită.
Atribute opţionale
Atribut Valoare Descriere DTD
coords coordinates Specifică coordonatele zonei STF
href URL Specifică destinaţia unui link din zonă STF
nohref nohref Specifică faptul că zona nu are un link 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
Tagul <base>
Tagul specifică o adresă sau o destinaţie implicită pentru toate linkurile dintr-o
pagină şi trebuie scris în interiorul elementului <head>. În HTML <base>
nu are tag de închidere, dar în XHTML trebuie închis corect.
Atribute
Atribut Valoare Descriere DTD
href URL Specifică un URL de bază pentru toate URL-urile STF
relative din pagină
target _blank Specifică unde se vor deschide toate linkurile din TF
_parent pagină
_self
_top
framename
Tagul nu are atribute standard sau de evenimente.
Tagul <bdo>
Tagul permite specificarea direcţiei textului şi suprascrie algoritmul
bidirecţional. Are obligatoriu atributul dir care specifică direcţia textului din
interiorul elementului, cu valorile posibile ltr şi rtl.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Tagul nu are atribute de evenimente.
Tagul <blockquote>
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
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <body>
Tagul defineşte corpul documentului.
Atribute standard: class, dir, id, lang, style, tabindex, title,
xml:lang
Atribute pentru evenimente
Attribute Value Description DTD
onclick script Script executat pentru un click de mouse STF
ondblclick script Script executat pentru un dublu click de 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
Atribut Valoare Descriere DTD
disabled disabled Specifică că butonul este dezactivat STF
name name Specifică numele butonului STF
type button Specifică tipul butonului STF
reset
submit
value text Specifică valoarea care va trimisă de STF
browser
Atribute standard: accesskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onblur, onclick, ondblclick,
onfocus, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onkeydown, onkeypress, onkeyup
Tagul <caption>
Tagul defineşte titlul unui tabel şi trebuie inserat în document imediat după
tagul <table>. Puteţi specifica un singur titlu pentru un tabel. Uzual titlul va
fi centrat în raport cu tabelul.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <col>
Exemplu:
<html>
<body>
</body>
</html>
Tagul defineşte valorile atributelor pentru una sau mai multe coloane dintr-un
tabel.
Tagul este util pentru a aplica un stil întregii coloane, în loc de a repeta stilul
pentru fiecare linie şi celulă.
Tagul poate fi utilizat numai în interiorul unui element table sau colgroup.
Deşi în HTML <col> nu are tag de închidere, în XHTML tagul trebuie închis
corect.
Obs: Dacă adăugaţi atributul class în tagul <col>, atunci puteţi formata
coloanele cu CSS.
119
Atribute opţionale
Attribute Value Description DTD
align left Specifică alinierea conţinutului coloanei STF
right
center
justify
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
pixels
relative_length
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <colgroup>
Exemplu:
<html>
<body>
</body>
</html>
Tagul este utilizat pentru formata un grup de coloane dintr-un tabel.
Tagul este util pentru a aplica un stil întregii coloane, în loc de a repeta stilul
pentru fiecare linie şi celulă.
Tagul poate fi utilizat numai în interiorul unui element table.
Obs: Dacă adăugaţi atributul class în tagul <colgroup>, atunci puteţi
formata coloanele cu CSS.
Atribute opţionale: aceleaşi ca la tagul <col>
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <dd>
Tagul descrie un element (item) dintr-o listă de definiţii.
Tagul este utilizat împreună cu <dl> (care declară o listă de definiţii) şi <dt>
(care defineşte un termen din listă).
În interiorul tagului <dd> pot să apară paragrafe, întreruperi de linie, imagini,
liste, etc.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <del>
Tagul defineşte un text care a fost şters dintr-un document.
Obs: Folosiţi acest tag împreună cu tagul <ins> pentru a descrie actualizările
şi modificările făcute în document.
Atribute opţionale
121
Atribut Valoare Descriere DTD
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
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <div>
Exemplu:
<html>
<body>
<div style="color:#00FF00">
<h3>Acesta este un titlu dintr-o sectiune div</h3>
<p>Acesta este un paragraf dintr-o secţiune
div.</p>
</div>
</body>
</html>
Tagul defineşte o secţiune dintr-un document HTML şi este deseori utilizat
pentru a grupa elemente ce vor fi formatate cu stiluri.
Obs: Elementul div este utilizat frecvent împreună cu CSS pentru a formata
aspectul (layout) unei pagini web.
În mod normal, browserele afişează o întrerupere de linie înainte şi după un
element div.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <dl>
Tagul declară o listă de definiţii şi este utilizat împreună cu tagurile <dt> şi
<dd>.
Atribute standard: class, dir, id, lang, style, title, xml:lang
122
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <dt>
Tagul defineşte un item dintr-o listă de definiţii şi este utilizat împreună cu
tagurile <dl> şi <dd>.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <fieldset>
Exemplu:
<html>
<body>
<form>
<fieldset>
<legend>Date personale:</legend>
Nume: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Data nasterii: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
Tagul este utilizat pentru a grupa logic elementele unui formular.
Tagul desenează o casetă în jurul elementelor de formular grupate.
Tagul <legend> defineşte un titlu pentru elementul fieldset.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <form>
Tagul este utilizat pentru a crea formulare HTML pentru intrările utilizatorului.
Un formular poate conţine elemente de intrare, cum ar fi: câmpuri de text,
căsuţe de validare (checkbox), butoane radio, butoane de trimitere (submit) etc.
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
Atribut Valoare Descriere DTD
action URL Specifică unde se trimit datele din formular STF
când acesta este submis (submit)
Atribute opţionale
Atribut Valoare Descriere DTD
accept MIME_type Specifică tipurile de fişiere ce pot fi STF
uploadate prin intermediul formularului
accept- charset Specifică seturile de caractere din datele STF
charset formularului pe care serverul le poate
manevra
enctype application/x- Specifică cum trebuie codate datele din STF
www-form- formular înainte de a fi trimise la server
urlencoded
multipart/form-
data
text/plain
method get Specifică cum se trimit datele din formular STF
post
name name Specifică numele formularului TF
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup la care se adaugă atributele:
onreset script Script executat când formularul este resetat
onsubmit script Script executat când formularul este trimis (submit)
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> nu are tag de închidere, dar în XHML tagul trebuie închis
corect.
Obs: Dacă doriţi să validaţi o pagină care conţine cadre, fiţi siguri că
doctype este setat pe "Frameset DTD".
Important: Nu puteţi folosi elementul body împreună cu un element
frameset. Totuşi, dacă adăugaţi tagul <noframes> pentru browserele care
nu recunosc cadrele, va trebui să includeţi textul în elementul body.
Atribute opţionale
Atribut Valoare Descriere DTD
frameborder 0 Specifică dacă se afişează sau nu un F
1 chenar în jurul cadrului
longdesc URL Specifică o pagină care conţine descrierea F
extinsă a conţinutului cadrului
marginheight pixels Specifică marginile de sus şi de jos ale F
cadrului
marginwidth pixels 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
Atribut Valoare Descriere DTD
cols pixels Specifică numărul şi dimensiunea coloanelor F
% din frameset
125
*
rows pixels Specifică numărul şi dimensiunea liniilor F
% din frameset
*
Atribute standard: class, id, style, title
Atribute pentru evenimente: onload, onunload
Tagul <head>
Acest element este un container pentru toate elementele care se plasează aici:
scripturi, informaţii despre foile de stil, meta informaţii etc.
În secţiunea head pot fi adăugate următoarele taguri: <base>, <link>,
<meta>, <script>, <style> şi <title>.
Tagul <title> defineşte titlul documentului şi este singurul obligatoriu din
această secţiune.
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute eveniment.
Tagul <hr>
Tagul creează o linie orizontală într-o pagină web care poate fi folosită pentru a
separa conţinutul.
Deşi în HTML <hr> nu are tag de închidere, în XHTML tagul se închide
astfel: <hr />.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <html>
Tagul spune browserului că acesta este un document HTML. Este cel mai
exterior tag în HTML şi XHTML şi se mai numeşte element rădăcină.
Elementul doctype trebuie plasat în document înaintea elementului html.
126
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute eveniment.
Tagul <iframe>
Tagul defineşte un cadru inline care conţine un alt document.
Obs: Pentru browserele care nu recunosc acest tag, plasaţi textul dorit între
tagurile <iframe> şi </iframe>.
Atribute opţionale
Atribut Valoare Descriere DTD
frameborder 1 Specifică dacă se afişează un chenar sau nu în TF
0 jurul elementului
height pixels Specifică înălţimea elementului TF
%
longdesc URL Specifică o pagină care conţine o descriere TF
extinsă a conţinutului cadrului
marginheight pixels Specifică marginile de sus şi de jos ale TF
cadrului
marginwidth pixels 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 pixels Specifică lăţimea cadrului TF
%
Atribute standard: class, id, style, title
Tagul nu are atribute eveniment.
Tagul <img>
Tagul împachetează o imagine într-o pagină HTML. Practic, imaginea nu este
efectiv inserată în document, ci legată la pagina respectivă. Tagul <img>
creează un loc de stocare pentru imaginea referită. Tagul are două atribute
obligatorii: src şi alt.
În HTML <img> nu are tag de închidere, dar în XHTML el trebuie închis
corect.
Obs: Atributul alt este conceput să afişeze un text alternativ dacă imaginea
nu poate fi încărcată, nu un text afişat când mouse-ul trece peste imagine.
Pentru a afişa un text când mouse-ul trece peste o imagine sau peste o imagine
mapată, utilizaţi atributul title, ca în exemplul următor:
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.
Atribute obligatorii
Atribut Valoare Descriere DTD
alt text Specifică un text alternativ pentru imagine STF
src URL Specifică URL-ul imaginii STF
Atribute opţionale
Atribut Valoare Descriere DTD
height pixels Specifică înălţimea unei imagini STF
%
longdesc URL Specifică URL-ul unui document care conţine o STF
descriere extinsă a imaginii
usemap #mapname Specifică o imagine ca imagine mapată pentru STF
client
width pixels Specifică lăţimea unei imagini STF
%
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup, onabort(script executat când
încărcarea imaginii este întreruptă)
Tagul <input>
Tagul este utilizat pentru a selecta informaţia introdusă de utilizator.
Un câmp de intrare (input) poate fi un câmp de text, o căsuţă de validare, un
câmp de parolă, un buton radio, un buton etc.
În HTML <input> nu are tag de închidere, dar în XHTML tagul trebuie
închis astfel: <input/>.
Obs: Pentru a defini etichetele elementelor de intrare, utilizaţi tagul <label>.
Atribute opţionale
Atribut Valoare Descriere DTD
accept MIME_type Specifică tipul fişierelor care pot fi submise STF
(numai pentru type="file")
alt text Specifică un text alternativ pentru o imagine STF
(numai pentru type="image")
checked checked Specifică că elementul de intrare trebuie să fie STF
128
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 Specifică tipul unui element de intrare STF
checkbox
file
hidden
image
password
radio
reset
submit
text
value value Specifică valoarea unui element de intrare STF
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onblur, onchange (script executat când
elementul se modifică), onclick, ondblclick, onfocus,
onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onkeydown, onkeypress, onkeyup, onselect(script
executat când elementul este selectat)
Tagul <ins>
Tagul defineşte textul care a fost inserat într-un document.
Obs: Folosiţi-l împreună cu tagul <del> pentru a descrie actualizările şi
modificările făcute în document.
Atribute opţionale
Atribut Valoare Descriere DTD
cite URL Specifică URL-ul unui document care 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
Atribute standard: class, dir, id, lang, style, tabindex, title,
xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <label>
Defineşte eticheta unui element de intrare dintr-un formular.
Eticheta nu are un efect deosebit pentru utilizator, dar îmbunătăţeşte
accesibilitatea utilizatorilor de mouse. Dacă faceţi clic pe textul etichetei,
elementul respectiv este selectat.
Atribute opţionale
Atribut Valoare Descriere DTD
for element_id Specifică cărui element din formular îi STF
corespunde eticheta.
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onblur, onclick, ondblclick,
onfocus, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onkeydown, onkeypress, onkeyup
Tagul <legend>
Tagul defineşte titlul unui element fieldset.
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <li>
Tagul defineşte un item dintr-o listă ordonată sau neordonată.
Obs: Utilizaţi CSS pentru a defini tipul listei şi a elementelor din listă.
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
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
Atribut Valoare Descriere DTD
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
referit
media screen Specifică pe ce dispozitiv va fi afişat STF
tty documentul referit
tv
projection
handheld
print
braille
aural
all
rel 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 documentul curent
bookmark
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
frame_name
type MIME_type Specifică tipul MIME al documentului referit STF
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <map>
Tagul defineşte o imagine mapată (image-map) pentru client. Atributul name
este obligatoriu în elementul map.
Acest atribut este asociat cu atributul usemap al elementului <img> şi
creează o relaţie între imagine şi hartă (map).
Elementul map conţine un anumit număr de elemente area, care definesc
zonele din imaginea mapată ce pot fi activate cu mouse-ul.
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <meta>
Metadata este informaţia despre date..
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.
Atribute obligatorii
Atribut Valoare Descriere DTD
content text Specifică conţinutul meta-informaţiei STF
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute eveniment
Tagul <noframes>
Tagul este utilizat pentru browserele care nu recunosc cadrele.
Elementul noframes poate conţine toate elementele care apar uzual în
elementul body al unei pagini HTML.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <noscript>
Tagul este utilizat pentru a furniza un conţinut alternativ pentru utilizatorii care
au dezactivat scripturile în browser sau care au un browser care nu recunoaşte
scripturile client.
Elementul noscript poate conţine toate elementele care apar uzual în
elementul body al unei pagini HTML.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <object>
Exemplu:
<object classid="clsid:F08DF954-8592-11D1-B16A-
00C0F0283628" id="Slider1" width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
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 standard: class, dir, id, lang, style, tabindex, title,
xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <ol>
Tagul este utilizat pentru a crea o listă ordonată.
Obs: Utilizaţi CSS pentru a defini tipul listei..
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <optgroup>
Exemplu:
<html>
<body>
<select>
<optgroup label="Masini suedeze">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Masini germane">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
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.
Atribute obligatorii
Atribut Valoare Descriere DTD
label text Specifică o descriere pentru grupul de opţiuni STF
Atribute opţionale
Atribut Valoare Descriere DTD
disabled disabled Specifică că un grup de opţiuni este dezactivat STF
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <option>
Tagul defineşte o opţiune dintr-o listă de selecţie. Elementul option se scrie
în interiorul elementului select.
În HTML <option> nu are tag de închidere, dar în XTML tagul trebuie
închis corect.
Atribute opţionale
Atribut Valoare Descriere DTD
disabled disabled Specifică o opţiune dezactivată STF
label text Specifică o etichetă scurtă pentru o opţiune STF
selected selected Specifică că opţiunea este implicit selectată STF
value text Specifică valoarea care se trimite serverului când STF
formularul este submis.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <p>
Tagul defineşte un paragraf. Elementul creează în mod automat un spaţiu
înainte şi după paragraf. Spaţiul este aplicat automat de browser sau îl puteţi
specifica într-o foaie de stil
135
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <param>
Tagul este utilizat pentru a defini parametrii sau variabilele pentru un element
object sau applet.
În HTML elementul nu are tag de închidere, dar în XHTML trebuie închis
corect.
Atribute obligatorii
Atribut Valoare Descriere DTD
name name Defineşte numele parametrului (pentru a fi STF
utilizat în script)
Atribute opţionale
Atribut Valoare Descriere DTD
type MIME_type Specifică tipul MIME al parametrului STF
value value Specifică valoarea parametrului STF
valuetype data Specifică tipul valorii STF
ref
object
Tagul suportă numai atributul standard id şi nici-un atribut pentru evenimente.
Tagul <pre>
Tagul defineşte un text pre-formatat.
Textul din elementul pre este afişat cu un font cu pas fix (uzual Courier), şi
păstrează spaţiile şi întreruperile de linie.
Obs: Utilizaţi elementul pre pentru a afişa coduri de calculator (cum ar fi
secvenţe de programe).
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <q>
Tagul defineşte un citat scurt.
Browserul va afişa citatul între ghilimele..
Atribute opţionale
Atribut Valoare Descriere DTD
cite URL Specifică sursa citatului STF
136
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <script>
Tagul este utilizat pentru a defini un script client, cum ar JavaScript.
Elementul script fie conţine instrucţiunile scriptului, fie adresează un script
dintr-un fişier extern cu atributul src.
Atributul obligatoriu type specifică tipul MIME al scriptului.
În general, JavaScript se foloseşte pentru gestionarea imaginilor, validarea
formularelor şi schimbări dinamice ale conţinutului.
Atribute opţionale
Atribut Valoare Descriere DTD
charset charset Specifică tipul de codare utilizat în fişierul extern STF
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
Atribut Valoare Descriere DTD
disabled disabled Specifică dacă lista drop-down este dezactivată STF
multiple multiple Specifică că pot fi selectate opţiuni multiple STF
name name Specifică numele listei STF
size number Specifică numărul de opţiuni vizibile în listă STF
Atribute standard: class, dir, id, lang, style, tabindex, title,
xml:lang
Atribute pentru evenimente: onblur, onchange, onclick,
ondblclick, onfocus, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onkeydown, onkeypress, onkeyup
137
Tagul <span>
Exemplu:
<html>
<head>
<style type="text/css">
span.blue {color:lightskyblue;font-weight:bold}
span.green {color:darkolivegreen;font-weight:bold}
</style>
</head>
<body>
</body>
</html>
Tagul permite selectarea unei porţiuni de text sau de document în vederea
formatării cu ajutorul stilurilor sau în vederea manipulării conţinutului cu
JavaScript.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <style>
Tagul defineşte informaţii de stil pentru un document HTML.
Elementul style specifică cum vor arăta elementele HTML în browser.
Atributul obligatoriu type defineşte conţinutul elementului style. Singura
valoare posibilă este "text/css".
Elementul style se scrie întotdeauna în secţiunea head.
Tip: Pentru a utiliza o foaie externă de stiluri, utilizaţi tagul <link>.
Atribute opţionale
Atribut Valoare Descriere DTD
media screen Specifică stiluri pentru diferite tipuri de media STF
tty
tv
projection
handheld
print
braille
138
aural
all
Atribute standard: dir, lang, title, xml:lang
Tagul nu are atribute pentru evenimente.
Tagul <table>
Tagul defineşte un tabel HTML.
Un tabel HTML simplu constă în elementul table şi unul sau mai multe
elemente tr, th, şi td.
Elementul tr defineşte o linie din tabel, elementul th defineşte un cap de tabel
şi elementul td defineşte o celulă din tabel.
Tabelele mai complexe pot include elementele caption, col, colgroup,
thead, tfoot şi tbody.
Atribute opţionale
Atribut Valoare Descriere DTD
border pixels Specifică lăţimea chenarului din jurul tabelului STF
cellpadding pixels Specifică spaţiul dintre chenarul celulei şi STF
conţinutul celulei
cellspacing pixels 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 pixels Specifică lăţimea unui tabel STF
%
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
<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
elementului <tbody>, astfel încât browserul să poată reda subsolul înainte de
a primi toate liniile de date.
Atribute opţionale
Atribut Valoare Descriere DTD
align right Aliniază conţinutul din elementul tbody STF
left
center
justify
char
char character Aliniază conţinutul din tbody la un caracter STF
charoff number Specifică numărul de caractere cu care 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
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
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
Atribut Valoare Descriere DTD
abbr text Specifică o versiune abreviată pentru STF
conţinutul unei celule
align left Aliniază conţinutul unei celule STF
right
center
justify
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
celulă
rowspan number 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
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <textarea>
Tagul defineşte o zonă de text multi-linie pentru informaţia introdusă de
utilizator.
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.
Atribute obligatorii
Atribut Valoare Descriere DTD
cols number Specifică lăţimea vizibilă a elementului STF
rows number Specifică numărul vizibil de linii din element STF
Atribute opţionale
Atribut Valoare Descriere DTD
disabled disabled Specifică că elementul textarea este STF
dezactivat
name name_of_textarea Specifică numele elementului STF
readonly readonly Specifică că elementul este read-only STF
Atribute standard: accesskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onblur, onchange, onclick,
ondblclick, onfocus, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onkeydown, onkeypress, onkeyup
Tagul <title>
Tagul defineşte titlul unui document.
Elementul title este obligatoriu în documentele HTML/XHTML.
Elementul title:
Defineşte un titlu în bara de instrumente (toolbar-ul) browserului
Furnizează un titlu pentru pagină când este adăugată în favorite
Afişează un titlu pentru pagină în rezultatele furnizate de motoarele de
căutare
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute pentru evenimente.
Tagul <tr>
Tagul defineşte o linie într-un tabel HTML.
Un element tr conţine unul sau mai multe elemente th sau td.
Atribute opţionale
Atribut Valoare Descriere DTD
align right Aliniază conţinutul liniei STF
left
center
143
justify
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
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <ul>
Tagul defineşte o listă neordonată.
Obs: Utilizaţi CSS pentru a defini tipul unei liste.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup,
onkeydown, onkeypress, onkeyup
144
Bibliografie
Teodoru Gugoiu - HTML, XHTML, CSS si XML prin exemple - ghid practic,
Editura Teora, 2005
Zeid Ibrahim - Mastering the internet, xhtml and java script , Editura Prentice
Hall, 2004
http://www.ecursuri.ro
http://www.w3schools.com
http://www.tutorialehtml.com
145