LIMBAJUL HTML

Generaliti
Unul dintre cei mai utilizai termeni astzi este Internetul. O definiie a acestuia a fost dat
de abia n 1995 de ctre Federal Networking Council ca fiind:
-

Un sistem informaional care utilizeaz n mod unitar acelai spaiu de adrese bazat pe
IP sau pe viitoarele sale extensii;

Este capabil s asigure comunicarea prin suita de protocoale TCP/IP sau prin viitoarele
sale extensii;

Ofer acces privat la serviciile de comunicaii de nivel nalt.

Exist mai multe metode de acces la informaia stocat pe un calculator prin intermediul
reelei de internet:
-

FTP (File Transfer Protocol) - serviciul pentru transfer fiiere;

Telnet - serviciul pentru acces la distan;

Electronic Mail - serviciul de mesagerie electronic;

News - serviciul de tiri;

World Wide Web - alt metod de acces la informaia stocat pe un calculator aflat
oriunde n lume.

Despre limbajul HTML

Ce este HTML ?
Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este
HTML (HyperText Markup Language), standard ce descrie formatul primar n care documentele
sunt distribuite i vzute pe Web.
Multe din trsturile lui, cum ar fi independena fa de platform, structurarea formatrii
i legturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web. Primele
specificaii de baz ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat iniial de Tim Berners-Lee la CERN in 1989. HTML este un limbaj
bazat pe SGML (Standard Generalized Markup Language), o aa-numit aplicaie a acestuia.
SGML este un standard internaional (ISO-8879) aprobat n 1986. HTML a fost iniial vzut ca o
posibilitate pentru fizicienii care utilizeaz computere diferite s schimbe ntre ei informaii prin
mijlocirea Internetului.

Erau prin urmare necesare cteva condiii eseniale: independena de platform, posibiliti
hipertext i structurarea documentelor. Independena de platform semnific faptul c un document
poate fi afiat n mod asemntor (sau aproape identic) de computere diferite (deci cu font, grafic
i culori la fel), lucru vital pentru o audien numeroas i extrem de variat.
Hipertext se traduce prin faptul c orice cuvnt, fraz, imagine sau element al
documentului vzut de un utilizator (client) poate face referin la un alt document sau chiar la
paragrafe din interiorul aceluiai document, ceea ce uureaz mult navigarea ntre prile
componente ale unui document sau ntre multiple documente. Structurarea riguroas a
documentelor permite convertirea acestora dintr-un format n altul precum i interogarea unor baze
de date nglobnd aceste documente.
Limbajul HTML d proiectanilor de pagini web posibilitatea:

s publice documente cu headere, texte, tabele, liste, fotografii, etc...

s regseasc on-line informaii prin intermediul hiperlink-urilor accesate printr-un

simplu click de mouse

s proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la distan,

pentru cutri de informaii sau pentru activitii specifice comerului

s includ foi

de calcul tabelar, clipuri video, sunete i alte aplicaii direct n

documente
Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de versiunea 3.2 este
posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de
documente (style sheet).
Utiliznd limbajul HTML pentru structurarea unui document i style sheet-urile pentru a
stiliza prezentarea acestuia, proiectanii pot obine mult mai uor independena de periferic/
computer/ platform hard-soft, lucru care a fcut HTML-ul att de popular.
Un document cu o structur complex poate fi prezentat n diferite moduri pe medii
diferite, permind documentului nsui s se adapteze mai uor noilor tehnologii.
n plus, separarea coninutului de partea de prezentare permite modificarea nfirii chiar
a unui ntreg site doar prin modificarea unui style-sheet (a unui document care descrie stilul).
Experiena a demonstrat c o astfel de abordare poate reduce dramatic costurile de
deservire a unui spectru larg de platforme i probleme, facilitnd i o ntreinere ulterioar i
modificri mult mai uoare.

Proiectare Site i Web Design - Standardul HTML

Fundamente HTML

Orice document HTML ncepe cu notaia <html> i se termin cu notaia </html>.

Astfel de perechi de marcaje sau etichete (acolo unde sunt perechi) se numesc n literatura
de specialitate TAG-uri.
Prin convenie, toate marcajele HTML ncep cu o parantez unghiulara deschis "<" i se
termin cu o parantez unghiular nchis ">". Marcajele dintre aceste paranteze transmit comenzi
ctre browser pentru a afia pagina ntr-un anumit mod.
Unele blocuri prezint delimitator de sfrit de bloc, n timp ce pentru alte blocuri acest
delimitator este opional sau chiar interzis.
ntre cele dou marcaje <html> si </html> vom introduce dou seciuni:
-

seciunea de antet: <head>...</head>

corpul documentului: <body>...</body>

Blocul <body>...</body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce

va fi afiat n fereastra browser-ului.
Un marcaj poate fi scris att cu litere mici, ct i cu litere mari. De exemplu <BODY> =
<BodY> = <body>.
Caracterele "spaiu" si "CR/LF" ce apar ntre tag-uri sunt ignorate de ctre browser.
Un prim document HTML ar fi ceva de genul acesta:
<html>
<head> </head>
<body> </body>
</html>

