Curs HTML A5
Curs HTML A5
Curs HTML A5
I. HTML..............................................................................17
1. INTRODUCERE.............................................................17
Exemplu...................................................................................................... 17
Ce este HTML? .......................................................................................... 17
Tagurile HTML.......................................................................................... 17
Documentele HTML = Pagini Web............................................................ 17
2. HTML S NCEPEM...................................................18
Ce v trebuie .............................................................................................. 18
Editarea documentelor HTML .................................................................. 18
7. PARAGRAFE ............................................................... 24
8. FORMATAREA TEXTULUI .......................................... 24
Taguri pentru formatarea textului............................................................. 24
Exemple ...................................................................................................... 25
9. STILURI ........................................................................ 29
Taguri i atribute depite.......................................................................... 30
Exemple ...................................................................................................... 30
11. IMAGINI.......................................................................36
Tagul imagine i atributul src .................................................................. 36
Atributul Alt ............................................................................................. 37
Taguri pentru imagini................................................................................ 37
Exemple ...................................................................................................... 37
13. LISTE...........................................................................57
Liste neordonate......................................................................................... 57
Liste ordonate............................................................................................. 57
Liste de definiii.......................................................................................... 58
Exemple ...................................................................................................... 58
Tagul input............................................................................................... 62
Atributul action i butonul submit ......................................................... 63
Taguri pentru formulare ............................................................................ 64
Exemple ...................................................................................................... 64
10
11
II. XHTML.......................................................................... 99
1. CE ESTE XHTML? ....................................................... 99
2. DE CE XHTML?............................................................ 99
3. DIFERENE NTRE XHTML I HTML ....................... 100
Cele mai importante diferene.................................................................. 100
12
13
14
15
16
I. HTML
1. Introducere
Exemplu
<html>
<body>
<h1>Primul meu titlu</h1>
<p>Primul meu paragraf.</p>
</body>
</html>
Ce este HTML?
HTML este un limbaj pentru descrierea paginilor web.
HTML este abrevierea pentru Hyper Text Markup Language
HTML nu este un limbaj de programare, este un limbaj de marcare
(markup language)
Un limbaj de marcare este un set de taguri de marcare (markup tags)
HTML utilizeaz tagurile de marcare pentru a descrie paginile web
Tagurile HTML
Tagurile de marcare HTML sunt numite uzual taguri HTML
Tagurile HTML sunt cuvinte cheie scrise ntre paranteze ascuite, de
exemplu <html>
n mod normal tagurile HTML sunt pereche ca <b> i </b>
Primul tag din pereche este tagul de nceput, al doilea de sfrit
17
2. HTML S ncepem
Ce v trebuie
Nu v trebuie nimic deosebit ca s nvai HTML.
Nu avei nevoie de un editor HTML
Nu avei nevoie de un server web
Nu avei nevoie de un site web
este
este
este
este
este
este
titlul
titlul
titlul
titlul
titlul
titlul
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
18
</body>
</html>
Paragrafe
Paragrafele HTML sunt definite cu tagul pereche <p>.
<html>
<body>
<p>Acesta este un paragraf.</p>
<p>Acesta este un paragraf.</p>
<p>Acesta este un paragraf.</p>
</body>
</html>
Link-uri
Link-urile HTML sunt definite cu tagul pereche <a>.
<html>
<body>
<a href="http://yahoo.com">Acesta este un link</a>
</body>
</html>
Obs: Adresa de link este precizat ca atribut.
Imagini
Imaginile HTML sunt definite cu tagul <img> (nepereche).
<html>
<body>
<img src="hills.jpg" width="104" height="142"/>
</body>
</html>
Obs: Numele i dimensiunile imaginii sunt precizate ca atribute.
19
4. Elemente HTML
Documentele HTML sunt definite de elementele HTML.
Elementele HTML
Un element HTML este tot ce este scris ntre un tag de nceput i un tag de
sfrit.:
Tag de nceput
Coninutul elementului
Tag de sfrit
Acesta este un
<p>
</p>
paragraf
<a
href="default.htm" Acesta este un link </a>
>
<br />
20
5. Atribute HTML
Atributele furnizeaz informaii suplimentare despre elementele HTM.
Atributele HTML
21
Exemple de atribute
Linkurile HTML sunt definite cu tagul <a>. Adresa de link precizat este un
atribut.
Exemplu:
<html>
<body>
<a href="http://www.yahoo.com">Acesta este
link</a>
un
</body>
</html>
Obs. Valorile atributelor trebuie ntotdeauna puse ntre ghilimele
n rarele situaii n care valoarea atributului conine ea nsi ghilimele, este
necesar s scriei valoarea atributului ntre apostrofuri ca n exemplul urmtor:
name='John "ShotGun" Nelson'
6. Titluri HTML
Titlurile sunt definite cu tagurile <h1> ..... <h6>.
<h1> definete cel mai mare titlu. <h6> definete cel mai mic titlu.
Exemplu:
<html>
<body>
<h1>Acesta este un titlu 1</h1>
<h2>Acesta este un titlu 2</h2>
22
<h3>Acesta
<h4>Acesta
<h5>Acesta
<h6>Acesta
este
este
este
este
un
un
un
un
titlu
titlu
titlu
titlu
3</h3>
4</h4>
5</h5>
6</h6>
</body>
</html>
Obs: Browserele adaug automat o linie vid nainte i dup un titlu.
Titlurile sunt importante
Utilizai titlurile HTML numai pentru scrierea titlurilor. Nu le utilizai pentru a
face textul BIG sau bold. Motoarele de cutare folosesc titlurile pentru a
indexa structura i coninutul paginilor web.
Este important s utilizai titlurile pentru a pune n eviden structura
documentului HTML.
Titlurile h1 ar trebui folosite ca titluri principale, urmate de titlurile h2 amd.
Liniile HTML
Tagul <hr/> este utilizat pentru a crea o linie orizontal.
Exemplu:
<html>
<body>
<p>Tagul hr defineste o linie orizontala:</p>
<hr/>
<p>Acesta este un paragraf</p>
<hr/>
<p>Acesta este un paragraf</p>
<hr/>
<p>Acesta este un paragraf</p>
</body>
</html>
Comentarii HTML
Comentariile pot fi inserate n codul HTML pentru a-l face mai uor de citit i
neles. Comentariile sunt ignorate de ctre browsere i nu sunt afiate.
Comentariile se scriu astfel:
<!--Acesta este un comentariu -->
23
7. Paragrafe
Documentele HTML sunt mprite n paragrafe. Paragrafele sunt definite cu
tagul <p>.
Obs: Browserele adaug automat o linie vid nainte i dup un paragraf. Nu
uitai tagul de nchidere.
Exemplu:
<html>
<body>
<p>Acesta este primul paragraf.</p>
<p>Acesta al doilea paragraf.</p>
<p>Acesta este al treilea paragraf.</p>
<p>Nu uitati sa inchideti tagurile HTML!</p>
</body>
</html>
Obs: Noile versiuni HTML nu vor permite omiterea tagurilor de ncheiere.
Obs. Utilizai tagul <br/> dac dorii o linie nou fr s ncepei un nou
paragraf.
Exemplu:
<p>Acesta este<br />un para<br />graf cu intrerupere
de linie.</p>
Obs: Nu conteaz cte linii i cte spaii inserai n documentele HTML.
Browserele vor vedea un singur spaiu i o singur linie (dac nu utilizai tagul
<br/>).
8. Formatarea textului
Taguri pentru formatarea textului
Tag
<b>
<big>
<em>
<i>
Descriere
Text ngroat
Text mare
Text accentuat
Text nclinat (italic)
24
<small>
Text mic
<strong>
Text ngroat
<sub>
Textul subscript (indice)
<sup>
Text superscript (exponent)
<ins>
Text inserat
<del>
Text ters
<pre>
Text preformatat
<code>
Text tip cod de calculator
<kbd>
Text de la tastatur
<abbr>
Abreviere
<acronym>
Acronim
<address>
Adres
<blockquote> Citat lung
<q>
Citat scurt
<cite>
Citat
<dfn>
Definiie
Exemple
Exemplul 1
Ilustreaz cum putei formata textul ntr-un document HTML.
<html>
<body>
<p><b>Acest text este bold</b></p>
<p><strong>Acest text este strog</strong></p>
<p><big>Acest text este big</big></p>
<p><em>Acest text este emphasiz</em></p>
<p><i>Acest text este italic</i></p>
<p><small>Acest text este small</small></p>
<p>Acesta este<sub> subscript</sub> si
<sup>superscript</sup></p>
</body>
</html>
Exemplul 2
Ilustreaz cum putei controla ntreruperile de linie i spaiul cu tagul <pre>.
<html>
25
<body>
<pre>
Acesta este
un text preformatat.
Pastreaza
spatiile
Si intreruperile de linie.
</pre>
<p>Tagul pre poate fi folosit pentru a afisa coduri
computer:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Exemplul 3
Ilustreaz utilizarea diferitelor taguri pentru coduri computer.
<html>
<body>
<code>Computer code</code> <br/>
<kbd>Keyboard input</kbd> <br/>
<tt>Teletype text</tt>
<br/>
<samp>Sample text</samp>
<br/>
<var>Computer variable</var> <br/>
<p>
<b>Note:</b> Aceste taguri sunt uzual folosite pentru
a afisa
linii de program.
</p>
</body>
</html>
Exemplul 4
Ilustreaz cum se scrie o adres ntr-un document HTML.
26
<html>
<body>
<address>
Amelia Popescu<br>
Aleea Zorilor nr.156<br>
Botosani<br>
Romania
</address>
</body>
</html
Exemplul 5
Ilustreaz cum se utilizeaz acronimele i abrevierile.
<html>
<body>
<abbr title="United Nations">UN</abbr><br/>
<acronym title="World Wide Web">WWW</acronym>
<p>Atributul titlu este folosit pentru a arata
versiunea completa
a acronimului sau abrevierii cand mouse-ul este
pozitionat pe
element.
</p>
</body>
</html>
Exemplul 6
Ilustreaz cum poate fi schimbat direcia unui text.
<html>
<body>
<p>
Daca browserul suporta tagul bdo,urmatoarea
linie de text va fi
scrisa de la dreapta la stanga( atributul rtl):
</p>
<bdo dir="rtl">Un text ebraic</bdo>
27
</body>
</html>
Exemplul 7
Ilustreaz cum se folosesc citatele lungi i scurte.
<html>
<body>
Un citat lung:
<blockquote>
Acesta este un citat lung. Acesta este un citat
lung. Acesta este un
citat lung. Acesta este un citat lung. Acesta este
un citat lung
</blockquote>
<p><b>Browserul insereaza intreruperi de linie si
margini pentru
citat.</b>
</p>
Un citat scurt:
<q>Acesta este un citat scurt.</q>
<p><b>Acest text nu se evidentiaza prin nimic
special.</b></p>
</body>
</html>
Exemplul 8
Ilustreaz cum se marcheaz un text care a fost ters sau inserat ntr-un
document.
<html>
<body>
<p>
O duzina are
<del>douazeci</del>
<ins>douasprezece</ins>
elemente
</p>
28
9. Stiluri
Atributul style este nou n HTML i introduce CSS ul n HTML.
Exemplu de utilizare a atributului style.
<html>
<body style="background-color:PowderBlue;">
<h1>Folositi stiluri si culori!</h1>
<p style="font-family:verdana;color:red">
Acest text este scris cu Verdana si este rosu</p>
<p style="font-family:times;color:green">
Acest text este scris cu Times si este verde</p>
<p style="font-size:30px">Acest text are 30 pixeli
inaltime</p>
</body>
</html>
Scopul atributului style este de a furniza un stil uniform elementelor HTML.
Stilurile au fost introduse n HTML 4.0, ca o metod nou i preferat de
stilizare a elementelor HTML. n acest fel, stilurile pot fi adugate elementelor
HTML fie direct, utiliznd atributul style, fie indirect prin foi separate de stiluri
(fiiere CSS). n acest material vom folosi atributul style pentru a introduce
stilurile HTML..
Exemple de utilizare a atributului style
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
29
style="text-align:center"
Exemple
Culoare background:
Atributul style definete un stil pentru elementul <body>.
<html>
<body style="background-color:yellow">
<h2>Acesta este un fundal colorat cu atributul
style</h2>
</body>
</html>
Familia de fonturi, culoare i mrime:
Atributul style definete un stil pentru elementul <p>.
<html>
<body>
<h1 style="font-family:verdana">Un titlu</h1>
<p style="font-family:courier new; color:red; fontsize:20px;">
30
10. Linkuri
Un link este adresa unui document sau resurse de pe web.
31
Obs: Elementul coninut nu trebuie s fie neaprat text. Putei folosi o imagine
sau orice alt element HTML.
Atributul href
Definete adresa legturii.
Elementul <a> urmtor definete o legtur ctre Gmail:
<a href="http://www.gmail.com/">Serviciul e-mail
Google!</a>
Codul de mai sus va fi afiat de browser astfel:
Serviciul e-mail Google!
Atributul target
Atributul definete unde se va deschide documentul referit de link.
Codul urmtor va deschide documentul ntr-o nou fereastr:
<html>
<body>
<a href="lastpage.htm" target="_blank">Ultima
Pagina</a>
<p>
Dac atributul target este "_blank",documentul
referit va fi deschis intr-o noua fereastra.
</p>
</body>
</html>
Atributul name
Cnd este folosit atributul name, elementul <a> definete o ancor n interiorul
unui document HTML. Ancorele nu sunt afiate ntr-un mod special, ele sunt
invizibile pentru cititor.
Sintaxa de definire a unei ancore este:
<a name="label">Orice continut</a>
Sintaxa legturii ctre o ancor este:
<a href="#label">Orice coninut</a>
Simbolul # din atributul href definete o legtur ctre o ancor.
Exemple:
O ancor n interiorul unui document HTML:
32
Exemple
Exemplul 1
Ilustreaz cum putem folosi o imagine ca link.
<html>
<body>
<p>Crearea unei imagini drept link:
<a href="mypage.htm">
<img src="smiley.gif" alt="Tutoriale" width="32"
height="32" />
</a>
</p>
<p>Imaginea nu are bordura, dar este un link:
<a href="mypage.htm">
<img border="0" src="smiley.gif" alt="Tutoriale"
width="32"
height="32" />
</a>
</p>
</body>
</html>
33
Exemplul 2
Ilustreaz cum se folosesc linkurile i ancorele pentru a sri n alt parte a
documentului.
<html>
<body>
<p><a href="#C4">Vezi Capitolul 4.</a></p>
<p><a href="#C10">Vezi Capitolul 10.</a></p>
<h2>Capitolul 1</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 2</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 3</h2>
<p>Acest capitol explica ............</p>
<h2><a name="C4">Capitolul 4</a></h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 5</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 6</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 7</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 8</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 9</h2>
<p>Acest capitol explica ............</p>
<h2><a name="C10">Capitolul 10</a></h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 11</h2>
<p>Acest capitol explica ............</p>
<h2>Capitolul 12</h2>
<p>Acest capitol explica ............</p>
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 putei iei dac pagina se blocheaz ntr-un cadru.
<html>
<body>
<p>Cadrul este blocat?</p>
<a href="http://www.yahoo.com/" target="_top">Apasati
aici!</a>
</body>
</html>
Exemplul 4
Ilustreaz cum s facei link ctre utilitarul de e-mail (va funciona numai dac
serviciul e-mail este instalat).
<html>
<body>
<p>
Acesta este un link ctre e-mail:
<a
href="mailto:[email protected]?subject=Buna%20ziua">
Send Mail</a>
</p>
<p>
<b>Nota:</b> Spatiile dintre cuvinte ar trebui
nlocuite cu %20
35
<p>
Acesta este un link ctre e-mail:
<a href="mailto:[email protected]?cc=
[email protected]&bcc
[email protected]&subject
=Orarul%20Seminariilor&body=
Noul%20orar%20al%20seminariilor%20se%20va%20afisa%20v
ineri!">
Send mail!
</a>
</p>
<p>
<b>Nota:</b> Spatiile dintre cuvinte ar trebui
nlocuite cu %20
pentru <b>a fi siguri</b> ca browserul va afisa
textul corect.
</p>
</body>
</html>
11. Imagini
Tagul imagine i atributul src
n HTML imaginile sunt definite cu tagul <img>.
Tagul <img> este vid, aceasta nseamn c el conine numai atribute i nu are
tag de nchidere.
36
Atributul Alt
Atributul alt este folosit pentru a defini un text alternativ pentru imagine.
Valoarea atributului alt este un text definit de autor:
<img src="boat.gif" alt="O barca mare" />
Atributul alt informeaz cititorul ce lipsete din pagin dac browserul nu
poate ncarca imaginea. Browserul va afia n loc de imagine textul alternativ.
Este indicat s introducei atributul alt pentru orice imagine de pe pagin
pentru a mbunti afiarea paginii pentru cei care au browsere text-only. Dac
pagina conine multe imagini, dureaz mult pentru a fi ncrcat aa c folosii
cu atenie imaginile.
Descriere
Definete o imagine
Definete o imagine mapat
Definete o zon de hiperlink n interiorul unei imagini mapate
Exemple
Exemplul 1
Ilustreaz cum se insereaz ntr-o pagin web imagini situate n acelai director.
<html>
<body>
<p>
O imagine statica:
<img src="constr4.gif" width="144" height="50" />
37
</p>
<p>
O imagine animata:
<img src="hackanm.gif" width="48" height="48" />
</p>
<p>
Observati ca sintaxa de inserare a unei imagini
animate nu este
diferita de cea pentru o imagine statica.
</p>
</body>
</html>
Exemplul 2
Ilustreaz cum se insereaz imagini din alt director sau alt server.
<html>
<body>
<p>O imagine din alt director:</p>
<img src="/images/chrome.gif" width="33" height="32"
/>
<p>O imagine de pe alt server:</p>
<img src="http://www.mirror.com/images/green.jpg"
width="104" height="142" />
</body>
</html>
Exemplul 3
Ilustreaz cum se adug o imagine de fundal (background) unei pagini HTML.
<html>
<body background="background.jpg">
<h3>Uite: O imagine de fundal!</h3>
<p>Pentru fundal puteti folosi fisiere gif si
jpg.</p>
<p>Daca imaginea este mai mica decat pagina, se va
repeta.</p>
38
</body>
</html>
Exemplul 4
Ilustreaz cum se aliniaz imaginile cu textul .
<html>
<body>
<p>O imagine
<img src="hackanm.gif" align="bottom" width="48"
height="48" />
in text.</p>
<p>O imagine
<img src="hackanm.gif" align="middle" width="48"
height="48" />
in text.</p>
<p>O imagine
<img src="hackanm.gif" align="top" width="48"
height="48" />
in text.</p>
<p><b>Nota:</b> Alinierea bottom (la baza) este
implicita!</p>
<p>O imagine
<img src="hackanm.gif" width="48" height="48" />
in text.</p>
<p><img src="hackanm.gif" width="48" height="48" />
O imagine inaintea textului.</p>
<p>O imagine dupa text.
<img src="hackanm.gif" width="48" height="48" /></p>
</body>
</html>
Exemplul 5
Ilustreaz cum se aliniaz o imagine la stnga sau la dreapta unui paragraf.
<html>
<body>
39
<p>
<img src="hackanm.gif" align="left" width="48"
height="48" />
Un paragraf cu o imagine. Atributul align este
"left". Imaginea se va afisa la stanga acestui text.
</p>
<p>
<img src="hackanm.gif" align="right" width="48"
height="48" />
Un paragraf cu o imagine. Atributul align este
"right". Imaginea se va afisa la dreapta acestui text
</p>
</body>
</html>
Exemplul 6
Ilustreaz cum se stabilesc dimensiunile unei imagini.
<html>
<body>
<p>
<img src="hackanm.gif" width="20" height="20" />
</p>
<p>
<img src="hackanm.gif" width="45" height="45" />
</p>
<p>
<img src="hackanm.gif" width="70" height="70" />
</p>
<p>Puteti mari sau micsora o imagine modificand
atributele "height" si "width".</p>
</body>
</html>
Exemplul 7
Ilustreaz cum se folosete o imagine drept link.
40
<html>
<body>
<p>Crearea unui link pentru o imagine:
<a href="mypage.htm">
<img src="smiley.gif" alt="HTML tutoriale" width="32"
height="32" />
</a></p>
</body>
</html>
Exemplul 8
Ilustreaz cum se creeaz o imagine mapat n care fiecare zon este un
hiperlink.
<html>
<body>
<p>Pentru a mari imaginea, faceti clic pe soare sau
una dintre planete:</p>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
alt="Soarele" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercur"
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm" />
</map>
</body>
</html>
12. Tabele
Tabelele se definesc cu tagul <table>. Un tabel este mprit n linii (cu tagul
<tr>), i fiecare linie este mprit n celule de date (cu tagul <td>). Notaia
td nseamn "table data", coninutul unei celule din tabel. O celul poate
conine text, imagini, liste, paragrafe, formulare, linii orizontale, alt tabel , etc.
41
Exemplu:
<table border="1">
<tr>
<td>linia 1, celula
<td>linia 1, celula
</tr>
<tr>
<td>linia 2, celula
<td>linia 2, celula
</tr>
</table>
1</td>
2</td>
1</td>
2</td>
Atributul border
Dac atributul border nu este specificat, tabelul va fi afiat fr chenare
(borduri). Pentru a afia un tabel cu chenare trebuie utilizat atributul border.
Denumirea coloanelor
Crearea unei celule de titlu se face cu tagul <th>. Textul dintr-o celul de titlu
este ngroat i centrat.
Exemplu:
<table border="1">
<tr>
<th>Un titlu</th>
<th>Alt titlu</th>
</tr>
<tr>
<td>linia 1, celula 1</td>
<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 afieaz prea bine celulele din tabel care nu au
coninut. Pentru a corecta acest lucru, adugai un non-breaking space
( ) n celula vid i chenarul se va afia corect.
Exemplu:
<table border="1">
<tr>
42
Exemple
Exemplul 1
Ilustreaz cum se definete un tabel ntr-un document HTML.
<html>
<body>
<p>
Fiecare tabel incepe cu tagul <b>table</b>.
Fiecare linie incepe cu tagul <b>tr</b>.
Fiecare celula de date incepe cu tagul <b>td</b>.
</p>
<h4>Tabel cu o coloana:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
43
</table>
<h4>Tabel cu o linie si trei coloane:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Tabel cu doua linii si trei coloane:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea diferitelor tipuri de borduri.
<html>
<body>
<h4>Cu un chenar normal:</h4>
<table border="1">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
44
45
<td>600</td>
</tr>
</table>
<h4>Acest tabel nu are chenar pentru ca atributul
border are valoarea 0:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Exemplul 4
Ilustreaz cum se afieaz titlurile coloanelor i ale liniilor.
<html>
<body>
<h4>Titlurile coloanelor (table headers):</h4>
<table border="1">
<tr>
<th>Nume</th>
<th>Telefon</th>
<th>Telefon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Titlurile liniilor (vertical headers):</h4>
<table border="1">
<tr>
46
<th>Nume:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telefon:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telefon:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Exemplul 5
Ilustreaz folosirea caracterului " " pentru celulele care nu au coninut.
<html>
<body>
<table border="1">
<tr>
<td>Un text</td>
<td>Alt text</td>
</tr>
<tr>
<td></td>
<td>Alt text</td>
</tr>
</table>
<p>
O celula vida din tabel nu are bordura chiar daca
inserati in celula un spatiu.
</p>
<p>
Solutia este sa inserati in celula un caracter nonbreaking space.
</p>
47
48
49
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Aceasta celula contine o lista
<ul>
<li>mere</li>
<li>banane</li>
<li>ananas</li>
</ul>
</td>
<td>Buna Ziua</td>
</tr>
</table>
</body>
</html>
Exemplul 9
Ilustreaz folosirea atributului cellpadding pentru a crea mai mult spaiu
ntre coninutul celulei i chenarul ei.
<html>
<body>
<h4>Fara cellpadding:</h4>
<table border="1">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
50
</table>
<h4>Cu cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
</body>
</html>
Exemplul 10
Ilustreaz utilizarea atributului cellspacing pentru a crete spaiul dintre
celulele tabelului.
<html>
<body>
<h4>Tabel fara atributul cellspacing:</h4>
<table border="1">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>Tabel cu atributul cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
51
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
</body>
</html>
Exemplul 11
Ilustreaz cum se adaug un fundal (background) unui tabel.
<html>
<body>
<h4>Un fundal colorat:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>O imagine de fundal:</h4>
<table border="1"
background="hills.jpg">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
</body>
</html>
52
Exemplul 12
Ilustreaz cum se adaug un fundal uneia sau mai multor celule din tabel.
<html>
<body>
<h4>Fundaluri pentru o celula:</h4>
<table border="1">
<tr>
<td bgcolor="red">Prima</td>
<td>Linie</td>
</tr>
<tr>
<td background="background.jpg">A doua</td>
<td>Linie</td>
</tr>
</table>
</body>
</html>
Exemplul 13
Ilustreaz utilizarea atributului "align" pentru a alinia coninutul celulelor
tabelului.
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Bani cheltuiti in....</th>
<th align="right">Ianuarie</th>
<th align="right">Februarie</th>
</tr>
<tr>
<td align="left">Haine</td>
<td align="right">241.10 RON</td>
<td align="right">50.20 RON</td>
</tr>
<tr>
<td align="left">Cosmetice</td>
<td align="right">30.00 RON</td>
<td align="right">44.45 RON</td>
</tr>
<tr>
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>
<h4>Tabel cu atributul frame="border":</h4>
<table frame="border">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>Tabel cu atributul frame="box":</h4>
<table frame="box">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
54
55
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>Tabel cu atributul frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>Tabel cu atributul frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
<h4>Tabel cu atributul frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>Prima</td>
<td>Linie</td>
</tr>
<tr>
<td>A doua</td>
<td>Linie</td>
</tr>
</table>
</body>
</html>
56
Exemplul 15
Ilustreaz cum se folosesc atributele "frame" i "border" pentru a controla
chenarul exterior al tabelului.
<html>
<body>
<table frame="hsides" border="3">
<tr>
<td>Prima linie</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>Prima linie</td>
</tr>
</table>
</body>
</html>
13. Liste
HTML accept liste neordonate, liste ordonate i liste de definiii..
Liste neordonate
O list neordonat este o list de itemi marcai cu simboluri (cercuri, ptrate,
puncte).
O list neordonat ncepe cu tagul <ul>. Fiecare item din list ncepe cu tagul
<li>.
Exemplu:
<ul>
<li>Cafea</li>
<li>Lapte</li>
</ul>
Browserul afieaz lista de mai sus astfel:
Cafea
Lapte
Liste ordonate
O list ordonat este o list de itemi marcai cu numere sau litere.
57
O list ordonat ncepe cu tagul <ol>. Fiecare item din list ncepe cu tagul
<li>.
Exemplu:
<ol>
<li>Cafea</li>
<li>Lapte</li>
</ol>
Browserul afieaz lista de mai sus astfel:
1. Cafea
2. Lapte
ntr-o list ordonat sau neordonat pot s apar paragrafe, ntreruperi de linie
(line break), imagini, linkuri, alte liste, etc.
Liste de definiii
O list de definiii este o list de termeni mpreun cu descrierea lor.
O list de definiii ncepe cu tagul <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 afieaz lista de mai sus astfel:
Cafea
Bautura neagra fierbinte
Lapte
Bautura alba rece
n tagul <dd> pot apare paragrafe, ntreruperi de linie (line break), imagini,
linkuri, alte liste, etc.
Exemple
Exemplul 1
Ilustreaz utilizarea diferitelor tipuri de liste ordonate.
<html>
<body>
<h4>Lista numerotat cu cifre (implicit):</h4>
<ol>
58
<li>Mere</li>
<li>Banane</li>
<li>Lamai</li>
<li>Portocale</li>
</ol>
<h4>Lista numerotata cu litere mari:</h4>
<ol type="A">
<li>Apa</li>
<li>Ceai</li>
<li>Cafea</li>
<li>Suc</li>
</ol>
<h4>Lista numerotata cu litere mici:</h4>
<ol type="a">
<li>Blues</li>
<li>Rock-and-roll</li>
<li>Rap</li>
<li>Jazz</li>
</ol>
<h4>Lista numerotata cu cifre romane mari:</h4>
<ol type="I">
<li>Caiete</li>
<li>Carti</li>
<li>Creioane</li>
<li>Stilouri</li>
</ol>
<h4>Lista numerotata cu cifre romane mici:</h4>
<ol type="i">
<li>Copii</li>
<li>Adolescenti</li>
<li>Adulti</li>
<li>Batrani</li>
</ol>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea diferitelor tipuri de liste neordonate.
<html>
<body>
59
60
</body>
</html>
Exemplul 4
Un alt exemplu de list imbricat.
<html>
<body>
<h4>O list imbricata:</h4>
<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Lapte</li>
</ul>
</body>
</html>
Exemplul 5
Ilustreaz utilizarea unei liste de definiii.
<html>
<body>
<h4>O lista de definitii:</h4>
<dl>
<dt>Cafea</dt>
<dd>Bautura fierbinte de culoare neagra</dd>
<dt>Lapte</dt>
<dd>Bautura rece de culoare alba</dd>
</dl>
</body>
61
</html>
14. Formulare
Formularele HTML sunt utilizate pentru a selecta diferitele tipuri de informaii
introduse de utilizator.
Un formular este o zon care conine elemente de formular.
Elementele unui formular (cmpuri de text, meniuri drop-down, butoane radio,
csue de validare, etc.) permit utilizatorului s introduc informaii n
formular.
Un formular este definit cu tagul <form> conform sintaxei:
<form>
.
elemente de intrare
.
</form>
Tagul input
Cel mai utilizat tag de formulare este tagul <input>. Tipul intrrii este
specificat prin atributul type. Cele mai folosite tipuri de input sunt prezentate
n continuare.
62
Butoane radio
Butoanele radio se folosesc cnd dorim ca utilizatorul s selecteze o singur
opiune dintr-o list posibil.
Exemplu:
<form>
<input type="radio" name="sex"
value="barbat"/>Masculin
<br />
<input type="radio" name="sex"
value="femeie"/>Feminin
</form>
n browser formularul arat astfel:
Masculin
Feminin
Observai c numai o opiune poate fi selectat la un moment dat.
Csue de validare
Csuele de validare se folosesc atunci cnd utilizatorul poate s selecteze una
sau mai multe opiuni dintr-o list posibil.
Exemplu:
<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:
Username:
Dac tastai nite caractere n cmpul de text de mai sus i apsai butonul
"Submit", browserul va trimite informaia tastat unei pagini numite
"html_form_submit.asp". Pagina v va arta informaia primit.
Exemple
Exemplul 1
Ilustreaz cum pot fi create cmpuri de text ntr-o pagin HTM.
<html>
<body>
64
<form action="">
Prenumele:
<input type="text" name="prenume">
<br>
Numele:
<input type="text" name="nume">
</form>
</body>
</html>
Exemplul 2
Ilustreaz cum pot fi create cmpuri pentru parole.
<html>
<body>
<form action="">
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Cand tastati caractere intr-un camp de parola,
browserul afiseaza astericsuri in locul caracterelor.
</p>
</body>
</html>
Exemplul 3
Ilustreaz cum pot fi create csue de validare pe care utilizatorul le poate
selecta sau deselecta.
<html>
<body>
<form action="">
Am pisica:
<input type="checkbox" name="pet" value="Pisica">
<br />
Am caine:
<input type="checkbox" name="pet" value="Caine">
65
<br />
Am papagal:
<input type="checkbox" name="pet" value="Papagal">
</form>
</body>
</html>
Exemplul 4
Ilustreaz cum se creeaz butoane radio ntr-o pagin HTML.
<html>
<body>
<form action="">
Masculin:
<input type="radio" checked="checked"
name="Sex" value="barbat">
<br>
Feminin:
<input type="radio"
name="Sex" value="femeie">
</form>
<p>
Butonul Masculin este preselectat. Un singur buton
radio din lista poate fi selectat la un moment dat.
</p>
</body>
</html>
Exemplul 5
Ilustreaz cum se poate crea o list drop-down simpl (o list selectabil).
<html>
<body>
<form action="">
<select name="masini">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
66
</form>
</body>
</html>
Exemplul 6
Ilustreaz cum se poate crea o list drop-down simpl (o list selectabil) cu o
opiune preselectat.
<html>
<body>
<form action="">
<select name="masini">
<option value="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 numr nelimitat de caractere.
<html>
<body>
<textarea rows="10" cols="30"> Pisica se joaca in
gradina. </textarea>
</body>
</html>
Exemplul 8
Ilustreaz cum se creeaz un buton ntr-o pagin HTML.
<html>
<body>
<form action="">
<input type="button" value="Apasati!">
</form>
67
</body>
</html>
Exemplul 9
Ilustreaz cum se poate desena o bordur cu un titlul n jurul unui grup de
elemente folosind tagul fieldset.
<html>
<body>
<fieldset>
<legend>
Informatii despre sanatate:
</legend>
<form action="">
Inaltime <input type="text" size="3">
Greutate <input type="text" size="3">
</form>
</fieldset>
</body>
</html>
Exemplul 10
Ilustreaz cum se adaug dou cmpuri de text i un buton de submit pe o
pagin HTML.
<html>
<body>
<form name="input" action="html_form_action.asp"
method="get">
Introduceti prenumele:
<input type="text" name="prenume" size="20">
<br>
Introduceti
numele:
<input type="text" name="nume" size="20">
<br>
<input type="submit" value="Trimite">
</form>
<p>
68
69
70
</html>
15. Culori
Valorile culorilor
Culorile HTML sunt definite utiliznd notaia hexazecimal (hex) pentru
combinarea valorilor culorilor de baz Red, Green, i Blue (RGB rou, verde,
albastru).
Fiecare culoare de baz este reprezentat prin dou cifre hexazecimale avnd
valori cuprinse ntre 00 i FF, adic ntre 0 i 255 n baza zece. Cele ase cifre
hexazecimale care reprezint culoarea sunt precedate de caracterul #.
Valoare
hexazecimala
Valoare RGB
#000000
rgb(0,0,0)
#FF0000
rgb(255,0,0)
#00FF00
rgb(0,255,0)
#0000FF
rgb(0,0,255)
#FFFF00
rgb(255,255,0)
#00FFFF
rgb(0,255,255)
#FF00FF
rgb(255,0,255)
#C0C0C0
rgb(192,192,192)
#FFFFFF
rgb(255,255,255)
Exemplu:
<html>
<body>
<p style="background-color:#FFFF00">
Culoare setata folosind valoarea hexazecimala
</p>
<p style="background-color:rgb(255,255,0)">
Culoare setata utilizand valoarea rgb
</p>
<p style="background-color:yellow">
71
72
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#808080
#008000
#ADFF2F
#F0FFF0
73
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
#90EE90
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
74
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
75
SlateBlue
#6A5ACD
SlateGray
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32
Deoarece aceast list nu este recunoscut de W3C, dac dorii documente
HTML sau CSS valide, folosii n loc de numele culorii valoarea ei
hexazecimal.
Layout cu tabele
O practic uzual este folosirea
tabelelor (table) pentru a stabili
aspectul unei pagini HTML.
76
coloane.
Exemplu
<html>
<body>
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
Un text. Un text. Un text. Un
Un text. Un text. Un text. Un
</td>
<td width="50%" valign="top">
Alt text. Alt text. Alt text.
text. Alt text. Alt text. Alt
</td>
</tr>
</table>
</body>
</html>
Tagul frameset
77
Tagul frame
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 nct utilizatorul s nu poat
redimensiona cadrele.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
Exemplul 6
Ilustreaz cum se proiecteaz un cadru de navigare. Cadrul de navigare conine
o list de linkuri care au al doilea cadru drept target. Fiierul numit
"nav_frame.htm" conine trei link-uri care au urmtorul cod surs:
<a href ="frame_a.htm" target ="showframe">Cadrul
a</a><br>
<a href ="frame_b.htm" target ="showframe">Cadrul
b</a><br>
<a href ="frame_c.htm" target ="showframe">Cadrul
80
c</a>
Al doilea cadru va afia documentul corespunztor link-ului activ.
<html>
<frameset cols="120,*">
<frame src="nav_frame.htm">
<frame src="frame_a.htm" name="showframe">
</frameset>
</html>
Exemplul 7
Ilustreaz cum se creeaz un cadru inline (un cadru n interiorul unei pagini
HTML).
<html>
<body>
<iframe src="mypage.htm"></iframe>
<p>Unele browsere nu recunosc cadrele inline.</p>
<p>In acest caz, iframe-ul nu este vizibil.</p>
</body>
</html>
Exemplul 8
Acest exemplu conine dou cadre. Unul din cadre se deschide la o anumit
seciune dintr-un fiier specificat prin <a name="C10"> n pagina
"link.htm".
<html>
<frameset cols="20%,80%">
<frame src="frame_a.htm">
<frame src="link.htm#C10">
</frameset>
</html
81
Exemplul 9
Acest exemplu conine dou cadre. Cadrul de navigare (content.htm) din stnga
ferestrei conine o list de linkuri care au drept target al doilea cadru (link.htm).
Al doilea cadru afieaz documentul selectat. Unul din linkurile din cadrul de
navigare este ctre o anumit seciune din fiierul destinaie. Codul din fiierul
"content.htm" arat astfel:
<a href ="link.htm" target ="showframe">Link fara
ancora</a><br>
<a href ="link.htm#C10" target ="showframe">Link cu
ancora</a>.
Codul HTML al paginii care conine cele dou cadre este:
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm" name="showframe">
</frameset>
</html>
18. Fonturi
Tagul <font> din HTML este depit i va fi nlturat n viitoarele versiuni.
Dei este nc folosit frecvent, ar trebui s-l evitai i s folosii n locul lui
stiluri.
Codul HTML urmtor precizeaz dimensiune i tipul fontului pentru textul
afiat de browser :
<p>
<font size="2" face="Verdana">
Acesta este un paragraf.</font>
</p>
<p>
<font size="3" face="Times">
Acesta este un alt paragraf.
</font>
</p>
Atribut
Exemplu
size="number"
size="2"
size="+number"
size="+1"
size="-number"
size="-1"
face="face-name"
color="colorvalue"
color="colorname"
face="Times"
Descriere
Definete dimensiunea
fontului
Mrete cu 1 dimensiunea
fontului
Micoreaz cu 1 dimensiunea
fontului
Definete numele fontului
83
<body>
<h1 style="color:blue">Un titlu</h1>
<p style="color:red">Un paragraf</p>
</body>
</html>
Exemplul 4
Ilustreaz cum se stabilete fontul, dimensiunea i culoarea unui text.
<html>
<body>
<p style="font-family:verdana;fontsize:80%;color:green">
Acesta este un paragraf. Acesta este un paragraf.
Acesta este un paragraf. Acesta este un paragraf.
Acesta este un paragraf.
</p>
</body>
</html>
84
85
<p>La fel!</p>
</body>
</html>
Stiluri inline
Stilul inline se folosete cnd un anumit stil se aplic unui element care apare o
singur dat n document.
n acest caz, atributul style se aplic n tagul elementului respectiv i poate
conine orice proprieti CSS. Exemplul urmtor ilustreaz cum se schimb
culoarea i marginea stng pentru un paragraf:
<p style="color: red; margin-left: 20px">
Acesta este un paragraf.
</p>
86
Non-breaking Space
Cel mai utilizat simbol din HTML este non-breaking space (spaiu nentrerupt).
n mod normal HTML va trunchia spaiile din textul paginii, reducnd spaiile
succesive la unul singur. Pentru a aduga mai multe spaii n pagin, folosii
simbolul .
Exemplu
<html>
<body>
<p>Entitati de tip caracter</p>
<p>&</p>
<p>©</p>
</body>
</html>
Simboluri uzuale
Obs. Denumirile simbolurilor sunt case-sensitive!
87
Caracter
<
>
&
Descriere
non-breaking space
mai mic dect
mai mare dect
ampersand
cent
pound
yen
euro
section
copyright
marc nregistrat
Nume
<
>
&
¢
£
¥
€
§
©
®
Cod
 