Titlul unei pagini se obine insernd n seciunea <head>...</head> urmtoarea linie:

<title>Aceasta este titlul primei mele pagini de Web</title>

n plus, n seciunea <body>...</body> putem scrie texte ct dorim. Dac nu ntlnim nici
un marcaj "<" sau ">", atunci interpretorul HTML le va lua ca texte simple i le va afia pe ecran.
S vedem o noua versiune a paginii noastre:
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>

</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>

Coninutul blocului <title>...</title> va aprea n bara de titlu a ferestrei browser-ului. Daca

acest bloc lipsete ntr-o pagin HTML, atunci n bara de titlu a ferestrei browser-ului va aprea
numele fiierului.
Trecerea pe o linie nou - se face n HTML cu o comanda explicit, care trebuie s apar n
codul surs html. Aceast comand este marcajul <br> (de la "line break" - ntrerupere de linie).
Folosind aceleai operaii ca mai sus, vizualizai noua pagina.
Vei vedea textul ce apare n fereastra browserului. n plus, pagina dvs. va avea un titlu
nou, cel introdus de dvs.. Ex.:
<html>
<head>
<title> titlul paginii</title></head>
<body> Bine ati venit in <br> pagina mea de Web!
</body>
</html>

O culoare poate fi precizat n dou moduri:

1. Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black,
fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
2. Prin construcia "#RRGGBB" unde R(red), G(green), sau B(blue) sunt cifre
hexazecimale i pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot
defini astfel 65536 de culori.
Culoarea fundalului unei pagini se precizeaz prin intermediul unui atribut al tagului
BODY, mai exact cu atributul "bgcolor" din cadrul etichetei <body>. De exemplu: <body bgcolor
= culoare>.
Culoarea textului se seteaz prin intermediul atributului "text" al tagului BODY, dup
sintaxa <body text=culoare>. n urmtorul exemplu textul are culoarea roie:
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>

Un text de culoare rosie.

</body>
</html>

Textul afiat este caracterizat de urmtoarele atribute: Mrime (font size) - aici implicit,
Culoare (font color) - aici implicit, Font (font family) - aici implicit.
Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se poate face
cu ajutorul a dou atribute ale etichetei <body>:
1. "Leftmargin" (stabilete distana dintre marginea stng a ferestrei browserului i
marginea stng a coninutului paginii);
2. "Topmargin" (stabilete distana dintre marginea de sus a ferestrei browserului i
marginea de sus a coninutului paginii);
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">

Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6">

Textul este scris cu fontul "Arial", culoare albastru i mrime 6. </body>
</html>
Pentru ca un bloc de text s apar n pagin evideniat (cu caractere aldine), trebuie inclus
ntre tagurile <b>...</b> (b vine de la "bold").
Pentru ca un text s fie scris cu caractere cursive acesta trebuie inclus ntr-un bloc
delimitat de tagurile <i>...</i> (i vine de la "italic").
Pentru a insera secvene de text ca indice (sub-script) sau ca exponent (super-script), aceste
fragmente trebuie delimitate de tagurile _..., respectiv ^....
Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <u>...</u> (u vine de
la "underline").
Fonturi in HTML
Un font este un text caracterizat de urmtoarele atribute:
1. Culoare (stabilit prin atributul "color");
2. Tipul sau stilul (stabilit prin atributul "face");
3. Mrimea (definit prin atributul "size");
4. Mrimea n puncte tipografice (stabilit prin atributul "point-size");
5. Grosime (definit prin atributul "weight").
6

Toate aceste atribute aparin etichetei <font>, care permite inserarea de blocuri de texte
personalizate.
O culoare poate fi precizat n dou moduri:
1. printr-un nume de culoare.
2. printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de
constant se formeaz astfel: #rrggbb, unde r, g i b sunt cifre hexazecimale.
Pentru a scrie un fragment de text cu caractere de o anumit culoare, se ncadreaz acest
fragment ntre marcajele de font, avnd stabilit atributul color la valoarea dorita.
Pentru a scrie un text ntr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere).
Exista cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele
utilizatorilor: "serif", "sans serif", "cursive", "monospace" si "fantasy".
Tipul de font necesar poate fi stabilit prin atributul "face" al etichetei. Pot fi introduse mai
multe fonturi separate prin virgul. In acest caz browserul va utiliza primul font pe care l
cunoate.
Pentru a stabili mrimea unui font se utilizeaz atributul size al tag-ului. Valorile acestui
atribut pot fi:
1. 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font i respectiv 7 pentru cel mai mare);
2. +1, +2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc. fa de valoarea curent;
3. -1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fa de valoarea curent.
Lucrul cu Imagini
Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptate de browsere pentru
fiierele imagine sunt:
1. GIF (Graphics Interchange Format) cu extensia .gif;
2. JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
3. XPM (X PixMap) cu extensia .xmp;
4. XBM (X BitMap) cu extensia .xbm;
5. BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
6. TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 culori posibile) i JPEG
(24 bii pentru o culoare, 16777216 de culori posibile).
URL ("Uniform Resource Locator" = identificator unic al resursei) este un standard folosit
n identificarea unica a unei resurse n Internet. Toate imaginile cu care vom lucra vor avea adresa
URL exprimata n funcie de directorul ce conine documentul HTML care face referire la imagine.

Pentru a insera o imagine ntr-o pagin, se utilizeaz eticheta <img> (de la "image"=
imagine).
Pentru a putea identifica imaginea care va fi inserat se utilizeaz un atribut al etichetei
<img>, i anume "src" (de la "source"= sursa).
Dac imaginea se afla n acelai director cu fiierul HTML care face referire la imagine,
atunci adresa URL a imaginii este format numai din numele imaginii, inclusiv extensia.
Dac imaginea se afla ntr-un subdirector al directorului paginii HTML din care este apelata, s
spunem "images", atunci aceasta este apelata cu URL-ul: "/images/imagine1.jpg". n schimb, dac
fiierul imagine este situat ntr-un director "images" dintr-un super director al directorului paginii
HTML apelante, referirea se face cu URL-ul: "../images/imagine1.jpg".
Dac dorii s adugai un chenar n jurul imaginii, folosii atributul "border" al etichetei
<img>. Valorile acestui atribut sunt numere ntregi pozitive i reprezint grosimea bordurii.
O imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul crerii
ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate n momentul afirii ei n browser, n
cadrul paginii web. Dimensiunile prestabilite ale unei imagini pot fi modificate la afiarea n
browser prin intermediul atributelor "width" si "height" setate de proiectant n codul HTML al
paginii la valorile dorite. Spre exemplu:
<html>
<head>
<title> Imagine cu chenar si marit</title>
</head>
<body>
O imagine cu chenar si de 200 pixeli X 15 %
<img src="/images/imagine1.jpg" border="5" width="350" height="25%"> Text dupa imagine.
</body>
</html>

Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua
urmtoarele valori:
1. "left" - aliniere la stnga; celelalte componente sunt dispuse pe partea dreapta;
2. "right" - aliniere la dreapta; celelalte componente sunt dispuse pe partea stnga;
3. "top" - aliniere deasupra; partea de sus a imaginii se aliniaz cu partea de sus a textului
ce precede imaginea;
4. "middle " - aliniere la mijloc; mijlocul imaginii se aliniaz cu linia de baz a textului ce
precede imaginea.
5. "bottom" - aliniere la baz; partea de jos a imaginii se aliniaz cu linia de baza a textului.
8

Atributele "hspace" si "vspace" precizeaz distana n pixeli pe orizontal, respectiv pe

vertical, dintre imagine i restul elementelor din pagin.
Atributul "alt" admite ca valoare un text care va fi afiat n locul imaginii, n funcie de
setrile browserului utilizatorului:
<html>
<head>
<title> Alinierea textului</title>
</head>
<body>
<h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.
</h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text
inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.
<img src="../images/img1.jpg" align="left" hspace="30" vspace="30" >Text dupa imagine.Text dupa imagine.Text
dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text
dupa imagine.Text dupa imagine.
</body>
</html>

O imagine poate fi utilizat pe post de fundal al unei pagini Web. n acest scop se folosete
atributul "background" al etichetei <body>, avnd ca valoare adresa URL a imaginii.
Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.
De exemplu:
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background="../images/img1.jpg">
1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>

O legtur (link) introduce n pagin Web o zona activ. Efectund click cu butonul mouseului pe aceast zon, n browser se va ncrca o alt pagin.
Pentru a utiliza imaginea "legatura.jpg" drept legtur ctre pagina index.html utilizm
sintaxa:
<a href ="index.html"><img src= "../../images/img1.jpg "></a>

n mod prestabilit, imaginea utilizat pe post de zona activ este nconjurat de un chenar
avnd culoarea unei legturi. Dac stabilim pentru atributul "border" al etichetei <img> la 0, acest
chenar dispare. Exemplu:
9

<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body"><h4>Imagini folosite ca legaturi</h4>
Text inainte de imagine.<a href="index.html"><img src="../../images/img1.jpg "></a>
Text dupa imagine.
</body>
</html>

ntr-un fiier HTML, caracterele "<" si ">" au o semnificaie special pentru browser. Ele
ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin.
Dac dorim ca un fragment de text s conin astfel de caractere, acest fragment trebuie
ncadrat de una dintre perechile de etichete:
1. <xmp>...</xmp> (80 de caractere pe rand);
2. <listing>...</listing> (120 de caractere pe rand).
Aceste marcaje interpreteaz corect (ca text afiabil n browser) caracterele "spatiu",
"eticheta" si "CR/LF".
Blocul paragraf
Eticheta paragraf <p> face posibil trecerea la o linie nou i permite:
1. inserarea unui spaiu suplimentar nainte de blocul paragraf;
2. inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete delimitatorul </
p> (acesta fiind opional);
3. alinierea textului cu ajutorul atributului "align", avnd valorile posibile "left", "center"
sau "right".
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.