<
>
&
¢
£
¥
€
§
©
®
ă
Ă
â
Â
î
Î
ş
Ş
ţ
Ţ
88
Descriere
Definete informaii despre document
Definete titlul documentului
Definete un URL de baz pentru toate linkurile din pagin
Definete referina unei resurse
Definete meta informaii
Exemple
Exemplul 1
Informaia title din elementul head nu este afiat n fereastra browserului.
<html>
<head>
<title>Acest titlu nu este afisat</title>
</head>
<body>
<p>Acest text este afisat.</p>
</body>
</html>
Exemplul 2
Ilustreaz cu se folosete tagul base astfel nct toate linkurile din pagin s se
deschid ntr-o fereastr nou.
<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a href="http://www.yahoo.com" target="_blank">Acest
link</a>
89
90
Exemple
Exemplul 1
Informaiile din elementul meta descriu documentul.
<html>
<head>
<meta name="author"
content="Cosmin Petrescu">
<meta name="revised"
content="Cosmin Petrescu,9/07/09">
<meta name="generator"
content="Microsoft FrontPage 4.0">
</head>
<body>
<p>
Atributele meta din acest document identifica autorul
si editorul utilizat pentru crearea paginii.
</p>
</body>
</html>
Exemplul 2
Informaiile din elementul meta descriu cuvintele cheie.
<html>
<head>
<meta name="description"
content="Exemple HTML">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript,
VBScript">
</head>
91
<body>
<p>
Atributele meta din acest document descriu documentul
si cuvintele cheie.
</p>
</body>
</html>
Exemplul 3
Ilustreaz cum se redirecteaz un user dac adresa site-ului s-a schimbat.
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.mysite.com">
</head>
<body>
<p>
Scuze! Ne-am mutat! Noul URL este:
<a
href="http://www.mysite.com">http://www.mysite.com</a
>
</p>
<p>
Vei fi redirectat catre noua adresa in cinci
secunde.
</p>
<p>
Daca vedeti acest mesaj pentru mai mult de 5 secunde,
va rog apasati linkul de mai sus!
</p>
</body>
</html>
24. URL
Linkuri HTML
92
Cnd apsai un link dintr-un document HTML, tagul <a> indic ctre o
adres web cu o valoare a atributului href ca aceasta: <a
href="mypage.htm">O pagina</a>.
Plecnd de la acest tag, browserul va construi o adresa web completa ca
aceasta: http://www.mysite.com/html/mypage.htm pentru a accesa pagina.
Scheme URL
n tabelul urmtor putei gsi cele mai folosite scheme URL:
Schema
Ce acceseaz
file
un fiier de pe calculatorul local
ftp
un fiier de pe un server FTP
http
un fiier de pe un server World Wide Web
gopher
un fiier de pe un server Gopher
news
un grup de tiri Usenet
telnet
o conexiune Telnet
WAIS
un fiier de pe un server WAIS
Accesarea unui newsgroup
Urmtorul cod HTML:
<a href="news:alt.html">HTML Newsgroup</a>
creeaz un link ctre un newsgroup ca acesta HTML Newsgroup.
93
Descrcarea cu FTP
Urmtorul cod HTML:
<a
href="ftp://www.w3schools.com/ftp/winzip.exe">Downloa
d WinZip</a>
Creeaz un link pentru a descrca un fiier, ca acesta: Download WinZip.
(Linkul nu funcioneaz dac sursa nu posed un director ftp.)
Link ctre propriul e-mail
Urmtorul cod HTML:
<a
href="mailto:[email protected]">[email protected]</a>
creeaz un link ctre propriul e-mail ca acesta [email protected]
25. Scripturi
Pentru a face paginile HTML mai dinamice i mai interactive, putei aduga
scripturi.
94
browser nou va nelege 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 folosete pentru browserele care recunosc tagul <script>, dar
nu accept limbajul n care este scris. n aceast situaie, browserele vor afia
textul din tagul <noscript>. Tagul va fi ignorat de browserele care pot
executa scriptul.
Exemplu:
<script type="text/javascript">
<!-document.write("Hello World!")
//-->
</script>
<noscript>Browserul dvs. nu poate executa
JavaScript!</noscript>
Descriere
Definete un script
Definete un text alternativ dac scriptul nu poate fi executat
Definete un obiect (embedded)
Definete un set de parametri de execuie pentru obiect
Exemple
Exemplul 1
Ilustreaz cum inserai un script Java ntr-un document HTML.
<html>
<body>
<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>
<noscript>Browserul nu accepta JavaScript!</noscript>
<p>
Un browser care nu accepta JavaScript va afisa textul
din elementul noscript.
</p>
</body>
</html>
96
onload
script
onunload
script
97
ondblclick
script
onmousedown
script
onmousemove
script
onmouseout
script
onmouseover
script
onmouseup
script
98
II. XHTML
1. Ce este XHTML?
Pentru a putea nelege XHTML, trebuie s avei cunotine elementare despre
HTML i proiectarea paginilor web.
XHTML este abrevierea pentru EXtensible HyperText Markup
Language
XHTML este aproape identic cu HTML 4.01
XHTML este o versiune mai strict i mai curat a HTML-ului
XHTML este HTML definit ca o aplicaie XML
XHTML este o recomandare a consoriului W3C
Toate browserele recunosc XHTML
2. De ce XHTML?
XHTML este o combinaie ntre HTML i XML (EXtensible Markup
Language).
XHTML const n toate elementele din HTML 4.01, combinate cu sintaxa
strict din XML.
Multe pagini internet conin cod HTML ru.
Urmtorul cod va funciona corect ntr-un browser, chiar dac nu respect
regulile HTML:
99
<html>
<head>
<title>Acesta este un cod HTML incorect</title>
<body>
<h1>Incorect HTML
<p>Acesta este un paragraf
</body>
XML este un limbaj de marcare n care orice element trebuie marcat corect,
ceea ce conduce la documente bine-formate.
XML este proiectat s descrie informaia, iar HTML este proiectat s afieze
informaia.
Astzi, piaa este format din diferite tehnologii de browser, unele rulnd pe
calculatoare, altele pe telefoane mobile i alte dispozitive de mic gabarit.
Ultimele menionate, nu au resursele sau puterea de a interpreta un limbaj de
marcare ru.
Combinnd punctele tari din HTML i XML, a rezultat XHTML, un limbaj de
marcare util acum i n viitor.
100
<li>Lapte</li>
</ul>
Codul corect este:
<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ul>
</li>
<li>Lapte</li>
</ul>
101
</BODY>
Modul corect de scriere este:
<body>
<p>Acesta este un paragraf</p>
</body>
4. Sintaxa XHTML
Reguli suplimentare privind sintaxa XHTML
102
Atributul lang
Acest atribut se aplic aproape fiecrui element XHTML. El specific limba n
care este scris coninutul unui element.
Dac utilizai atributul lang ntr-un element, trebuie s adugai i atributul
xml:lang, ca n exemplul urmtor:
<div lang="it" xml:lang="it">Ciao bella!</div>
104
Un exemplu XHTML
Acesta este un document XHTML simplu (minimal):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title>Un document simplu</title>
</head>
<body>
<p>Un paragraf</p>
</body>
</html>
Declaraia DOCTYPE definete tipul documentului. n rest documentul arat ca
n HTML.
105
6. Modularizarea XHTML
Modelul de modularizare XHTML definete modulele XHTML.
XHTML conine majoritatea facilitilor necesare unui proiectant web. Pentru
unele aplicaii, XHTML este prea mare i prea complex, pentru altele este prea
simplu. Prin mprirea XHTML n module, comsoriul W3C a creat seturi mici
i bine definite de elemente XHTML care pot fi folosite separat pentru
dispozitivele mici, sau pot fi combinate cu alte standarde XML n aplicaii mult
mai complexe.
Cu un XHTML modularizat, proiectaii pot:
Alege elemente suportate de un dispozitiv
Simplifica XHTML-ul pentru dispozitive mici
Extinde XHTML-ul pentru aplicaii complexe prin adugarea de noi
funcionaliti XML (ca MathML, SVG, Voice i Multimedia)
Defini profiluri XHTML ca XHTML Basic (un subset XHTML pentru
dispozitive mobile)
Modulele XHTML
Consoriul W3C a mprit definiiile XHTML n 28 de module:
Numele modulului
Descriere
Applet Module
Definete elementul applet* (depit)
Base Module
Definete elementele de baz
Basic Forms Module
Definete elementele de baz pentru formulare
Basic Tables Module
Definete elementele de baz pentru tabele
Bi-directional Text Module Definete elementul bdo
Client Image Map Module Definete elementele de mapare a imaginilor pentru
browser
106
Edit Module
Forms Module
Frames Module
Hypertext Module
Iframe Module
Image Module
Intrinsic Events Module
Legacy Module
Link Module
List Module
Metainformation Module
Name Identification
Module
Object Module
Presentation Module
Scripting Module
Server Image Map Module
107
<a>
<abbr>
<acronym>
<address>
<area />
<b>
<base />
<bdo>
<big>
<blockquote>
<body>
<br />
<button>
<caption>
<cite>
<code>
<col />
<colgroup>
<dd>
<del>
<dfn>
<div>
<dl>
<dt>
<em>
<fieldset>
<form>
<frame />
<frameset>
<h1> to <h6>
Definete o ancor
STF
Definete o abreviere
STF
Definete un acronim
STF
Definete informaiile de contact pentru
STF
autorul documentului
Definete o zon n interiorul unei imagini STF
mapate
Definete un text ngroat
STF
Definete o adres implicit sau o
STF
destinaie implicit pentru toate linkurile
dintr-o pagin
Definete direcia textului
STF
Definete un text mare
STF
Definete un citat lung
STF
Definete corpul documentului
STF
Definete o ntrerupere de linie
STF
Definete un buton ce poate fi apsat
STF
Definete titlul unui tabel
STF
Definete un citat
STF
Definete un text tip cod de calculator
STF
Definete valorile atributelor pentru una
STF
sau mai multe coloane dintr-un tabel
Definete un grup de coloane dintr-un tabel STF
pentru formatare
Definete descrierea unui termen dintr-o STF
list de definiii
Definete un text ters
STF
Definete o termen de definiie
STF
Definete o seciune dintr-un document
STF
Definete o list de definiii
STF
Definete un element dintr-o list de
STF
definiii
Definete un text emphasized (accentuat) STF
Definete un chenar n jurul elementelor STF
unui formular
Definete un formular HTML pentru
STF
utilizator
Definete o fereastr (un cadru) dintr-un F
frameset
Definete un set de cadre
F
Definesc titlurile HTML
STF
108
<head>
<hr />
<html>
<i>
<iframe>
<img />
<input />
<ins>
<kbd>
<label>
<legend>
<li>
<link />
<map>
<meta />
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param />
<pre>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<style>
109
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<ul>
<var>
document
Definete un text de tip indice
Definete un text de tip exponent
Definete un tabel
Grupeaz coninutul corpului unui tabel
Definete o celul dintr-un tabel
Definete un control de intrare multi-linie
Grupeaz coninutul subsolului unui tabel
Definete o celul de tip titlu ntr-un tabel
Grupeaz coninutul de tip titlu dintr-un
tabel
Definete titlul unui document
Definete o linie dintr-un tabel
Definete un text tip teletype
Definete o list neordonat
Definete o variabil
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
STF
Tagul <!--...-->
Exemplu:
<!Acesta este un comentariu si nu va fi afisat de
browser-->
<p>Acest paragraf va fi afisat de browser.</p>
Tagul de comentariu este utilizat pentru a insera n codul surs un comentariu
care va fi ignorat de browser. Putei folosi comentariile pentru a explica codul
sau pentru a stoca informaii specifice, cum ar fi scripturile i elementele de stil
(pentru browserele vechi). Acest tag nu are atribute standard sau atribute de
evenimente.
Declaraia <!DOCTYPE>
Exemplu de document cu o declaraie de XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
110
111
Tagul <a>
Exemplu:
<a href="http://www.yahoo.com">Yahoo!</a>
Tagul <a> definete o ancor care poate fi folosit n dou moduri:
1. Pentru a crea un link ctre alt document, folosind atributul href
2. Pentru a crea o etichet n interiorul unui document, folosind atributul
name
Elementul a este numit uzual link sau hiperlink. Cel mai important atribut al
elementului este href care indic destinaia link-ului. n mod predefinit, linkurile sunt afiate n browsere astfel :
un link nevizitat este subliniat i are culoarea albastr
un link vizitat este subliniat i are culoare violet
un link activ este subliniat i are culoarea roie
Linkurile pot fi stilizate cu CSS.
Atribute opionale
Coloana DTD indic n care HTML 4.01/XHTML 1.0 DTD este permis
atributul. S=Strict, T=Transitional, and F=Frameset.
Atribut
Valoare
Descriere
DTD
charset
char_encoding Specific setul de caractere al
STF
documentului referit
112
coords
href
hreflang
name
rel
113
onmousedown script
onmousemove script
onmouseout script
onmouseover script
onmouseup
script
onkeydown script
onkeypress script
onkeyup
script
STF
STF
STF
STF
STF
STF
STF
STF
Tagul <abbr>
Exemplu:
<abbr title="Organizatia Natiunilor Unite">ONU</abbr>
a fost fondata in 1945.
Tagul <abbr> descrie o fraz abreviat.
Marcnd abrevierile, putei furniza informaii utile browserelor i motoarelor de
cutare.
Obs: Atributul title este utilizat pentru a afia versiunea complet a
expresiei abreviate, atunci cnd mouse-ul se mic peste abreviere.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <acronym>
Exemplu:
Sistemele de operare Windows se bazeaza pe <acronym
title="Grafic User Interface">GUI</acronym>.
Tagul definete un acronim, adic un text care poate fi pronunat ca i cum ar fi
un cuvnt (NATO, NASA, GUI).
Marcnd acronimele, putei furniza informaii utile browserelor i motoarelor
de cutare.
Obs: Atributul title este utilizat pentru a afia versiunea complet a
acronimului, atunci cnd mouse-ul se mic peste el.
Atribute standard: class, dir, id, lang, style, title, xml:lang
114
Tagul <address>
Exemplu:
<address>
Proiectat de Web Design co.<br />
<a href="mailto:[email protected]">Contact</a><br />
Adresa: Bucuresti, Aleea Viilor nr.156<br />
Tel: 021.335.1237
</address>
Tagul definete informaiile de contact pentru autorul sau posesorul
documentului, pentru ca acesta s poat fi contactat de utilizator. Uzual, acest
element se adaug n antetul sau subsolul paginii web.
Obs. n toate browserele, coninutul elementului este afiat n italic i, uzual,
browserul va aduga o ntrerupere de linie nainte i dup elementul adres.
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 definete o zon dintr-o imagine mapat (o imagine cu zone ce pot fi
acionate cu un click de mouse).
Elementul este scris ntotdeauna n interiorul tagului <map>.
Obs: Atributul usemap din tagul <img> este asociat cu atributul name al
elementului map i creeaz o relaie ntre imagine i hart.
Obs. n HTML <area> nu are tag de nchidere, dar n HTML tagul <area>
trebuie nchis corect. n XHTML tagul trebuie s aib neaprat atributul alt
care specific un text alternativ pentru zona definit.
Atribute opionale
Atribut
Valoare
Descriere
DTD
coords
coordinates Specific coordonatele zonei
STF
href
URL
Specific destinaia unui link din zon
STF
nohref
nohref
Specific faptul c zona nu are un link
STF
asociat
shape
default
Specific forma zonei
STF
rect
circle
poly
115
target
_blank
Specific unde se va deschide pagina
TF
_parent
precizat n atributul href
_self
_top
Atribute standard: accesskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onblur, onclick, ondblclick,
onfocus,
onmousedown,
onmousemove,
onmouseout,
onmouseover, onmouseup, onkeydown, onkeypress, onkeyup
Tagul <base>
Tagul specific o adres sau o destinaie implicit pentru toate linkurile dintr-o
pagin i trebuie scris n interiorul elementului <head>. n HTML <base>
nu are tag de nchidere, dar n XHTML trebuie nchis corect.
Atribute
Atribut Valoare Descriere
DTD
href
URL
Specific un URL de baz pentru toate URL-urile STF
relative din pagin
target _blank
Specific unde se vor deschide toate linkurile din TF
_parent
pagin
_self
_top
framename
Tagul nu are atribute standard sau de evenimente.
Tagul <bdo>
Tagul permite specificarea direciei textului i suprascrie algoritmul
bidirecional. Are obligatoriu atributul dir care specific direcia textului din
interiorul elementului, cu valorile posibile ltr i rtl.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Tagul nu are atribute de evenimente.
Tagul <blockquote>
116
Tagul definete un citat lung. Browserul insereaz spaiu alb nainte i dup
acest element i o margine.
Obs: Pentru a marca citatele scurte folosii elementul q.
Tagul poate avea atributul opional cite, un URL care specific sursa
citatului.
Atribute standard: class, dir, id, lang, style, tabindex, title,
xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <body>
Tagul definete 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 cnd documentul se
ncarc
onmousedown script
Script executat cnd butonul mouse-ului STF
este apsat
onmousemove script
Script executat cnd cursorul mouse-ului STF
se mic
onmouseout script
Script executat cnd cursorul mouse-ului STF
prsete un element
onmouseover script
Script executat cnd cursorul mouse-ului STF
se mic peste un element
onmouseup script
Script executat cnd butonul mouse-ului STF
este eliberat
onkeydown script
Script executat cnd o tast este apsat STF
onkeypress script
Script executat cnd o tast este apsat i STF
eliberat
onkeyup
script
Script executat cnd o tast este eliberat STF
onunload
script
Script executat cnd documentul nu se
ncarc
Tagul <br>
117
Tagul <button>
Tagul definete un buton ce poate fi apsat de utilizator. n interiorul
elementului putei avea text sau imagini. Aceasta este diferena dintre acest
buton i cel creat cu un element input.
Specificai ntotdeauna atributul type. Pentru IE tipul implicit este "button",
n timp ce n alte browsere (i n specificaia W3C) este "submit".
Atribute opionale
Atribut
Valoare
Descriere
DTD
disabled disabled
Specific c butonul este dezactivat
STF
name
name
Specific numele butonului
STF
type
button
Specific tipul butonului
STF
reset
submit
value
text
Specific valoarea care va trimis de
STF
browser
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 definete titlul unui tabel i trebuie inserat n document imediat dup
tagul <table>. Putei specifica un singur titlu pentru un tabel. Uzual titlul va
fi centrat n raport cu tabelul.
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup
118
Tagul <col>
Exemplu:
<html>
<body>
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Titlu</th>
<th>Autor</th>
</tr>
<tr>
<td>3476896</td>
<td>Ion</td>
<td>Liviu Rebreanu</td>
</tr>
<tr>
<td>2489604</td>
<td>Morometii</td>
<td>Marin Preda</td>
</tr>
</table>
</body>
</html>
Tagul definete valorile atributelor pentru una sau mai multe coloane dintr-un
tabel.
Tagul este util pentru a aplica un stil ntregii coloane, n loc de a repeta stilul
pentru fiecare linie i celul.
Tagul poate fi utilizat numai n interiorul unui element table sau colgroup.
Dei n HTML <col> nu are tag de nchidere, n XHTML tagul trebuie nchis
corect.
Obs: Dac adugai atributul class n tagul <col>, atunci putei formata
coloanele cu CSS.
119
Atribute opionale
Attribute Value
align
left
right
center
justify
char
char
character
charoff number
span
number
Description
Specific alinierea coninutului coloanei
DTD
STF
STF
STF
STF
valign top
STF
middle
bottom
baseline
width
%
Specific limea 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>
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right"
style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Titlu</th>
<th>Autor</th>
</tr>
<tr>
<td>3476896</td>
120
<td>Ion</td>
<td>Liviu Rebreanu</td>
</tr>
<tr>
<td>2489604</td>
<td>Morometii</td>
<td>Marin Preda</td>
</tr>
</table>
</body>
</html>
Tagul este utilizat pentru formata un grup de coloane dintr-un tabel.
Tagul este util pentru a aplica un stil ntregii coloane, n loc de a repeta stilul
pentru fiecare linie i celul.
Tagul poate fi utilizat numai n interiorul unui element table.
Obs: Dac adugai atributul class n tagul <colgroup>, atunci putei
formata coloanele cu CSS.
Atribute opionale: aceleai ca la tagul <col>
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 definiii.
Tagul este utilizat mpreun cu <dl> (care declar o list de definiii) i <dt>
(care definete un termen din list).
n interiorul tagului <dd> pot s apar paragrafe, ntreruperi de linie, imagini,
liste, etc.
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 definete un text care a fost ters dintr-un document.
Obs: Folosii acest tag mpreun cu tagul <ins> pentru a descrie actualizrile
i modificrile fcute n document.
Atribute opionale
121
Atribut
cite
Valoare
URL
Descriere
DTD
Specific URL-ul unui document care STF
explic de ce a fost ters textul
datetime YYYY-MMSpecific data i ora la care a fost
STF
DDThh:mm:ssTZD
ters textul
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup
Tagul <div>
Exemplu:
<html>
<body>
<h3>Acesta este un titlu</h3>
<p>Acesta este un paragraf.</p>
<div style="color:#00FF00">
<h3>Acesta este un titlu dintr-o sectiune div</h3>
<p>Acesta este un paragraf dintr-o seciune
div.</p>
</div>
</body>
</html>
Tagul definete o seciune dintr-un document HTML i este deseori utilizat
pentru a grupa elemente ce vor fi formatate cu stiluri.
Obs: Elementul div este utilizat frecvent mpreun cu CSS pentru a formata
aspectul (layout) unei pagini web.
n mod normal, browserele afieaz o ntrerupere de linie nainte i dup un
element div.
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 definiii i este utilizat mpreun cu tagurile <dt> i
<dd>.
Atribute standard: class, dir, id, lang, style, title, xml:lang
122
Tagul <dt>
Tagul definete un item dintr-o list de definiii 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> definete 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 intrrile utilizatorului.
Un formular poate conine elemente de intrare, cum ar fi: cmpuri de text,
csue de validare (checkbox), butoane radio, butoane de trimitere (submit) etc.
123
Descriere
DTD
Specific tipurile de fiiere ce pot fi
STF
uploadate prin intermediul formularului
accept- charset
Specific seturile de caractere din datele
STF
charset
formularului pe care serverul le poate
manevra
enctype application/x- Specific cum trebuie codate datele din
STF
www-formformular nainte de a fi trimise la server
urlencoded
multipart/formdata
text/plain
method
get
Specific cum se trimit datele din formular STF
post
name
name
Specific numele formularului
TF
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 cnd formularul este resetat
onsubmit script Script executat cnd formularul este trimis (submit)
124
Tagul <frame>
Tagul definete o fereastr (un cadru) particular dintr-un frameset.
Fiecare cadru din frameset poate avea atribute diferite, cum ar fi margini,
bare de derulare, posibilitatea de redimensionare, etc.
n HTML <frame> nu are tag de nchidere, dar n XHML tagul trebuie nchis
corect.
Obs: Dac dorii s validai o pagin care conine cadre, fii siguri c
doctype este setat pe "Frameset DTD".
Important: Nu putei folosi elementul body mpreun cu un element
frameset. Totui, dac adugai tagul <noframes> pentru browserele care
nu recunosc cadrele, va trebui s includei textul n elementul body.
Atribute opionale
Atribut
Valoare
Descriere
DTD
frameborder 0
Specific dac se afieaz sau nu un
F
1
chenar n jurul cadrului
longdesc
URL
Specific o pagin care conine descrierea F
extins a coninutului cadrului
marginheight pixels
Specific marginile de sus i de jos ale
F
cadrului
marginwidth pixels
Specific marginile din dreapta i din
F
stnga ale cadrului
name
name
Specific numele cadrului
F
noresize
noresize
Specific faptul c nu se poate
F
redimensiona cadrul
scrolling
yes
Specific dac se afieaz sau nu bare de F
no
derulare n cadru
auto
src
URL
Specific URL-ul documentului afiat n F
cadru
Atribute standard: class, id, style, title
Tagul nu accept atribute de evenimente.
Tagul <frameset>
Elementul frameset pstreaz dou sau mai multe cadre (elemente frame).
Fiecare cadru pstreaz un document separat. Elementul frameset arat
doar cte linii sau cte coloane for fi n frameset.
Atribute opionale
Atribut
Valoare
Descriere
DTD
cols
pixels
Specific numrul i dimensiunea coloanelor F
%
din frameset
125
*
pixels
Specific numrul i dimensiunea liniilor
%
din frameset
*
Atribute standard: class, id, style, title
Atribute pentru evenimente: onload, onunload
rows
Tagul <head>
Acest element este un container pentru toate elementele care se plaseaz aici:
scripturi, informaii despre foile de stil, meta informaii etc.
n seciunea head pot fi adugate urmtoarele taguri: <base>, <link>,
<meta>, <script>, <style> i <title>.
Tagul <title> definete titlul documentului i este singurul obligatoriu din
aceast seciune.
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute eveniment.
Tagul <hr>
Tagul creeaz o linie orizontal ntr-o pagin web care poate fi folosit pentru a
separa coninutul.
Dei n HTML <hr> nu are tag de nchidere, n XHTML tagul se nchide
astfel: <hr />.
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 numete element rdcin.
Elementul doctype trebuie plasat n document naintea elementului html.
126
Tagul <iframe>
Tagul definete un cadru inline care conine un alt document.
Obs: Pentru browserele care nu recunosc acest tag, plasai textul dorit ntre
tagurile <iframe> i </iframe>.
Atribute opionale
Atribut
Valoare Descriere
DTD
frameborder 1
Specific dac se afieaz un chenar sau nu n TF
0
jurul elementului
height
pixels Specific nlimea elementului
TF
%
longdesc
URL
Specific o pagin care conine o descriere
TF
extins a coninutului cadrului
marginheight pixels Specific marginile de sus i de jos ale
TF
cadrului
marginwidth pixels Specific marginile din stnga i din dreapta TF
cadrului
name
name Specific numele cadrului
TF
scrolling
yes
Specific dac se afieaz sau nu bare de
TF
no
derulare n cadru
auto
src
URL
Specific URL-ul documentului ce trebuie
TF
afiat n cadru
width
pixels Specific limea cadrului
TF
%
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 afieze un text alternativ dac imaginea
nu poate fi ncrcat, nu un text afiat cnd mouse-ul trece peste imagine.
Pentru a afia un text cnd mouse-ul trece peste o imagine sau peste o imagine
mapat, utilizai atributul title, ca n exemplul urmtor:
127
Tagul <input>
Tagul este utilizat pentru a selecta informaia introdus de utilizator.
Un cmp de intrare (input) poate fi un cmp de text, o csu de validare, un
cmp de parol, un buton radio, un buton etc.
n HTML <input> nu are tag de nchidere, dar n XHTML tagul trebuie
nchis astfel: <input/>.
Obs: Pentru a defini etichetele elementelor de intrare, utilizai tagul <label>.
Atribute opionale
Atribut
Valoare Descriere
DTD
accept
MIME_type Specific tipul fiierelor care pot fi submise
STF
(numai pentru type="file")
alt
text
Specific un text alternativ pentru o imagine
STF
(numai pentru type="image")
checked checked
Specific c elementul de intrare trebuie s fie STF
128
disabled disabled
maxlength number
name
name
readonly readonly
size
src
number
URL
type
STF
STF
STF
STF
STF
STF
button
STF
checkbox
file
hidden
image
password
radio
reset
submit
text
value
value
Specific valoarea unui element de intrare
STF
Atribute standard: acceskey, class, dir, id, lang, style,
tabindex, title, xml:lang
Atribute pentru evenimente: onblur, onchange (script executat cnd
elementul
se
modific),
onclick,
ondblclick,
onfocus,
onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup, onkeydown, onkeypress, onkeyup, onselect(script
executat cnd elementul este selectat)
Tagul <ins>
Tagul definete textul care a fost inserat ntr-un document.
Obs: Folosii-l mpreun cu tagul <del> pentru a descrie actualizrile i
modificrile fcute n document.
Atribute opionale
Atribut
Valoare
Descriere
DTD
cite
URL
Specific URL-ul unui document care
STF
explic de ce textul a fost
inserat/modificat
129
Tagul <label>
Definete eticheta unui element de intrare dintr-un formular.
Eticheta nu are un efect deosebit pentru utilizator, dar mbuntete
accesibilitatea utilizatorilor de mouse. Dac facei clic pe textul etichetei,
elementul respectiv este selectat.
Atribute opionale
Atribut
Valoare Descriere
DTD
for
element_id Specific crui element din formular i
STF
corespunde eticheta.
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 definete 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 definete un item dintr-o list ordonat sau neordonat.
Obs: Utilizai 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 definete relaia dintre document i o resurs extern.
Este frecvent utilizat pentru a lega foile de stil la document.
Dei n HTML <link> nu are tag de nchidere, n XHTML el trebuie nchis
corect.
Obs: Elementul link trebuie inclus n seciunea head, i poate s apar de
mai multe ori.
Atribute opionale
Atribut
Valoare
Descriere
DTD
charset char_encoding Specific tipul de codare a caracterelor pentru STF
documentul referit
href
URL
Specific locaia documentului referit
STF
hreflang language_code Specific limba textului din documentul
STF
referit
media
screen
Specific pe ce dispozitiv va fi afiat
STF
tty
documentul referit
tv
projection
handheld
print
braille
aural
all
rel
alternate
Specific relaia dintre documentul curent i STF
appendix
documentul referit
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
rev
alternate
Specific relaia dintre documentul referit i STF
appendix
documentul curent
bookmark
131
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
target _blank
Specific unde se va ncrca documentul
TF
_self
referit
_top
_parent
frame_name
type
MIME_type Specific tipul MIME al documentului referit STF
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 definete o imagine mapat (image-map) pentru client. Atributul name
este obligatoriu n elementul map.
Acest atribut este asociat cu atributul usemap al elementului <img> i
creeaz o relaie ntre imagine i hart (map).
Elementul map conine un anumit numr de elemente area, care definesc
zonele din imaginea mapat ce pot fi activate cu mouse-ul.
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 informaia despre date..
132
Tagul <noframes>
Tagul este utilizat pentru browserele care nu recunosc cadrele.
Elementul noframes poate conine toate elementele care apar uzual n
elementul body al unei pagini HTML.
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 coninut alternativ pentru utilizatorii care
au dezactivat scripturile n browser sau care au un browser care nu recunoate
scripturile client.
Elementul noscript poate conine toate elementele care apar uzual n
elementul body al unei pagini HTML.
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-B16A00C0F0283628" id="Slider1" width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
133
Tagul <ol>
Tagul este utilizat pentru a crea o list ordonat.
Obs: Utilizai 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 opiunile nrudite dintr-o list de
selecie.
Dac avei o list de opiuni lung, gruparea opiunilor nrudite uureaz
utilizarea ei.
Atribute obligatorii
Atribut
Valoare Descriere
DTD
label
text
Specific o descriere pentru grupul de opiuni
STF
Atribute opionale
Atribut
Valoare Descriere
DTD
disabled disabled Specific c un grup de opiuni este dezactivat STF
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 definete o opiune dintr-o list de selecie. Elementul option se scrie
n interiorul elementului select.
n HTML <option> nu are tag de nchidere, dar n XTML tagul trebuie
nchis corect.
Atribute opionale
Atribut
Valoare Descriere
DTD
disabled disabled Specific o opiune dezactivat
STF
label
text
Specific o etichet scurt pentru o opiune
STF
selected selected Specific c opiunea este implicit selectat
STF
value
text
Specific valoarea care se trimite serverului cnd STF
formularul este submis.
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 definete un paragraf. Elementul creeaz n mod automat un spaiu
nainte i dup paragraf. Spaiul este aplicat automat de browser sau l putei
specifica ntr-o foaie de stil
135
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
Definete numele parametrului (pentru a fi
STF
utilizat n script)
Atribute opionale
Atribut
Valoare Descriere
DTD
type
MIME_type Specific tipul MIME al parametrului
STF
value
value
Specific valoarea parametrului
STF
valuetype data
Specific tipul valorii
STF
ref
object
Tagul suport numai atributul standard id i nici-un atribut pentru evenimente.
Tagul <pre>
Tagul definete un text pre-formatat.
Textul din elementul pre este afiat cu un font cu pas fix (uzual Courier), i
pstreaz spaiile i ntreruperile de linie.
Obs: Utilizai elementul pre pentru a afia coduri de calculator (cum ar fi
secvene de programe).
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 definete un citat scurt.
Browserul va afia citatul ntre ghilimele..
Atribute opionale
Atribut
Valoare Descriere
cite
URL
Specific sursa citatului
136
DTD
STF
Tagul <script>
Tagul este utilizat pentru a defini un script client, cum ar JavaScript.
Elementul script fie conine instruciunile scriptului, fie adreseaz un script
dintr-un fiier extern cu atributul src.
Atributul obligatoriu type specific tipul MIME al scriptului.
n general, JavaScript se folosete pentru gestionarea imaginilor, validarea
formularelor i schimbri dinamice ale coninutului.
Atribute opionale
Atribut
Valoare Descriere
DTD
charset charset
Specific tipul de codare utilizat n fiierul extern STF
de script
defer
defer
Specific c execuia scriptului va fi amnat
STF
pn cnd pagina este ncrcat
src
URL
Specific URL-ul fiierului script extern
STF
xml:space preserve Specific care spaii albe din cod trebuie pstrate
Tagul nu suport atribute standard sau pentru evenimente.
Tagul <select>
Tagul este utilizat pentru a crea o list de selecie (o list drop-down).
Tagul <option> din elementul select definete opiunile disponibile din
list.
Obs: Elementul select este un control pentru formulare i poate fi utilizat
ntr-un formular pentru a colecta informaiile furnizate de utilizator.
Atribute opionale
Atribut
Valoare Descriere
DTD
disabled disabled Specific dac lista drop-down este dezactivat STF
multiple multiple Specific c pot fi selectate opiuni multiple
STF
name
name
Specific numele listei
STF
size
number
Specific numrul de opiuni vizibile n list
STF
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>
<p>Cerul este <span class="blue">albastru</span> si
lanurile sunt <span class="green">verzi</span> si
bogate.</p>
</body>
</html>
Tagul permite selectarea unei poriuni de text sau de document n vederea
formatrii cu ajutorul stilurilor sau n vederea manipulrii coninutului cu
JavaScript.
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 definete informaii de stil pentru un document HTML.
Elementul style specific cum vor arta elementele HTML n browser.
Atributul obligatoriu type definete coninutul elementului style. Singura
valoare posibil este "text/css".
Elementul style se scrie ntotdeauna n seciunea head.
Tip: Pentru a utiliza o foaie extern de stiluri, utilizai tagul <link>.
Atribute opionale
Atribut
Valoare Descriere
DTD
media
screen
Specific stiluri pentru diferite tipuri de media STF
tty
tv
projection
handheld
print
braille
138
aural
all
Atribute standard: dir, lang, title, xml:lang
Tagul nu are atribute pentru evenimente.
Tagul <table>
Tagul definete un tabel HTML.
Un tabel HTML simplu const n elementul table i unul sau mai multe
elemente tr, th, i td.
Elementul tr definete o linie din tabel, elementul th definete un cap de tabel
i elementul td definete o celul din tabel.
Tabelele mai complexe pot include elementele caption, col, colgroup,
thead, tfoot i tbody.
Atribute opionale
Atribut
Valoare Descriere
DTD
border
pixels
Specific limea chenarului din jurul tabelului STF
cellpadding pixels
Specific spaiul dintre chenarul celulei i
STF
coninutul celulei
cellspacing pixels
Specific spaiul dintre celule
STF
frame
void
Specific care parte a chenarului exterior va fi STF
above
vizibil
below
hsides
lhs
rhs
vsides
box
border
rules
none
Specific care parte a chenarului interior va fi STF
groups vizibil
rows
139
cols
all
summary
text
Specific un sumar pentru coninutul tabelului STF
width
pixels
Specific limea unui tabel
STF
%
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup
<tfoot>
Exemplu:
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Luna</th>
<th>Economii</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>340RON</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Februarie</td>
<td>180RON</td>
</tr>
<tr>
<td>Martie</td>
140
<td>160RON</td>
</tr>
</tbody>
</table>
</body>
</html>
Tagul tbody este utilizat pentru a grupa coninutul din corpul unui tabel.
Elementul tbody trebuie utilizat mpreun cu elementele thead i tfoot.
Elementul thead este utilizat pentru a grupa coninutul din capul de tabel, iar
elementul tfoot este utilizat pentru a grupa coninutul din subsolul unui tabel
HTML.
Obs: Elementul <tfoot> trebuie s apar n descrierea tabelului naintea
elementului <tbody>, astfel nct browserul s poat reda subsolul nainte de
a primi toate liniile de date.
Atribute opionale
Atribut
Valoare Descriere
DTD
align
right
Aliniaz coninutul din elementul tbody
STF
left
center
justify
char
char
character Aliniaz coninutul din tbody la un caracter
STF
charoff number
Specific numrul de caractere cu care coninutul STF
elementului tbody va fi aliniat fa de caracterul
specificat cu atributul char
valign
top
Aliniaz vertical coninutul din elementul tbody STF
middle
bottom
baseline
Atribute standard: class, dir, id, lang, style, title, xml:lang
Atribute pentru evenimente: onclick, ondblclick, onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onkeydown, onkeypress, onkeyup
141
Tagul <textarea>
Tagul definete o zon de text multi-linie pentru informaia introdus de
utilizator.
142
O zon de text poate pstra un numr nelimitat de caractere i textul este afiat
cu un font cu pas fix (uzual Courier).
Mrimea elementului textarea poate fi specificat cu atributele cols i
rows, sau cu proprietile CSS height i width.
Atribute obligatorii
Atribut
Valoare
cols
number
rows
number
Atribute opionale
Atribut
Valoare
disabled disabled
Descriere
Specific limea vizibil a elementului
Specific numrul vizibil de linii din element
DTD
STF
STF
Descriere
DTD
Specific c elementul textarea este
STF
dezactivat
name
name_of_textarea Specific numele elementului
STF
readonly readonly
Specific c elementul este read-only
STF
Atribute 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 definete titlul unui document.
Elementul title este obligatoriu n documentele HTML/XHTML.
Elementul title:
Definete un titlu n bara de instrumente (toolbar-ul) browserului
Furnizeaz un titlu pentru pagin cnd este adugat n favorite
Afieaz un titlu pentru pagin n rezultatele furnizate de motoarele de
cutare
Atribute standard: dir, lang, xml:lang
Tagul nu are atribute pentru evenimente.
Tagul <tr>
Tagul definete o linie ntr-un tabel HTML.
Un element tr conine unul sau mai multe elemente th sau td.
Atribute opionale
Atribut
Valoare Descriere
align
right
Aliniaz coninutul liniei
left
center
143
DTD
STF
justify
char
char
character Aliniaz coninutul liniei la un caracter
STF
charoff number
Stabilete numrul de caractere cu care va fi
STF
aliniat coninutul liniei fa de caracterul precizat
cu atributul char
valign
top
Aliniaz vertical coninutul liniei
STF
middle
bottom
baseline
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 definete o list neordonat.
Obs: Utilizai 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
Sabin Buraga - Prezentari multimedia pe Web. Limbajele XHTML+TIME si
SMIL, Editura Polirom, 2004
Zeid Ibrahim - Mastering the internet, xhtml and java script , Editura Prentice
Hall, 2004
Rick Darnel - Totul despre HTML 4, Editura Teora, 2000
Traian Anghel - Dezvoltarea aplicatiilor WEB folosind XHTML, PHP si
MySQL, Editura Polirom, 2005
Margareta Dina Draghici - Situri Web In HTML 4, Editura Tehnica, 2003
Tudor Sorin, Vlad Huanu Crearea i programarea paginilor WEB, Editura
L&S Soft, 2006
http://www.ecursuri.ro
http://www.w3schools.com
http://www.tutorialehtml.com
145