10

</body>
</html>

Blocuri de titlu
ntr-un text, titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <H1>,
<H2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refer la un bloc de text i trebuie nsoite
de o etichet de ncheiere similar.
Aceste etichete accept atributul "align" pentru alinierea titlului blocului de text la stnga
(n mod prestabilit), la centru i la dreapta. Tag-ul "H1" permite scrierea unui titlu cu caractere mai
mari i aldine, pe cnd <h6> folosete caracterele cele mai mici.
Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<H2 align="center"> Titlu de marime 1 aliniat in centru </H2>
<H3 align="right"> Titlu de marime 2 aliniat la dreapta. </H3>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>

ntr-o pagin Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei
<hr>. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <hr>:
1. "align" ce permite alinierea orizontal a liniei. Valorile posibile sunt "left", "center" i
"right";
2. "width" permite alegerea lungimii liniei;
3. "size" permite alegerea grosimii liniei;
4. "noshade" cnd este prezent definete o linie fr umbr;
5. "color" permite definirea culorii liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>

11

<H2 align="center"> Tipuri de linii orizontale </H2> O linie implicita, aliniere stanga, latime 100%, grosime 2 cu
umbra.
<hr>
Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli, fara umbra.
<hr align="center" width="50%" size="5" noshade>Urmeaza o linie aliniata la dreapta, de latime 150 de pixeli,
grosime 12 pixeli, de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>

Blocul CENTER
Blocul introdus ntre etichetele <center>...</center> aliniaz centrat toate elementele pe
care le conine.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr
width=40%> <hr width=10%> </center>
</body>
</html>

Blocuri DIV
Modalitatea cea mai eficient de delimitare i de formatore a unui bloc de text este
folosirea delimitatorilor <div>...</div>.
Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este
"align" (aliniere). Valorile posibile ale acestui parametru sunt:
1. "left" (aliniere la stnga);
2. "center" (aliniere central);
3. "right" (aliniere la dreapt).
Un bloc <div>...</div> poate include alte subblocuri. n acest caz, alinierea precizat de
atributul align al blocului are efect asupra tuturor subblocurilor incluse n blocul <div>.
Un bloc <div>...</div> admite atributul "nowrap" care interzice ntreruperea rndurilor de
ctre browser la afiare.
Exemplu de utilizare a tagului DIV:

12

<html>
<head>
<title>Blocul DIV</title>
</head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
<div align="right">
O singura linie.O singura linie.O singura linie.O singura linie.<br>
O singura linie.O singura linie.O singura linie.O singura linie.<br>
O singura linie.O singura linie.O singura linie.O singura linie.<br>
</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>

Legturi n HTML
Legturile (link-urile) reprezint partea cea mai important a unei pagini Web. Ele
transform un text obinuit n hipertext sau hiperlegtur, care permite trecerea rapid de la o
informaie aflat pe un anumit server la alt informaie memorat pe un alt server aflat oriunde n
lume.
Legturile sunt zone active ntr-o pagin Web, adic zone de pe ecran sensibile la apsarea
butonului stng al mouse-ului.
Legturi ntre pagini aflate n acelai director:
O legtur de pe o pagin ctre o alta aflat n acelai director se formeaz cu ajutorul
etichetei <a> (de la "anchor"= ancora).
Pentru a preciza pagina indicat de legtur se utilizeaz un atribut al etichetei <a> numit
"href", care ia ca valoare numele fiierului HTML aflat n acelai director.
Zona activ care devine sensibil la apsarea butonului stng al mouse-ului este format
din textul cuprins ntre etichetele <a> si </a>. Prezena etichetetei de sfrit </a> este obligatorie.
Exemplu:
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>

13

<body>
<h3>Pagina 1 </h3>
<a href="pagina_2.html">
Link catre pagina 2 </a>
</body>
</html>

O legtura ctre un site particular:

n exemplul urmtor se utilizeaz adresa URL www.google.com care ncarc pagina de
start din site-ul firmei Google:
<html>
<head>
<title> Link catre site-ul firmei Google</title>
</head>
<body>
<h3>Link catre site-ul firmei Google </h3>
<a href="http://www.google.com">GOOGLE </a>
</body>
</html>

Legturi ctre fiiere oarecare:

O pagin Web poate conine legturi ctre orice tip de fiiere aflate pe orice servere din
Internet. Pentru aceasta se utilizeaz eticheta <a> avnd valoarea atributului "href" egal cu adresa
URL a fiierului destinaie.
Atunci cnd se efectueaz clic pe legtura din exemplul urmtor, browserul deschide o
caseta de dialog ntitulat "File download" care permite:
1. s salvai fiierul pe discul local;
2. s lansai n execuie aplicaia capabil s interpreteze corect fiierele de tipul respectiv.

Liste in HTML
Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de
definiii, referine sau indexuri.
Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic,
urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi
gestionat printr-o list de definiii care este inclus ntr-o pereche de marcaje de tip list de
definiii: <dl>...</dl> (de la "definition list" = list de definiii).
14

Observaii:
- Un termen al listei este marcat de eticheta <dt> (de la "definition term"= termen definit);
- Definiia unui termen este iniiat de eticheta <dd> (de la "definition description"=
descrierea definiiei);
- Definiia unui termen ncepe pe o linie nou i este indentat;
Exemplu:
<html>
<head><title>listex_1</title></head>
<body><H2 align=center>O lista de definitii</H2><hr>
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt
punct din document sau catre un alt document
<dt><b>date</b>

Liste neordonate
O list neordonat este un bloc de text delimitat de etichetele <ul>...</ul> ("ul" vine de la
"unordered list"= list neordonat). Fiecare element al listei este iniiat de eticheta <li> (list item).
Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou.
Exemplu:
<html>
<head><title>listex_2</title></head>
<body><H2 align=center>O lista neordonata</H2><hr>
Glosar de termeni World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>

Tag-urile <ul> si <li> pot avea un atribut " type" care stabilete caracterul afiat n faa
fiecrui element al listei. Valorile posibile ale acestui atribut sunt:
1. "circle" (cerc);
2. "disc" (disc plin) - valoarea implicit;
3. "square" (ptrat);
Liste ordonate

15

O lista ordonat de elemente este un bloc de text delimitat de etichetele corespondente

<ol>...</ol> ("ol" vine de la "ordered list"= list ordonata).
Fiecare element al listei este iniiat de eticheta <li> (list item). Lista va fi indentat fa de
restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Exemplu:
<html>
<head><title>listex_4</title></head>
<body><H2 align=center>O lista ordonata</H2><hr>
<ol>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>

Tag-urile <ol> si <li> pot avea un atribut " type" care stabilete tipul de caractere utilizate
pentru ordonarea listei. Valorile posibile sunt:
1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari);
2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici);
3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari);
4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici);
5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - opiune prestabilit);
Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniial a secvenei de ordonare.
Valoarea acestui atribut trebuie sa fie un numr ntreg pozitiv.
Urmtorul exemplu este o lista ordonat cu litere mari, ncepnd cu valoarea C.
<html>
<head><title>listex_6</title></head>
<body><H2 align=center>O lista ordonata cu litere mari, incepand de la valoarea C</H2><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>

Listele ordonate pot fi imbricate ntre ele sau cu liste neordonate, ca n exemplul urmtor:
<html>
<head><title>listex_8</title></head>
<body><H2 align=center>O lista ordonata de liste ordonate si neordonate</H2><hr>
<ol>Un sistem informatic include:

16

<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>

Tabele in HTML
Tabelele ne permit s crem o reea dreptunghiular de zone, fiecare zon avnd propriile
opiuni pentru culoarea fondului, culoarea textului, alinierea textului, etc.
Pentru a insera un tabel se folosesc etichetele <TABLE>...</TABLE>. Un tabel este format
din rnduri. Pentru a insera un rnd ntr-un tabel se folosesc etichetele <TR> ...</TR> (de la "table
row" = rnd de tabel ). Un rnd este format din mai multe celule ce conin date. O celul se
introduce cu etichetele <TD>...</TD>.
n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se
utilizeaz un atribut al etichetei numit "border". Acest atribut poate primi ca valoare orice numr
ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului. Dac atributul "border"
nu este urmat de o valoare, atunci tabelul va avea o grosime prestabilit egal cu 1 pixel. O valoare
egal cu 0 a grosimii semnific absena chenarului. Cnd atributul "border" are o valoare nenul,
chenarul unui tabel are un aspect tridimensional.

17

Alinierea tabelului
Pentru a alinia un tabel ntr-o pagin Web se utilizeaz atributul "align" al etichetei
<TABLE>, cu urmtoarele valori posibile: "left" (valoarea prestabilit), "center" si "right ".
Alinierea este important pentru textul ce nconjoar tabelul. Astfel:
- dac tabelul este aliniat stnga, atunci textul care urmeaz dup punctul de inserare al tabelului va
fi dispus n partea dreapt a tabelului.
- dac tabelul este aliniat dreapta, atunci textul care urmeaz dup punctul de inserare al tabelului
va fi dispus n partea stnga a tabelului.
- dac tabelul este aliniat pe centru, atunci textul care urmeaz dup punctul de inserare al tabelului
va fi afiat pe toat limea paginii, imediat sub tabel.
Culoarea de fond se stabilete cu ajutorul atributului "bgcolor", care poate fi atasat
ntregului tabel prin specificarea in cadrul etichetei <table> sau numai celulelor de date prin
specificarea sa in etichetele de celula (<td>). Valorile pe care le poate primi atributul "bgcolor"
sunt cele cunoscute pentru o culoare.
Dimensionarea celulei unui tabel
Distana dintre dou celule vecine se definete cu ajutorul atributului "cellspacing" al
etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint
distana n pixeli dintre dou celule vecine. Valoarea prestabilit a atributului "cellspacing" este 2.
Distana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului
"cellpadding" al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive i
reprezint distana n pixeli dintre bordurile celulelor i coninutul lor. Valoarea prestabilit a
atributului "cellpadding" este 1.
Dimensionarea unui tabel
Dimensiunile unui tabel - limea i nlimea - pot fi stabilite exact prin intermediul a dou
atribute - "width" si "height" - ale etichetei <TABLE>. Valorile acestor atribute pot fi:
1. numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului;
2. numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd procentul din limea i
respectiv nlimea total a paginii.
Alinierea coninutului unei celule

18

Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului "align" care
poate lua valorile:
1. "left" (la stnga);
1. "center" (centrat) - valoarea prestabilit;
3. "right" (la dreapta);
4. "char" (alinierea se face fa de un caracter).
Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului "valign" care
poate lua valorile:
1. "baseline" (la baz);
2. "bottom" (jos);
3. "middle" (la mijloc, valoarea prestabilit);
4. "top" (sus).
Exemplu de tabel reunind toate elementele descrise pn acum:
<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15" width="100%">
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr align="right">
<td>data data data</td>
<td>data data data</td>
<td>data data data</td>
</tr>
</table>
</body>
</html>

Tabele cu forme oarecare

19

Un tabel trebuie privit ca o reea dreptunghiular de celule. Cu ajutorul a dou atribute ale
etichetelor <TR> si <TD>, o celul se poate extinde peste celule vecine. Astfel:
1. extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului "colspan", a
crui valoare determin numrul de celule care se unific.
2. extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului "rowspan", a crui
valoare determin numrul de celule care se unific.
Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz,
n etichete vor fi prezente ambele atribute "colspan" si "rowspan".
Exemplu:
<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15" width="100%">
<tr>
<td align="middle" rowspan="3">data data data</td>
<td align="middle" colspan="2">data data data</td>
</tr>
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr align="right">
<td>data data data</td>
<td>data data data</td>
</tr>
</table>
</body>
</html>

Formulare in HTML
Un formular este un ansamblu de zone active alctuit din butoane, casete de selecie,
cmpuri de editare, etc. Formularele asigur construirea unor pagini Web care s permit
utilizatorilor s introduc efectiv informaii i s le transmit serverului. Formularele pot varia de
la o simpl caseta de text, pentru introducerea unui sir de caractere pe post de cheie de cutare element caracteristic tuturor motoarelor de cutare din Web, pn la o structur complex, cu
multiple seciuni, care ofer faciliti puternice de transmisie a datelor. O sesiune cu o pagina web
ce conine un formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expediaz unui server.
20

2. O aplicaie dedicat de pe server analizeaz formularul completat i (daca este necesar)

stocheaz datele ntr-o baz de date.
3. Daca este necesar serverul expediaz un rspuns utilizatorului.
Un formular este definit ntr-un bloc delimitat de etichetele corespondente <form> i
</form>.
Exist dou atribute eseniale ale tag-ului <form>:
1. Atributul "Action" care precizeaz ce se va ntmpla cu datele formularului odat ce acestea
ajung la destinaie. De regul, valoarea atributului "Action" este adresa URL a unui script aflat pe
un server care primete datele formularului, efectueaz o prelucrare a lor i expediaz ctre
utilizator un rspuns. Exemplu:
<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.
Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell, Java.
2. Atributul "Method" precizeaz metoda utilizat de browser pentru expedierea datelor
formularului. Sunt posibile urmtoarele valori:
2.1. "Get" (valoarea implicita). n acest caz, datele din formular sunt adugate la adresa URL
precizata de atributul "Action". Atenie ns:
- nu sunt permise cantiti mari de date (maxim 1 Kb)
- ntre adresa URL i date este inserat un "?"
- datele sunt vizibile n bara de adres a browserului.
Datele sunt adugate conform sintaxei: "nume_camp = valoare_camp". ntre diferite seturi de date
este introdus un "&". Exemplu:
http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2
2.2. "Post". n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (de
ordinul MB).
Pentru ca un formular s fie funcional trebuie precizat ce se va ntmpla cu el dup
completarea i expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia
prin pota electronic (e-mail). Pentru aceasta se folosete un atribut al etichetei <form> i anume
"Action" care primete ca valoare "mailto:" concatenat cu o adresa valid de e-mail ctre care se va
expedia formularul completat.
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a
preciza tipul elementului se folosete atributul " type" al etichetei <input>. Pentru un cmp de
editare, acest atribut primete valoarea "text". Alte atribute pentru un element <input> sunt:
1. Atributul "name" permite ataarea unui nume fiecrui element al formularului.

21

2. Atributul "value" permite atribuirea unei valori iniiale unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, n care
atributul " type" este configurat la valoarea "submit". Acest element poate primi un nume prin
atributul "name". Pe buton apare scris implicit "Submit Query" sau explicit valoarea atributului
"value", daca aceasta valoare a fost stabilit. Exemplu:
<html>
<head><title>formEx_1 </title></head>
<body><H2> Un formular cu un camp de editare si un buton de expediere</H2>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si prenumele"><br>
<input type="submit" value="expediaza"> </form></body>
</html>

Pentru elementul <input> de tipul cmp de editare (type= "text"), alte dou atribute pot fi
utile:
1. Atributul "size" ce specific limea cmpului de editare. Dac textul introdus n cmp de
utilizator depete aceasta lime, atunci se executa automat o derulare a coninutului acestui
cmp;
2. Atributul "maxlength" ce specific numrul maxim de caractere pe care le poate primi un cmp
de editare; caracterele tastate peste numrul maxim sunt ignorate.
Butoanele radio permit alegerea, la un moment dat, a unei singure variante de rspuns din
mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul " type" avnd
valoarea "radio". Exemplu:
<html>
<head><title>formex_4</title></head>
<body><H2>Un formular cu butoane radio</H2>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti sexul:<input type="radio" name="sex" value="b"><br>
Femeiesc:<input type="radio" name="sex" value="f"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>

La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", n

funcie de alegerea fcut de utilizator.

22

O caset de validare (checkbox) permite selectarea sau deselectarea unei opiuni. Pentru
inserarea unei casete de validare se utilizeaz eticheta <input> cu atributul " type" configurat la
valoarea "checkbox". Observaii:
- fiecare caset poate avea un nume definit prin atributul "name".
- fiecare caset poate avea valoarea prestabilita "selectat" definit prin atributul "checked".
Exemplu:
<html>
<head><title>formex_5</title></head>
<body><H2>Un formular cu casete checkbox</H2>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti meniul:<br>
Pizza <input type="checkbox" name="pizza" value="o portie">
Nectar <input type="checkbox" name="nectar" value="un pahar">
Bere <input type="checkbox" name="bere" value="o sticla">
Cafea <input type="checkbox" name="cafea" value="o ceasca"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>

Un formular de selecie permite utilizatorului s aleag unul sau mai multe elemente dintr-o
list finit. Lista de selecie este inclus n formular cu ajutorul etichetelor corespondente <select>
si </select>. O list de selecie poate avea urmtoarele atribute:
1. Atributul "name", care ataeaz listei un nume (utilizat n perechile "name=value" expediate
serverului);
2. Atributul "size", care precizeaz (printr-un numr ntreg pozitiv, valoarea prestabilit fiind 1)
cte elemente din list sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin
acionarea barei de derulare ataate automat listei).
Elementele unei liste de selecie sunt incluse n list cu ajutorul etichetei <option>. Dou
atribute ale etichetei option se dovedesc utile:
1. Atributul "value" ce primete ca valoare un text care va fi expediat server-ului n perechea
"name=value"; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup
<option>;
2. Atributul "selected" (fr alte valori) ce permite selectarea prestabilit a unui element al listei.
Exemplu:
<html>
<head><title>formex_7</title></head>
<body><H2>Un formular cu o lista de selectie</H2>

23

<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Universitatea absolvita:<br><br>
<select name="universitate" size="3"> <option value="B"> Universitatea din Cluj
<option value="UNBM" selected> Universitatea de Nord Baia Mare
<option value="UTT"> Universitatea Technica din Timisoara
<option value="UTB"> Universitatea Technica din Brasov
</select><br><br>
<input type="reset"> <input type="submit">
</form></body>
</html>

ntr-un formular, cmpurile de editare multilinie pot fi incluse cu ajutorul etichetei

<textarea>. Eticheta are urmtoarele atribute:
1. Atributul "cols", care specific numrul de caractere afiate ntr-o linie;
2. Atributul "rows", care specific numrul de linii afiate simultan;
3. Atributul "name", care permite ataarea unui nume cmpului de editare multilinie;
4. Atributul "wrap", (de la "word wrap"= trecerea cuvintelor pe rndul urmtor), care determin
comportamentul cmpului de editare fa de sfritul de linie.
Acest atribut ("wrap") poate primi urmtoarele valori:
a) "off"; in acest caz:
- ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorete
utilizatorul;
- caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul;
b) "hard"; n acest caz:
- se produce ntreruperea cuvintelor la marginea dreapta a editorului;
- caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul;
c) "soft"; n acest caz:
- se produce ntreruperea cuvintelor la marginea dreapta a editorului;
- nu se include caracterul de sfrit de linie n textul transmis serverului odat cu formularul;
Cadre in HTML
Ferestrele sau (cadrele) ne permit s definim n fereastra browserului sub-ferestre n care s
putem ncadra documente noi HTML. Sub-ferestrele sunt definite ntr-un fiier HTML special, n
care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul
acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
24

Un atribut obligatoriu al etichetei <frame> este "src", ce primete ca valoare adresa URL a
documentului HTML care va fi ncrcat n acel frame. Definirea cadrelor se face prin mprirea
ferestrei ecran (i a subferestrelor) n linii i coloane:
1. mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul
atributului "cols" al etichetei <frameset> ce descrie acea fereastr;
2. mprirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul atributului
"rows" al etichetei <frameset> ce descrie acea fereastr;
3. valoare atributelor "cols" si "rows" este o list de elemente separate prin virgul, care descriu
modul n care se face mprirea. Elementele listei pot fi:
3.1. un numr ntreg de pixeli;
3.2. procente din dimensiunea ferestrei (numr ntre 1 i 99 terminat cu %);
3.3. n* care nseamn n pri din spaiul rmas;
Exemplu 1: "cols=200,*,50%,*" nseamn o mprire n 4 subferestre, dintre care prima are 200
pixeli lime, a treia ocupa jumtate din spaiul total disponibil iar a doua i a patra ocup n mod
egal restul de spaiu rmas disponibil.
Exemplu 2: "cols=200,1*,50%,2*" nseamn o mprire n 4 subferestre, dintre care prima are 200
pixeli lime, a treia ocupa jumtate din spaiul total disponibil iar a doua i a patra ocupa n mod
egal restul de spaiu rmas disponibil, care se mparte n trei pri egale, a doua fereastr ocupnd o
parte iar a patra ocupnd 2 pri.
Observaii:
- dac mai multe elemente din list sunt configurate cu *, atunci spaiul disponibil rmas pentru ele
se va mpri n mod egal.
- o subfereastra poate fi un singur cadru (folosind <frame>) - n care se va ncrca un document
HTML - sau poate fi mprit la rndul ei la alte subfereste constituind cadre noi (folosind
<frameset>).
Exemplu:
<html>
<head><title>ferex_1</title></head>
<frameset cols="*,*">
<frame src="p1.html">
<frame src="p2.html">
</frameset>
</html>

n exemplul urmtor este creat o pagina Web cu trei cadre mixte. Pentru a o crea se
procedeaz din aproape n aproape.
<html>

25

<head><title>ferex_4</title></head>
<frameset cols="20%,*">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>

Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul "bordercolor". Acest
atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul
de culoare RGB. Atributul bordercolor poate fi ataat att etichetei <frameset> pentru a stabili
culoarea tuturor chenarelor cadrelor incluse, ct i etichetei <frame> pentru a stabili culoarea
chenarului pentru un cadru individual.
Atributul "border" al etichetei <frameset> permite configurarea limii chenarelor tuturor
cadrelor la un numr dorit de pixeli. Valoarea prestabilit a atributului "border" este de 5 pixeli. O
valoare de 0 pixeli va defini un cadru fr chenar.
Exemplu:
<html>
<head><title>ferex_5</title></head>
<frameset cols="20%,*" bordercolor="green" border="15">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html" bordercolor="blue"> <frame src="p3.html">
</frameset>
</html>

n mod prestabilit, chenarul afiat al unui cadru are aspect tridimensional. Afiarea
chenarului unui cadru poate fi dezactivat dac se utilizeaz atributul "frameborder" cu valoarea
"no". Acest atribut poate fi ataat att etichetei <frameset> (dezactivarea fiind valabil pentru toate
cadrele incluse) ct i etichetei <frame> (dezactivarea fiind valabil numai pentru un singur cadru).
Atributul "scrolling" al etichetei <frame> este utilizat pentru a aduga unui cadru o bar de
derulare care permite navigarea n interiorul documentului afiat n interiorul cadrului. Valorile
posibile sunt:
1. "yes" - barele de derulare sunt adugate ntotdeauna;
2. "no" - barele de derulare nu sunt utilizabile;
26

3. "auto" - barele de derulare sunt vizibile atunci cnd este necesar

Exemplu:
<html>
<head><title>ferex_6</title></head>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes" noresize>
<frame src="p.html" scrolling="no" noresize>
<frame src="p.html" scrolling="auto" noresize>
</frameset>
</html>

Atributul "noresize" al etichetei <frame> (fr nici o valoare suplimentara) dac este
prezent, inhiba utilizatorului posibilitatea de a redimensiona cadrul cu ajutorul mouse-ului.
Atributele "marginheight" si "marginwidth" ale etichetei <frame> permit stabilirea distanei
n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului.
Valori posibile: numr de pixeli, procent din limea, respectiv din nlimea cadrului;
Exist browsere care nu suporta cadre. Pentru aceasta se utilizeaz n interiorul blocului
<frameset> eticheta <noframes>. Daca programul de navigare tie s interpreteze cadre, va ignora
ce se gsete n aceasta poriune, iar dac nu, materialul cuprins n zona <noframes>...</noframes>
va fi singurul care va fi neles i afiat. De precizat este faptul c ntre <noframes> ... </noframes>
se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

27