HTML Pe Intelesul Tuturor

CAP. 1.
NOIUNI GENERALE
1.1. Ce nseamn HTML?
HTML este acronimul de la HyperText Markup Language i

reprezint un limbaj pentru crearea i marcarea (formatare, aranjare)
unui document astfel nct s poat fi publicat pe World Wide Web i
vizualizat cu ajutorul unui browser (Internet Explorer, Netscape, Opera
etc.).
Termenul de hypertext desemneaz un material sub form de
text i imagine, interconectat ntr-o manier complex, nesecvenial,
n care utilizatorul poate naviga, cuta informaii referitoare la un
obiect. Hypertext-ul trebuie interpretat ca un text care semnaleaz o
legtur la o alt informaie web, de obicei un alt document web, i
este identificat prin subliniere sau culoare, pentru a-l deosebi de textul
simplu.
Hypermedia este un termen aproape sinonim celui de hypertext,
singura deosebire fiind faptul c subliniaz prezena i a unor elemente
care nu sunt de tip text, cum ar fi animaii, secvene sonore sau
secvene video.
HTML se utilizeaz din 1990, cunoscnd cteva versiuni de
dezvoltare, fiecare dintre acestea mbuntind performanele
limbajului. Ultima variant (la data elaborrii acestui ghid) este HTML
4.01. ce include facilitile versiunilor anterioare (tag-uri de marcare,
tag-uri pentru hiperlegturi, antete, paragrafe, liste, elemente de
meniu, formatare caractere, imagini in-line i tag-uri pentru schimbul
de date dinamic ntre utilizatori), adugnd faciliti i extensii pentru
numere, tabele i elemente de control.
1.2. Documentele HTML structur
Un document HTML este format dintr-o succesiune de blocuri de

informaie. Aceste blocuri pot fi incluse unul n altul. Un bloc este
delimitat de simboluri speciale, numite tag-uri (etichete). Modul n
care un document este marcat cu elemente i cu atribute ale acestor
elemente se realizeaz n conformitate cu Document Type Definition
(DTD definiia tipului de document). Aceasta conine regulile ce
caracterizeaz fiecare tip de document.
Sursa autorizat pentru furnizarea de informaii despre HTML i
HTML DTD este World Wide Web Consortium (W3C) avnd adresa
http://www.w3.org.
Tag-ul este termenul consacrat pentru a defini elementele cu
care sunt marcate textul i grafica ntr-o pagin web. Fiecare tag este
ncadrat de semnele < (mai mic) i > (mai mare).
De exemplu: <B>Acest text se va vedea ngroat ntr-un

browser</B>
Primul cuvnt sau caracter ce apare n interiorul acestor

paranteze poart numele de element.
Majoritatea elementelor au un tag de deschidere i unul de
nchidere cu aceeai structur, dar cu prezena caracterului / n faa
denumirii elementului.
De exemplu: </FONT> este un tag de nchidere
Cuvntul sau cuvintele ce urmeaz dup element i desprite de

acesta printr-un spaiu, poart de numirea de atribute, avnd rolul de
descrie proprietile elementelor.
Atributele sunt urmate de semnul = i pot avea diferite valori.
Valoarea unui atribut este trecut, de obicei, ntre ghilimele.
De exemplu: <FONT COLOR=BLUE>Acest text va fi

albastru</FONT>
Elementele HTML pot avea unul sau mai multe atribute:
De exemplu: <FONT COLOR=BLUE SIZE=+1>Acest

text va fi albastru i cu o unitate mai mare dect
normal</FONT>
De remarcat c atributele nu apar i n tag-urile de nchidere.

Elementele HTML specific structura logic a unui document web
i sugereaz prezentarea vizual a documentului. HTML furnizeaz
dou tipuri de elemente:
- tag-urile care permit delimitarea antetelor, paragrafelor,
listelor, tabelelor, legturilor, imaginilor, etc;
- referinele de entitate caracter care permit utilizarea n
documentele HTML a simbolurilor declarate drept caractere de control.
Acestea se identific uor deoarece ntotdeauna ncep cu ampersand
& . De exemplu, pentru a reprezenta simbolul < ntr-un document
HTML, se va utiliza referina de entitate caracter &lt (less then).
Not: Tag-urile se nchid n ordinea invers deschiderii
lor, sintaxa corect a unei formatri cu mai multe tag-uri
fiind reprezentat astfel:
<TAG1><TAG2>...<TAGn> obiect formatat
</TAGn>...</TAG2></TAG1>
1.3. Elemente de baz
Orice pagin web (document HTML) are n structur trei

elemente obligatorii: un element numit HTML, care cuprinde ntregul
document, i dou sub-elemente ale acestuia: HEAD (antet, cap) i
BODY (corp).
Tag-ul <HTML> este primul tag care trebuie s apar ntr-un

fiier HTML. El va ncadra alturi de tag-ul su corespunztor de
nchidere (</HTML>) ntreaga pagin web.
Tag-ul <HEAD> va marca partea de antet a paginii web. Are tag
corespunztor de nchidere (</HEAD>).
Tag-ul <BODY> va ncadra coninutul paginii web. Are tag
corespunztor de nchidere (</BODY>).
Tag-ul <TITLE> marcheaz titlul unui document HTML, cel care
va fi afiat n bara de titlu a browser-ului. Acest tag se folosete
numai n interiorul tag-ului HEAD. Dac acest tag lipsete, atunci
n bara de titlu va aprea numele fiierului.
Iat un model de structur a unui document HTML:
<HTML>
<HEAD>
<TITLE>Titlul documentului</TITLE>
</HEAD>
<BODY>
Continutul documentului
</BODY>
</HTML>
i iat cum arat un document HTML ce utilizeaz tag-urile din

structura anterioar:
Not: Modul de scriere al denumirii tag-urilor este
indiferent de caz, scrierea lor cu caractere majuscule sau
cu caractere minuscule nu influeneaz comportamentul
acestora: <TAG> este echivalent cu <tag> i cu <Tag>
sau cu <taG> etc. Pentru evidenierea mai pronunat a
acestora, am optat pentru scrierea cu majuscule a
denumirii tag-urilor pe parcursul ntregii lucrri.
CAP. 2. CREAREA I EDITAREA UNEI PAGINI WEB
2.1. Alegerea programului de editare
Exist o multitudine de programe pe care le putei folosi la

crearea paginilor web.
Editoarele de text sunt cele mai simple editoare care permit
crearea i salvarea fiierelor fr coduri de formatare ascunse, care
pot afecta modul de afiare a unei pagini web n browsere.
Editoarele specializate HTML le permit utilizatorilor s creeze
documente web ntr-un mod rapid i uor i, prin urmare, foarte
eficient, doar prin apsarea ctorva butoane sau prin apelarea ctora
funcii predefinite. n loc de a scrie de mn codul surs HTML, aceste
programegenereaz ele nsele acest cod n locul vostru. Acest tip de
editoare reprezint unelte excelente pentru dezvoltatorii web cu
experien. Chiar i n acest caz este necesar s nelegei limbajul
HTML pentru a putea edita codul i a nltura eventualele neajunsuri
din documentele web.
n prezent, chiar i versiunile Microsoft Word v permit salvarea
documentelor in format pagin web, dar, dac vei analiza coninutul
codului surs, vei avea surpriza s constatai ct de mult a fost
nzorzonat fa de varianta scris de mn.
Pentru exemplificarea practic a noiunilor teoretice prezentate
n acest ghid, v recomand s instalai editorului Notepad++. Acesta
este un editor gratuit de cod-surs care suporta mai multe limbaje de
programare i ruleaza sub Windows. Ofer faciliti precum Syntax
Highlighting, stiluri personalizate, editare simultan a mai multor
fiiere, multiview si bookmarks. Acest produs, bazat pe componentele
de editare Scintilla (un component de editare foarte puternic) este sub
licen GPL (General Public License). Programul poate fi gasit la adresa
http://notepad-plus.sourceforge.net. Pentru aceia care nu au
conexiune Internet, am adugat n seciunea UTIL pe CD i acest
program.
Datorit folosirii unor culori diferite, acest program v permite s
efectuai o distingere clar a elementelor, atributelor i valorilor,
contribuind n acest fel la nelegerea noiunilor generale de
programare.
Dar mai nti va trebui s selectai tipul de limbaj folosit, n cazul
nostru HTML, din meniul Language.
Exist o schem de culori implicit pentru afiarea codurilor dar
poate fi definit i de utilizator din meniul Settings Styler
configurator....
Pentru exemplificare, am ales culoarea albastr pentru tag-uri,

culoarea roie pentru atribute, culoarea portocalie pentru valori i
culoarea neagr pentru textul general.
n Notepad++ codurile unui document HTML se vor vedea astfel:

2.2. Crearea unui document web
Aa cum am menionat i n capitolul precedent, exist anumite

elemente care sunt strict necesare n structura unui document web.
Prin urmare, ntotdeauna cnd creai un document web va trebui s
ncepei prin scrierea acestor elemente eseniale, dup care vei
aduga celelalte tag-uri.
Prin urmare, n Notepad++ vei scrie urmtoarele:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
n acest moment avei seciunile HEAD i BODY cuprinse ntre

tag-urile HTML. Mai avei, de asemenea, i elementul TITLE, n
interiorul elementului HEAD. Textul pe care il vei scrie n interiorul
tag-urilor TITLE va fi afiat n browsere, pe rndul cel mai de sus,
precum i n motoarele de cutare. n cazul n care nu scriei nimic, n
browsere va fi afiat numele documentului web (de exemplu:
index.html).
Dac un utilizator dorete s pun un semn de carte Bookmark
la documentul respectiv, similar cu adugarea acestuia la Favorites,
textul coninut n TITLE va fi cel adugat n list.
Iat un exemplu de titlu:
<TITLE> Ghid de programare HTML </TITLE>
2.3. Stabilirea proprietilor documentului
ntregul coninut al documentului format din text, imagini, culori,

elemente grafice, va fi cuprins ntre tag-urile BODY.
Proprietile documentului sunt controlate de atributele
elementului BODY. Aceste atribute sunt:
Atribut Valoare Descriere

rgb(x,x,x)
Precizeaz culoarea link-urilor active din
alink #xxxxxx
document.
colorname
O imagine folosit ca fundal pentru
background nume fiier
document
rgb(x,x,x)
Precizeaz culoarea fundalului
bgcolor #xxxxxx
documentului.
colorname
rgb(x,x,x)
Precizeaz culoarea link-urilor din
link #xxxxxx
document.
colorname
rgb(x,x,x)
Precizeaz culoarea textului utilizat n
text #xxxxxx
document.
colorname
rgb(x,x,x)
Precizeaz culoarea link-urilor vizitate din
vlink #xxxxxx
document.
colorname
Culorile sunt precizate folosind codurile RGB (red-green-blue) i

reprezentate prin valorile hexazecimale. Fiecare seciune format din
dou cifre reprezint valoarea componenei nuanelor de rou, verde i
albastru ce intr n componena culorii respective.
V prezentm n continuare un tabel cu cele mai uzuale culori,
compoziia RGB, precum i codul hexazecimal aferent fiecrei culori:
Denumire culoare Valoare RGB Cod hexazecimal

Black (negru) 0;0;0 000000
Blue (albastru) 0;0;255 0000FF
SaddleBrown
139;69;19 8B4513
(maron)
Grey (gri) 84;84;84 545454
Green (verde) 0;255;0 00FF00
Orange (portocaliu) 255;165;0 FFA500
Red (rou) 255;0;0 FF0000
Purple (violet) 128;0;128 800080
White (alb) 255;255;255 FFFFFF
Yellow (galben) 255;255;0 FFFF00
Cei mai muli designeri web i ale schemele de culori astfel nct
s se asorteze cu schema general de culori a site-ului.
Modul de formatare a acestor atribute este urmtorul:
<BODY BGCOLOR=#000000 TEXT=#FFFF00

LINK=#0000FF VLINK=#800080 ALINK=#FF0000>
Rezultatul codurilor precedente va fi un document web cu fundal

negru, textul de culoare galben, link-urile de culoare albastr, link-
urile active de culoare roie i link-urile vizitate de culoare violet.
Not: Codurile hexazexcimale vor fi precedate

ntotdeauna de semnul #
2.4. Utilizarea imaginilor ca fundal
Elementul BODY permite, de asemenea, utilizarea unei imagini

ca fundal. Aceast imagine va fi afiat n mod repetat (tiled) pe
fundal n browsere, adic va fi multiplicat pe toat suprafaa
documentului web. n vederea realizrii unui aspect profesional, este
recomandat ca imaginile folosite ca fundal s poat fi alturate fr
ns a li se observa mbinrile. Imaginile folosite ca fundal trebuie s
fie n format .gif sau .jpg.
V recomandm s avei n vedere faptul c ntreg coninutul
documentului va fi afiat deasupra imagii folosite ca fundal. Prin
urmare, imaginea va trebui s fie n culori pale, sau n contrast cu
culoarea textului afiat, astfel nct textul s poat fi citit cu uurin.
Sintaxa folosirii acestui atribut ntr-un document web este
urmtoarea:
<BODY BACKGROUND=fundal.gif>
Rezultatul va fi afiarea ca fundal a imaginii din fiierul

fundal.gif.
2.5. Aplicaie practic
n baza celor prezentate anterior, vom realiza un document web

folosind editorul Notepad++.
n documentul nou creat (new1) vom scrie urmtoarele linii de
limbaj HTML:
<HTML>
<HEAD>
<TITLE>Pagina cu fundal color</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">
<B>Pagina cu fundal color</B>

</BODY>
</HTML>
Din meniul File se alege opiunea Save, se stabiliete calea

unde va fi salvat fiierul (de exemplu C:\Ghid programare
HTML\Teste) i vom denumi fiierul test.html
Pentru a vedea rezultatul exerciiului n browserul cu care
suntem familiarizai (Internet Explorer, Netscape, Firefox, Opera etc.)
vom deschide fiierul respectiv (din meniul File se alege opiunea
Open sau Open File, n funcie de browser).
Rezultatul afiat va fi urmtorul:

i acum vom crea un nou document (sau l putem modifica pe
cel creat anterior), pentru a utiliza o imagine ca fundal.
<HTML>
<HEAD>
<TITLE>Pagina cu fundal imagine</TITLE>
</HEAD>
<BODY BACKGROUND="fundal.gif">
<B>Acesta este o pagina cu imagine pe fundal</B>
</BODY>
</HTML>
Dac nu avei un fiier de tip imagine (.gif sau .jpg) care se

preteaz ca fundal de pagin, putei descrca fiierul nostru
fundal.gif dnd click aici.
Not: Fii ateni la calea utilizat la descrcarea fiierului!

Fiierul fundal.gif trebuie salvat n acelai director ca i fiierul
test.html

Rezultatul va fi identic i dac folosii imaginea existent pe site-
ul nostru, n condiiile n care i specificai calea exact i avei o
conexiune internet permanent, astfel:
BACKGROUND="fundal.gif"
va deveni
BACKGROUND="http://ghid-
html.dap.ro/teste/fundal.gif"
CAP. 3. FORMATAREA DOCUMENTULUI
3.1. Crearea titlurilor n pagin
Elementele constituite din titluri i subtitluri se regsesc n

interiorul seciunii BODY i sunt marcate de tag-urile <H1> pn la
<H6>, avnd dimensiunile corespunztoare pe o scal de la 1 la 6,
unde <H1> are dimensiunea cea mai mare, iar <H6> are dimensiunea
cea mai mic. Este necesar folosirea tag-urilor de nchidere
</H1> ... </H6>.
Prezena titlurilor ntr-un document web este facultativ, ele
putnd aprea n orice ordine dorit de creatorul documentului, dei,
pentru a obine cele mai bune efecte vizuale, este recomandat s le
utilizai n ordine cresctoare (de la H1 la H6).
Iat, cum arat concret formatarea acestor titluri ntr-un
document web.
<HTML>
<HEAD>
<TITLE>Pagina cu titluri</TITLE>
</HEAD>
<BODY>
<H1>TITLU de tip H1</H1>
</BODY>
</HTML>
Atributele specifice acestui element sunt:

align left Precizeaz modul de aliniere a textului
center cuprins n tiltu.
right
justify
3.2. Crearea paragrafelor
Paragrafele v permit s adugai text n documentul web ntr-o

asemenea manier nct este ajustat n mod automat la dimensiunea
ferestrei browser-ului n care este afiat, adic fiecare rnd de text va
avea limea ferestrei n care este afiat.
Pentru a marca prezena unui paragraf se folosete tag-ul <P>.
Acesta necesit tag de nchidere </P>.
Formatarea paragrafelor ntr-un document web se realizeaz
astfel:
<HTML>
<HEAD>
<TITLE>Pagina cu paragrafe</TITLE>
</HEAD>
<BODY>
<P>Paragrafele va permit sa adaugati text n
documentul web.</P>
<P>Fiecare rnd de text va avea latimea ferestrei n
care este afisat </P>
</BODY>
</HTML>

Not: Dac vei dori s introducei mai multe spaii goale
ntre cuvintele din interiorul unui paragraf, va trebui s folosii
codul (NBSP = Non-Breaking Space) deoarece
browser-ele ignor spaiile multiple dintre cuvinte.

left
center Precizeaz modul de aliniere a textului
align
right cuprins n paragraf.
justify
3.3. Ruperea rndurilor
O modalitate de a mpri o zon de text pe rnduri este de a

semnala browser-ului exact unde vrem s fie efectuat ruperea de
rnduri, folosind tag-ul <BR>. Acesta impune afiarea textului situat
dup el pe linia urmtoare. Nu are tag corespunztor de nchidere.
Pentru exemplificare vom folosi urmtorul cod:
<HTML>
<HEAD>
<TITLE>Ruperea randului</TITLE>
</HEAD>
<BODY>
<P>Acest text contine o rupere <BR> a rndului
</P>
</BODY>
</HTML>
3.4. Despre paragrafe pre-formatate
Paragrafele pre-formatate sunt definite prin tag-ul <PRE>.

Acesta se folosete pentru a indica browser-ului c textul trebuie s fie
afiat exact aa cum este scris n codul HTML, respectnd spaiile i
ruperea rndurilor. Necesit tag corespunztor de nchidere </PRE>.
Iat cum se poate pune n practic folosirea acestui tag:
<HTML>
<HEAD>
<TITLE>Paragraf pre-formatat</TITLE>
</HEAD>
<BODY>
<PRE>Prin folosirea acestui tag nu mai trebuie sa
apelam
la ruperea randului,
asa cum a fost prezentata anterior,
iar spatiile vor fi
considerate ca atare . . .</PRE>
</BODY>
</HTML>
De remarcat c acest tag are o utilizare mai restrns, un

neajuns major fiind faptul c textul nu este ajustat n mod automat la
dimensiunea ferestrei browser-ului n care este afiat (aa cum se
poate observa i n imagine), iar fontul folosit este din grupa Courier
New.
Ajustarea limii paragrafului se poate face prin folosirea
urmtorului atribut:

Precizeaz numrul maxim de caractere pe
un rnd (n mod obinuit 40, 80 sau 132),
width numr
n funcie de rezoluia monitotului
recomandat utilizatorilor.
3.5. Inserarea unei linii orizontale

Un alt element ce contribuie la redarea unui aspect mai placut
unui document web este linia orizontal (Horizontal Line), redat n
limbajul HTML prin tag-ul <HR>.
Acest element nu are un tag de nchidere. Pur i simplu adugai
tag-ul <HR> n interiorul seciunii BODY i vei avea ca rezultat o linie
orizontal.
Vom exemplifica cele de mai sus folosind urmtorul cod:
<HTML>
<HEAD>
<TITLE>Inserarea unei linii orizontale</TITLE>
</HEAD>
<BODY>
<P>Aceasta pagina contine o linie orizontala <HR>
inserata ntr-un paragraf</P>
</BODY>
</HTML>

left
Precizeaz modul de aliniere liniei n
align center
document.
right
Cnd este prezent, acest atribut are ca
noshade noshade rezultat nlturarea efectului de umbr,
setat n mod inplicit pentru linia orizontal.
pixels
size Precizeaz grosimea liniei orizontale.
%
pixels
width Precizeaz limea liniei orizontale.
%
rgb(x,x,x)
color #xxxxxx Precizeaz culoarea liniei orizontale.
colorname
3.6. Formatarea unei seciuni a documentului
Pentru formatarea unei ntregi seciuni (division) a unui

document se folosete tag-ul <DIV>. n interiorul unei seciuni pot fi
cuprinse o serie de elemente care vor pstra caracteristicile acestea,
stabilite prin atributele sale, cu excepia cazului n care acele elemente
nu au propriile atribute.
Folosirea acestui tag la deschidere necesit i folosirea tag-ului
</DIV> la nchidere.

left
center Precizeaz modul de aliniere a textului
align
right cuprins n interiorul seciunii.
justify
<HTML>
<HEAD>
<TITLE>Inserarea unei sectiuni</TITLE>
</HEAD>
<BODY>
<DIV align="center">
<P>Paragraf aliniat pe centru ce pastreaza atributul
"center" specificat pentru elementul DIV.</P>
<P align="right">Paragraf aliniat la dreapta caruia i
s-a aplicat propriul atribut "right", chiar daca se afla n
interiorul aceleiasi sectiuni.</P>
</DIV>
</BODY>
</HTML>
n baza celor prezentate n acest capitol, vom crea un nou fiier

numit test2.html folosind editorul Notepad++, urmnd paii descrii
n capitolul precedent, n care vom scrie urmtoarele:
<HTML>
<HEAD>
<TITLE>Testarea cunostintelor dobndite n Capitolul
3</TITLE>
</HEAD>
<BODY>
ncepem prin inserarea unui text neformatat, care, dup
cum se poate observa, are caracteristicile unui text de tip
paragraf, aliniat la stnga.
<H1>Inserm un Titlu de tip H1</H1>
<H2>Inserm si un Titlu de tip H2</H2>
<P align="justify">Adugam text n document, aliniat
att la stnga ct si la dreapta, text ce va avea ltimea
ferestrei n care este afisat.</P>
<P align="right">Puteti observa rezultatul inserrii unei
<BR> ruperi de rnd n interiorul unui paragraf, precum si
folosirea unor spatii multiple
ntre cuvinte, ntr-un paragraf aliniat la dreapta.</P>
<DIV align="center">
<H3>Titlu de tip H3</H3>
<HR color="red" size="5" width="300" align="right">
<PRE width="40">Introducem un paragraf pre-formatat
n interiorul
unei sectiuni aliniate pe centru, precedat de un
titlu de tip H3 si de o linie orizontal de
culoare rosie, cu grosimea de 5 pixeli
si ltimea de 120 de pixeli, pozitionat
n partea dreapt a documentului.</PRE></DIV>
</BODY>
</HTML>

Note: 1. n Internet Explorer n-a fost recunoscut
atributul width="40" al elementului <PRE>, ci doar
n Netscape.
2. Aspectul documentului afiat n browser depinde
i de dimensiunea ferestrei n care este vizualizat,
prin urmare, poate fi diferit de imaginea prezentat.
CAP. 4. FORMATAREA TEXTULUI

4.1. Schimbarea aspectului textului
Dac pn acum am vorbit depre formatarea unor ntregi

seciuni sau paragrafe, a sosit timpul s ne ocupm de formatarea
textului n detaliu, i anume de formatarea proprie fiecrui cuvnt sau
caracter.
Pentru nceput vom analiza tag-ul <FONT> care stabilete tipul
de caracter folosit, mrimea i culoarea acestuia. Necesit tag de
nchidere </FONT>.
Atributele care definesc acest tag sunt urmtoarele:

rgb(x,x,x)
color #xxxxxx Precizeaz culoarea caracterelor.
colorname
Precizeaz tipul de caracter ce va fi folosit n
denumirea text. Pot fi specificate mai multe tipuri
face tipului de concomitent (pentru cazul n care un utilizator
caracter nu are anumit tip de font, de exemplu
face=Arial,Tahoma,Verdana,Helvetica)
o valoare
Precizeaz mrimea caracterelor (valoarea
size numeric
implicit este 3).
de la 1 la 7
Elementul <FONT> poate fi cuprins n interiorului multor

elemente (cum ar fi paragraf, titlu, seciune etc.), dar la fel de bine
aceste elemente se pot afla n interiorul elementului <FONT>,
rezultatele obinute fiind similare.
<FONT color="red"><H1>Titlu</H1> </FONT> este

similar cu
<H1><FONT color="red">Titlu </FONT> </H1>
n exemplul urmtor vom avea n vedere aspecte legate de

elementul <FONT> i ne von folosi de acelai fiier test.html:
<HTML>
<HEAD>
<TITLE> Schimbarea aspectului caracterelor</TITLE>
</HEAD>
<BODY>
<P>Paragraf n interiorul caruia modificam <FONT
color="red"> culoarea caracterelor </FONT> , <FONT
face="Verdana"> aspectul caracterelor </FONT> , <FONT
size="+2"> marimea caracterelor </FONT> sau <FONT
color="blue" face="Script" size="+5"> toate la un loc
</FONT> </P>
</BODY>
</HTML>
Not: Prezena elementului <P> n exemplul precedent

este facultativ.
4.2. Schimbarea stilului textului
Principalele elementele de stil ce caracterizeaz corpurile de

liter i care contribuie la evidenierea acestora, sunt marcate de
urmtoarele tag-uri:
<B> - are ca efect ngroarea textului
<I> - are ca efect italicizarea textului
<U> - are ca efect sublinierea textului
<BIG> - are ca efect mrirea textului
<SMALL> - are ca efect micorarea textului
<TT> - are ca efect spaierea n mod egal a textului (litera I i
litera M vor acupa acelai spaiu n interiorul unui cuvnt)
<S> <STRIKE> <DEL> - toate au ca efect afiarea textului
tiat cu o linie orizontal
Toate aceste tag-uri necesit tag-uri de nchidere.
<HTML>
<HEAD>
<TITLE> Schimbarea stilului caracterelor </TITLE>
</HEAD>
<BODY>
<B> - B are ca efect ngrosarea textului </B><BR>
<I> - I are ca efect italicizarea textului </I><BR>
<U> - U are ca efect sublinierea textului </U><BR>
<BIG> -BIG are ca efect marirea textului </BIG><BR>
<SMALL> - SMALL are ca efect micsorarea textului
</SMALL><BR>
<TT> - TT are ca efect spatierea n mod egal a textului
(litera I si litera M vor acupa acelasi spatiu n interiorul unui
cuvnt) </TT><BR>
<S> - S are ca efect afisarea textului taiat cu o linie
orizontala </S><BR>
<STRIKE> - STRIKE are ca efect afisarea textului taiat cu
o linie orizontala </STRIKE><BR>
<DEL> - DEL are ca efect afisarea textului taiat cu o linie
orizontala </DEL>
</BODY>
</HTML>

4.3. Alte elemente de formatare a textului
Pe lng elementele prezentate mai sus, mai exist o serie de

elemente cu o utilizare mai restrns pe care le vom meniona pe
scurt:
<SUP> - Permite afiarea caracterelor exponent (superscript)
<SUB> - Permite afiarea caracterelor indice (subscript)
<EM> - Accentuez un text
<STRONG> - ntrete modul de afiare a unui text
<DFN> - Indic faptul c textul reprezint definiia unui termen
<CODE> - Indic faptul c textul reprezint un cod de
calculator
<SAMP> - Indic faptul c textul reprezint un model de cod de
calculator
<KBD> - Indic faptul c textul reprezint un text de tastatur
<VAR> - Indic faptul c textul reprezint o variabil
<CITE> - Indic faptul c textul reprezint un citat
Toate aceste tag-uri necesit tag-uri de nchidere.
4.4. Caractere speciale i simboluri
Caracterele speciale i simbolurile care nu se gsesc, n mod

obinuit, pe tastatur, pot fi inserate n text prin secvene de cod
speciale. Aceste caractere se regsesc ntr-un set internaional de
caractere cunoscut i sub denumirea de ISOLatin-1 (ISO-8859-1).
Caracterele speciale sunt recunoscute de limbajul HTML datorit
faptului c ncep cu semnul & (ampersand) i se ncheie su semnul
; (punct i virgul).
Cele mai uzuale astfel de caractere au fost cuprinse n tabelul
urmtor:
Caracterul special Reprezentare Simbolizare

ampersand & &
asterisk &lowast; *
copyright ©
fraction one qtr ¼
fraction one half ½
greater-than sign > >
less-than sign < <
non-breaking space
quotation mark " "
registration mark ®
trademark sign ™
Vom pune n practic cele prezentate anterior i vom crea un

nou fiier numit test3.html care va conine urmtoarele linii de cod:
<HTML>
<HEAD>
<TITLE> Elemente de formatare a textului</TITLE>
</HEAD>
<BODY>
<H3 ALIGN="center"><FONT COLOR="red">Titlu de tip
H3</FONT> </H3>
Inseram un text neformatat caruia ncepem sa-i aplicam
diferite efecte: <FONT COLOR="blue" SIZE="4"> ngrosam
<B> textul </B>, dar <I>va sfatuiesc</I> sa nu l <U>
subliniati </U> deoarece <EM> poate fi confundat cu textul
unui link</EM>.</FONT><BR>
<FONT FACE="Arial,Helvetica,Tahoma"
COLOR="purple"><TT> Versiunea tiparita </TT>a ghidului
<S> este acum disponibila</S> <STRONG> nu este nca
disponibila<SUP>1</SUP></STRONG>.</FONT>
<BR><BR>
<SMALL><FONT
FACE="Tahoma,Verdana"><SUP>1</SUP>dar poate ca va fi n
curnd, depinde de volumul cererilor</FONT></SMALL>
<BR><BR>
<DIV ALIGN="center"><B>© 2008 XXXXX
COMPANY ™</B></DIV>
</BODY>
</HTML>
Not: Putei observa n codul surs marcarea tag-urilor

att cu caractere majuscule, ct i cu caractere
minuscule, rezultatul nefiind influenat de modul de
scriere al acestora, ntruct browser-ele nu in cont de
aceste diferene.
CAP. 5. CREAREA LISTELOR
5.1. Noiuni generale
Limbajul HTML le permite utilizatorilor s foloseasc diverse

mecanisme pentru prezentarea informaiilor sub forma listelor.
Listele reprezint succesiuni de elemente, fiecare element fiind
evideniat printr-un numr sau printr-un marcaj, avnd rolul de a
atrage atenia asupra unor idei din text. Fiecare list poate conine
unul sau mai multe elemente.
n funcie de elementele coninute, listele sunt de trei tipuri:
liste ordonate
liste neordonate
liste de definiii
5.2. Listele ordonate
ntr-o list ordonat elementele sunt numerotate automat de

browser. Tag-ul ce marcheaz nceputul unei liste ordonate este
<OL>. Folosirea tag-ului de nchidere </OL> este obligatorie.
Elementele listei sunt marcate de tag-ul <LI>. Folosirea tag-ului
de nchidere </LI> este opional.
Modul de folosire a acestor tag-uri este redat n exemplul
urmtor:
<OL>
<LI>primul element</LI>
<LI>al doilea element</LI>
<LI>al treilea element</LI>
</OL>
avnd ca rezultat afiarea listei n aceast form:
1. 1. primul element
2. 2. al doilea element
3. 3. al treilea element

start numr sau Precizeaz valoarea cu care va ncepe
liter numerotarea.
Sunt folosite simboluri alfabetice majuscule
A Sunt folosite simboluri alfabetice minuscule
a Sunt folosite simboluri numerice romane
type I majuscule
i Sunt folosite simboluri numerice romane
1 minuscule
Sunt folosite simboluri numerice arabe
5.3. Listele neordonate
ntr-o list neordonat elementele sunt marcate prin simboluri

similare cu Bullets din Microsoft Word, simbolul implicit fiind disc.
Tag-ul ce marcheaz nceputul unei liste ordonate este <UL>.
Folosirea tag-ului de nchidere </UL> este obligatorie.
La fel ca i la listele ordonate, elementele listei sunt marcate de
tag-ul <LI>.
Modul de folosire a acestor tag-uri este redat n exemplul
urmtor:
<UL>
<LI>primul element</LI>
<LI>al doilea element</LI>
<LI>al treilea element</LI>
</UL>
primul element
al doilea element
al treilea element

disc Sunt folosite simboluri de tip disc
type square Sunt folosite simboluri de tip ptrat
circle Sunt folosite simboluri de tip cerc
5.4. Listele de definiii

Listele de definiii sunt puin diferite de celelalte dou tipuri,
ntruct fiecare termen al listei se compune din dou elemente:
Termenul Definiiei i Descrierea Definiiei.
Tag-ul ce marcheaz nceputul unei liste de definiii este <DL>.
Folosirea tag-ului de nchidere </DL> este obligatorie.
Tag-ul ce marcheaz termenul definiiei este <DT>. Folosirea
tag-ului de nchidere </DT> este opional.
Tag-ul ce marcheaz descrierea definiiei este <DD>. Folosirea
tag-ului de nchidere </DD> este opional.
Modul de folosire a acestui tag este redat n exemplul urmtor:
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
<DT>WWW</DT>
<DD>World Wide Web!</DD>
</DL>
HTML
Hyper Text Markup Language
WWW
World Wide Web
Dup cum se poate observa, descrierea definiiei este aliniat

mai interior, tocmai pentru a sublinia caracterul relaiei de
subordonarea existent fa de termenul definiiei.
5.5. Listele imbricate
Uneori este necesar s folosim anumite tipuri de liste n interiorul

altora. mpreun, acestea formeaz listele imbricate. n astfel de
cazuri, lista interioar nu mai trebuie s fie delimitat de tag-ul <LI>.
Modul de folosire a listelor imbricate este redat n exemplul
urmtor:
<OL type="I">
<LI>Introducere
<OL TYPE="1">
<LI>Cuvnt nainte
<LI>Notiuni generale
</OL>
<LI>Realizarea unei pagini web
<OL TYPE="1" START="3">
<LI>Alegerea editorului HTML
<LI>Machetarea paginii
<LI>Elementele HTML
<UL TYPE="circle">
<LI>Sectiunea HEAD
<LI>Sectiunea BODY
</UL>
<LI>Apleturi JAVA
</OL>
<LI>Optimizarea paginii web
<LI>Publicarea pe internet a paginii web
</OL>
I. Introducere
1. Cuvnt nainte
2. Notiuni generale
II. Realizarea unei pagini web
3. Alegerea editorului HTML
4. Machetarea paginii
5. Elementele HTML
Sectiunea HEAD
Sectiunea BODY
6. Apleturi JAVA
III. Optimizarea paginii web
IV. Publicarea pe internet a paginii web
Vom ncerca n continuare s punem n practic cele prezentate

anterior combinate cu elemente de formatare a textului i vom crea un
nou fiier numit test4.html care va conine urmtoarele linii de cod:
<HTML>
<HEAD>
<TITLE>Utilizarea listelor</TITLE>
</HEAD>
<BODY>
<B>
<OL type="I"><FONT color="blue" size="4">
<LI>Introducere
<OL TYPE="1"><FONT size="3">
<LI>Cuvnt nainte
<LI>Notiuni generale
</OL><FONT color="red" size="4">
<LI>Realizarea unei pagini web
<OL TYPE="1" START="3"><FONT size="3">
<LI>Alegerea editorului HTML
<LI>Machetarea paginii
<LI>Elementele HTML
<UL TYPE="circle"><FONT color="green"
size="2">
<LI>Sectiunea HEAD
<LI>Sectiunea BODY</FONT>
</UL>
<LI>Apleturi JAVA</FONT>
</OL>
<FONT color="brown"><LI>Optimizarea paginii
web</FONT>
<FONT color="purple"><LI>Publicarea pe internet
a paginii web
</FONT>
</OL></FONT>
</B></BODY>
</HTML>

CAP. 6. HYPERLINK-URI
Hypertext-ul reprezint o metod de realizare a unui text, ideal

pentru utilizarea pe calculator, care permite cititorului s parcurg
materialul n maniera aleas de el. Pentru a realiza un hypertext, mai
nti tranai informaiile n uniti mici, manevrabile, cum ar fi
paginile individuale de text. Aceste uniti sunt numite noduri. Apoi
nglobai n text hyperlink-uri (numite i ancore). Cnd cititorul
execut click pe un hyperlink, programul de hypertext afieaz un nod
diferit. Procesul de navigare printre nodurile legate n acest fel se
numete rsfoire (browsing). O colecie de hyperlink-uri este numit
web. WWW (World Wide Web) este un sistem de hypertext la scar
global. Aplicaiile de hypertext sunt foarte utile n special atunci cnd
se lucreaz cu cantiti mari de text, ca n cazul enciclopediilor sau al
documentelor juridice.
Pentru simplificare, ca i pn acum, cnd facem referire la
hyperlink-uri le vom numi simplu link-uri.
Pentru a include un link ctre un document propriu sau aflat pe
un alt server, este absolut necesar s cunoatei adresa exact a
acelui document i modul de inserare a unei ancore n propriul
document HTML.
Adresa unui document poate fi inserat la modul relativ sau la
modul absolut.
De exemplu:
test.html reprezint o referin relativ
n vreme ce
C:\Ghid programare HTML\Teste\test.html reprezint o
referin absolut
6.2. URL-uri
n Internet, fiecare document ar propria sa adres identificat

printr-un URL (Uniform Resource Locator). Acesta const dintr-o
combinaie de elemente scrise ntr-o anumit ordine, astfel:
protocol://numele_de_domeniu/cale
unde:
protocol reprezint software-ul sau maniera prin care serverul

de domeniu comunic documentul unui browser
numele_de_domeniu reprezint numele alocat pe Internet
serverului ce gzduiete documentul web
calea reprezint numele directorului (i al eventualelor
subdirectoare) unde este stocat documentul web
Iat cteva exemple de URL-uri:
http://ghid-html.dap.ro/index.html
tipul protocolului este http
ghid-html este, n acest caz, numele unui subdomeniu
din domeniul dap situat n zona ro (ce identific site-urile
romneti)
index.html este numele unui fiier
http://ghid-html.dap.ro/teste/computer.jpg
tipul protocolului este http
ghid-html este, ca i mai sus, numele unui
subdomeniu
teste reprezint numele unui subdirector
computer.jpg este numele unui fiier
ftp://ftp.uni-
stuttgart.de/pub/download/madyn_v15_160107.zip
tipul protocolului este ftp. Acest serviciu este utilizat
pentru a crea link-uri ctre fiiere ce pot fi descrcate
dup servere ftp.
gazda este ftp.uni-stuttgart.de
pub i download reprezint numele unor
subdirectoare
madyn_v15_160107.zip este numele unui fiier
mailto: ghid-html@dap.ro
tipul serviciului este identificat ca fiind mail client
program. Acest link va lansa n execuie clientul de mail
al utilizatorului.
destinatarul email-ului este ghid-html@dap.ro
6.3. Ancore
Ancorele (anchors) reprezint elementele HTML care precizeaz

att sursa ct i destinaia unui link. Sunt marcate prin tag-ul de
deschidere <A> i necesit tag-ul de nchidere </A>.
O ancor poate fi utilizat n dou moduri:
1. Pentru a crea un semn de carte (bookmark) n interiorul unui
document utiliznd atributul NAME sau ID. Odat creat, acesta
devine inta potenial a unui link.
2. Pentru a crea un link ctre alt document sau ctre un semn
de carte utiliznd atributul HREF, valoarea atributului fiind dat
de un anumit URL.
Not: V reamintim c schema de culori ce va fi afiat

pentru link-uri este controlat de atributele elementului BODY,
i anume LINK, VLINK i ALINK, descrise n Capitolul 2 din
acest ghid. Nespecificarea acestor valori va determina
browser-ul s afieze schema de culori implicit.
Pentru exemplificare vom folosi urmtoarele secvene de cod:
<A NAME="nume_semn_de_carte">Semn de carte</A>

are ca rezultat atribuirea unui semn de carte
<A HREF="#nume_semn_de_carte ">Du-te la semnul de

carte </A>
are ca rezultat realizarea unui link n document ctre semnul de
carte
<A HREF="http://ghid-
html.dap.ro/teste/test5.html">Du-te la Testul 5 pe site-
ul XXXXXXXXX </A>
are ca rezultat realizarea unui link n document ctre un alt
document pe Internet, n acest caz test5.html
Desigur, poate fi combinat link-ul ctre o pagin cu link-ul intern

existent pe acea pagin, avnd ca rezultat specificarea unei seciuni
anumite dintr-un document web.
<A HREF="http://ghid-
html.dap.ro/teste/test5.html#semn_de_carte"> Du-te la
semnul de carte din cadrul Testului 5 pe site-ul XXXXX </A>
Tot cu ajutorul ancorelor se poate trimite un mail printr-un

singur click n interiorul unui document, astfel:
<A HREF="mailto:emailuser@host">Nume</a>
Un alt atribut important al acestui element este reprezentat de

TARGET, care specific locul n care se va deschide URL-ul. Valorile pe
care le poate luat acest atribut sunt:
_blank URL-ul int se va deschide ntr-o nou fereastr
(este implicit, deci poate fi i nespecificat)
_top URL-ul int se va deschide n fereastra curent
_self URL-ul int se va deschide n acelai cadru din
care s-a dat click
_parent URL-ul int se va deschide n cadrul printe
(dar despre cadre vom vorbi ceva mai trziu)
Pentru a pune n practic cele prezentate n acest capitol, vom

crea un nou fiier numit test5.html care va conine urmtoarele linii
de cod:
<HTML>
<HEAD>
<TITLE>Inserarea link-urilor n document</TITLE>
</HEAD>
<BODY>
<H2><A name="C1">Capitolul 1</A></H2>
<P>Acest capitol trateaza problematica ba bla bla</P>
<P>Dati click pe <A href="#C1">Vedeti si Capitolul
1</A> si veti avea ca rezultat deplasarea documentului la
Capitolul 1.</P>
<P>Dati click pe <A href="http://ghid-
html.dap.ro/teste/test5.html#C3" target="_blank">Capitolul
3 din Testul 5 pe site-ul XXXXX </A> si veti avea ca rezultat o
fereastra noua pozitionata la Capitolul 3 din Testul 5 pe site-ul
XXXXX.</P>
</BODY>
</HTML>

CAP. 7. FOLOSIREA IMAGINILOR
7.1. Tipuri de imagini
Deoarece nu toate tipurile de imagini sunt suportate de

browsere, vom proceda mai nti la o trecere n revist a principalelor
tipuri ce pot fi utilizate n documentele web.
Singurele tipuri care pot fi utilizate fr restricii n browsere
sunt urmtoarele:
GIF: Graphic Interchange Format, sunt imagini care au

maximum 256 de culori. Formatul GIF este cel mai bun pentru
redarea imaginilor de tipul logo-uri, pictograme i butoane. Este
formatul cel mai rspndit pe Internet.
O categorie aparte a acestui format o constituie fiierele animate
de tip GIF care contribuie la obinerea unor efecte deosebite.
JPG, JPEG: Joint Photographic Expert Group, sunt imagini care
pot avea pn la 16,7 milioane de culori. Formatul JPEG este
recomandat pentru redarea fotografiilor i a altor imagini are
necesit o claritate deosebit.
Mai exist cteva formate care pot fi utilizate, dar cu anumite

rezerve, ntruct nu vor fi recunoscute n toate browserele, fiind
recomandat convertirea lor cu programe specializate (Adobe
PhotoShop, Corel PhotoPaint etc.) n formatele prezentate anterior.
Aceste formate sunt:
PNG: Portable Network Graphics

BMP: MS Windows BitMaP
TIFF: Tagged Image File Format
PCX: PC Paintbrush Format
La alegerea unei imagini trebuie avut n vedere faptul c cele de

dimensiuni mari (ne referim la dimensiunea fiierului, nu la suprafaa
imaginii) vor ncetini n mod considerabil ncrcarea unui document
web. O pagin web care conine multe imagini se va ncrca mult mai
greu dect o pagin web care conine mai mult text i mai puine
imagini. De aceea trebuie s realizai un echilibru ntre rapiditatea de
ncrcare i design-ul site-ului.
7.2. Inserarea imaginilor
Dac v-ai hotrt s inserai o imagine ntr-un document web,

va trebui s folosii tag-ul <IMG>. Prezena tag-ul de nchidere
</IMG> este opional.
Spre deosebire de alte tag-uri, la folosirea tag-ului <IMG> este
obligatorie specificarea atributui <SRC> care stabilete sursa
(source) imaginii ce trebuie ncrcat, i este recomandat folosirea
atributului <ALT>, care stabilete textul ce descrie imaginea i
funcioneaz ca un tag (alternative). Este afiat atunci cnd vizitatorul
deplaseaz cursorul mouse-ului deasupra imaginii sau cnd sunt
probleme cu ncrcarea imaginii.
Vom exemplifica cele de mai sus folosind urmtorul cod:
<HTML>
<HEAD>
<TITLE>Inserarea unei imagini</TITLE>
</HEAD>
<BODY>
<IMG SRC="computer.jpg" ALT="Un computer in
imagine">
</BODY>
</HTML>
Dac nu avei un fiier de tip imagine (.gif sau .jpg) pe care s-l
folosii ca exemplu, putei descrca fiierul nostru dnd click aici.
Not: Fii ateni la calea utilizat la inserarea fiierului

imagine! n acest exemplu fiierul computer.jpg este salvat n
acelai director ca i fiierul test6.html.
Rezultatul va fi identic i dac folosii imaginea existent pe site-

ul nostru, n condiiile n care i specificai calea exact i avei o
conexiune internet permanent, astfel:
<HTML>
<HEAD>
<TITLE>Inserarea unei imagini</TITLE>
</HEAD>
<BODY>
<IMG SRC="http://ghid-
html.dap.ro/teste/computer.jpg" ALT="Un computer in
imagine">
</BODY>
</HTML>
7.3. Formatarea imaginilor
Formatarea imaginilor se realizeaz utiliznd celelalte atribute

opionale care definesc acest tag, i anume:

top
bottom
Specific cum va fi aliniat imaginea n
align middle
raport cu textul ce o nconjoar.
left
right
border pixels Definete o bordur n jurul unei imagini.
height pixels Definete nlimea unei imagini.
Definete spaiul liber din prile laterale
hspace pixels
ale unei imagini.
Definete imaginea de tip server-side
ismap URL
image map.
Adresa URL ctre un document care
longdesc URL
conine o descriere lung a imaginii.
Definete imaginea de tip client-side
usemap URL image map. Se folosete n combinaie cu
tag-urile <map> i <area>.
Definete spaiul liber din prile de sus i
vspace pixels
de jos ale unei imagini.
width pixels Definete limea unei imagini.
n continuare vom prezenta modul de inserare i de formatare a

unor imagini, astfel c vom crea un nou fiier numit test6.html care
va conine urmtoarele linii de cod:
<HTML>
<HEAD>
<TITLE>Inserarea si formatarea unor imagini</TITLE>
</HEAD>
<BODY>
<P>O imagine in text
<IMG SRC="http://ghid-
html.dap.ro/teste/computer.jpg" ALT="imaginea 2"
ALIGN="middle" HEIGHT="55" WIDTH="55"
BORDER="5"> aliniata pe verticala la mijloc (middle),
redimensionata, dimensiunile fiind controlate de
atributele "height" si "width", si cu margine (border) de 5
pixeli.</P>
<P ALIGN="justify">Iata un text, cu imagini
redimensionate, aliniate una la stanga si una la dreapta,
una cu spatiere laterala si una cu spatiere verticala.<IMG
SRC="computer.jpg" ALT="imaginea 3" ALIGN="left"
HEIGHT="65" WIDTH="55" HSPACE="30"> <IMG
SRC="computer.jpg" ALT="imaginea 3" ALIGN="right"
HEIGHT="65" WIDTH="55" VSPACE="20"> Iata un text,
cu imagini redimensionate, aliniate una la stanga si una la
dreapta, una cu spatiere laterala si una cu spatiere
verticala. Iata un text, cu imagini redimensionate, aliniate
una la stanga si una la dreapta, una cu spatiere laterala si
una cu spatiere verticala. Iata un text, cu imagini
redimensionate, aliniate una la stanga si una la dreapta,
una cu spatiere laterala si una cu spatiere verticala. Iata
un text, cu imagini redimensionate, aliniate una la stanga
si una la dreapta, una cu spatiere laterala si una cu
spatiere verticala.</P>
</BODY>
</HTML>

7.5. Folosirea imaginilor ca link-uri
A devenit o mod nlocuirea link-urilor de tip text cu link-uri de

tip imagine sau pictogram (icon). De exemplu, a devenit o practic
uzual nlocuirea textului next cu o pictogram simboliznd o
sgeat orientat spre dreapta sau cu o pictogram reprezentnd o
mn cu arttorul indicnd spre dreapta.
n mod obinuit, o imagine plasat n interiorul unei ancore
(adic ntre tag-urile <A> i </A>) devine o parte a coninutului
ancorei, astfel nct un click pe imaginea respectiv va avea acelai
rezultat ca i un click pe textul unei ancore.
Browser-ele pot modifica imaginile ntr-un mod speciale (de
obicei adugndu-le o bordur) pentru a indica faptul c reprezint un
link.
Sintaxa folosirii acestor tag-uri este urmtoarea:
<A HREF="document.html"> <IMG SRC="imagine.gif"
BORDER="pixeli" WIDTH="pixeli" HEIGHT="pixeli" ALT="Text
alternativ"> </A>
Standardul HTML ofer posibilitatea s includei mai multe link-

uri ntr-o singur imagine, astfel nct dac dai click n zone diferite
ale imaginii, vor fi accesate link-uri diferite. Imaginile de acest tip sunt
cunoscute sub numele de imagini-hart (image maps).
Exist dou posibiliti de a crea astfel de imagini-hart:
1. prin folosirea atributului ismap n tag-ul <IMG> sunt create
imaginile de tip server-side image map
2. prin folosirea atributului usemap n tag-ul < IMG > sunt
create imaginile de tip client-side image map
Deoarece pentru imaginile de tip server-side image map este
necesar accesul la serverul pe care se afl stocat imaginea, precum i
faptul c sunt generate ntrzieri la ncrcarea paginilor, ne vom ocupa
numai de imaginile client-side image map care nu prezint aceste
neajunsuri.
7.6. Imagini de tip client-side image map
Aceste imagini sunt create prin folosirea atributului usemap n

elementul < IMG > i definite prin elementele speciale marcate de tag-
urile <MAP> i <AREA> (se folosesc numai mpreun, elementul
<AREA> fiind ntotdeauna inclus n elementul <MAP>).
Tag-ul <MAP> definete o imagine ca fiind de tip hart, iar tag-
ul <AREA> specific coordonatele zonelor imaginii-hart, precum i
link-urile corespunztoare fiecrei zone.
Atributul usemap preia valoarea atributelor id sau name (n
funcie de browser), stabilite n tag-ul <MAP>.
Trebuie amintit faptul c doar tag-ul <MAP> necesit tag-ul de
nchidere </ MAP>.
Atributele opionale care definesc tag-ul <MAP> sunt:

id nume_hart Atribuie o denumire imaginii-hart
Este identic cu id, se folosete doar pentru
name nume_hart a asigura compatibilitatea cu anumite
browsere
Atributele opionale care definesc tag-ul <AREA> sunt:

Specific o descriere
alt text
alternativ a zonei active
rect sau rectangle Definete tipul de zon
shape circ sau circle (dreptunghi, cerc sau
poly sau polygon poligon)
dac shape="rect" atunci
coords="stnga,sus,dreapta,jos"
dac shape="circ" atunci Specific coordonatele
coords
coords="centru_x,centru_y,raz" zonei active
dac shape="poly" atunci
coords="x1,y1,x2,y2,..,xn,yn"
Specific URL-ul int al
href URL
zonei
true
nohref Exclude o zon din hart
false
URL-ul int se va
deschide ntr-o nou
_blank fereastr (este implicit,
deci poate fi i
nespecificat)
_parent URL-ul int se va
target deschide n fereastra
_self curent
URL-ul int se va
_top deschide n acelai cadru
din care s-a dat click
URL-ul int se va
deschide n cadrul printe
n continuare vom prezenta modul de utilizare a unei imagini-

hart, astfel c vom crea un nou fiier numit test7.html care va
conine urmtoarele linii de cod:
<HTML>
<HEAD>
<TITLE>Utilizarea unei imagini-harta</TITLE>
</HEAD>
<BODY>
<P>Dati click pe una din formele geometrice:</P>
<IMG SRC="http://ghid-html.dap.ro/teste/imagine-
harta.gif" WIDTH="268" HEIGHT="95 "ALT="Imagine de
tip harta" USEMAP="#harta">
<MAP ID="harta" NAME="harta">
<AREA SHAPE="rect" COORDS="0,0,65,95"
HREF="http://ghid-html.dap.ro/teste/dreptunghi.html"
TARGET="_blank" ALT="Dreptunghi">
<AREA SHAPE="circle" COORDS="125,47,40"
HREF="http://ghid-html.dap.ro/teste/cerc.html"
TARGET="_blank" ALT="Cerc">
<AREA SHAPE="poly"
COORDS="185,25,224,1,224,1,268,25,268,72,226,93,185
,71" HREF="http://ghid-
html.dap.ro/teste/hexagon.html" TARGET="_blank"
ALT="Hexagon">
</MAP>
</BODY>
</HTML>
Not: Pentru aflarea coordonatelor formelor geometrice

am folosit un program specializat Mapedit (este un
program shareware, poate fi folosit pentru testare numai
30 de zile i poate fi descrcat la adresa
http://www.boutell.com/mapedit)
CAP. 8. TABELE
8.1. Ce sunt tabelele?
Un tabel reprezint un ansamblu de date (cifre, simboluri,

informaii) afiate n celule sistematizate ntr-o structur format din
rnduri i coloane.
n afar de rolul de afia date, n HTML au i un rol important n
realizarea aspectului general al documentului web.
Celula unui tabel poate conine oricare din elementele HTML
acceptate n seciunea BODY, aceasta incluznd texte, imagini,
formulare, antete i chiar alte tabele.
Pentru a marca prezena unui tabel se folosete tag-ul de
deschidere <TABLE>. Acesta necesit tag-ul de nchidere
</TABLE>.
Elementul <TABLE> are urmtoarele sub-elemente:
- - Rndul tabelului (Table Row) marcat de tag-urile <TR>
</TR> (prezena sa este obligatorie)
- - Datele tabelului (Table Data) marcate de tag-urile <TD>
</TD> (prezena sa este obligatorie)
- - Antetul rndurilor i coloanelor (Table Header) marcat de
tag-urile <TH> </TH>
- - Coloana (Column) marcat de tag-ul <COL> ce nu
necesit tag de nchidere
- - Descrierea tabelului marcat de tag-urile <CAPTION>
</CAPTION>
- - Seciunea antetului tabelului (Table Header Section)
marcat de tag-urile <THEAD> </THEAD>
- - Seciunea corpului tabelului (Table Body Section) marcat
de tag-urile <TBODY> </TBODY>
- - Seciunea subsolului tabelului (Table Footer Section)
marcat de tag-urile <TFOOT> </TFOOT>
Formatarea tabelului se face ncepnd de sus n jos i de la
stnga la dreapta, fiind definite, secvenial, antetul i datele fiecrei
celule din fiecare coloan, progresnd n jos, rnd cu rnd.
Un exemplu coninnd cod HTML referitor la tabele, este
urmtorul:
<TABLE BORDER="1">
<TR>
<TH>Antetul Coloanei 1 </TH>
<TH>Antetul Coloanei 2 </TH>
</TR>
<TR>
<TD>Rndul 1 - Coloana 1</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Rezultatul va fi urmtorul:
8.2. Formatarea tabelelor
Aa cum am amintit i anterior, tabelele sunt de mare ajutor n

realizarea aspectului general al unui document web. Ele v permit
punerea n eviden a anumitor obiecte din document i sunt foarte
utile la crearea formularelor, aspect pe care l vom aborda n capitolul
urmtor.
Principalele atribute care v permit formatarea elementului
<TABLE> sunt urmtoarele:

left
Precizeaz modul de aliniere al tabelului n
align center
document.
right
background nume fiier O imagine folosit ca fundal pentru tabel.
bgcolor rgb(x,x,x) Precizeaz culoarea fundalului tabelului.
#xxxxxx
colorname
Definete grosimea bordurii din tabel
border pixels (dac nu se dorete bordur, aceasta ia
valoarea 0 sau nu se specific)
pixels Specific spaiul dintre marginile fiecrei
cellpadding
% celule i coninutul su.
pixels
cellspacing Specific spaiul dintre celule.
%
Are efect numai cnd atributul border>
0 i specific care pri ale bordurii sunt
vizibile:
void
- - nici o parte
above
- - numai partea de sus
below
- - numai partea de jos
frame vsides
- - numai prile de sus i de jos
hsides
- - numai prile laterale
lhs
- - numai partea din stnga
rhs
- - numai partea din dreapta
box
- - toate cele patru pri
border
- - toate cele patru pri
Specific asupra cror grupe de celule se
aplic regulile referitoare la bordur:
- - nici o regul (este implicit)
- - regulile se aplic grupelor de
none
rnduri sau de coloane
groups
rules - - regulile se aplic numai
rndurilor
rows
- - regulile se aplic numai
cols
coloanelor
all
- - regulile se aplic tuturor
celulelor
Specific o descriere mai detaliat a
summary text
tabelului
Specific limea ocupat de tabel n
% cadrul paginii web (n cazul n care nu se
width
pixels specific, limea va depinde de coninutul
tabelului)
S presupunem c dorim s afim n documentul nostru orarul

desfurrii anumitor cursuri. Tabelul va conine zilele de desfurare
(ca antete de coloan), orele de desfurare (ca antete de rnduri) i
denumirea cursurilor.
Pentru aceasta vom crea test8.html care va conine
urmtoarele linii de cod:
<HTML>
<HEAD>
<TITLE>Formatarea tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE><CAPTION>Orar (fara bordura aliniat la
stanga) </CAPTION>
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
<TD>Curs JavaScript</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs PHP</TD>
<TD>Curs HTML</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD>Curs PHP</TD>
<TD>Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Not: HTML nu accept celule goale, aa c a trebuit s
crem o celul care conine caracterul
Vom aduga tabelului nostru o bordur i l vom alinia pe centrul

paginii. Pentru aceasta vom aduga elementului <TABLE> urmtoarele
atribute:
<TABLE border="1" align="center"><CAPTION>Orar (cu

bordura aliniat la centru) </CAPTION>
i rezultatul va fi urmtorul:
n continuare vom ngroa puin bordura, vom aduga un fundal
galben tabelului i i vom mri limea, astfel nct s acopere ntreaga
fereastr. Aceasta se realizeaz astfel:
<TABLE border="5" align="center" bgcolor="yellow"

width="100%"> <CAPTION>Orar (cu bordura de 5 pixeli, cu
fundal galben, aliniat la centru) </CAPTION>
iar rezultatul va fi urmtorul:

n loc de o singur culoare putem folosi o imagine ca fundal.
Pentru aceasta vom nlocui atributul bgcolor cu background i vom
specifica denumirea fiierului de tip imagine:
<TABLE border="5" align="center"

background="fundal.gif" width="100%"> <CAPTION>Orar (cu
bordura de 5 pixeli, cu imagine pe fundal, aliniat la centru)
</CAPTION>
iar vom obine urmtorul rezultat:

S ne ocupm i de spaierea dintre celule dnd atributului
cellspacing valoarea 10 (implicit acesta are valoarea 0).
<TABLE border="1" align="center" cellspacing="10"

width="100%"> <CAPTION>Orar (cu spatiu intre celule de 10
pixeli) </CAPTION>
Mrirea sau micorarea spaiului dintre pereii unei celule i

coninutul su se realizeaz prin alocarea unor valori corespunztoare
atributului cellpadding, astfel:
<TABLE border="1" align="center" cellpadding="10"

width="100%"> <CAPTION>Orar (cu spatiu in interiorul
celulelor de 10 pixeli) </CAPTION>
iar rezultatul va fi urmtorul:

Iat i o combinaie a atributelor folosite pn acum:
<TABLE border="5" align="center" bgcolor ="yellow"

cellpadding="10" cellspacing="10" width="100%">
<CAPTION>Orar (cu bordura de 5 pixeli, fundal galben si
spatiu atat in interiorul celulelor cat si intre celule de 10 pixeli)
</CAPTION>
ce va avea urmtorul rezultat:

n continuare vom vedea ce efecte se obin prin folosirea
atributelor frame i rules. Aceste dou atribute sunt strns legate de
folosirea atributului border, prin urmare vor fi utilizate toate 3
concomitent. De exemplu:
<TABLE border="1" rules="none" frame="box">

<CAPTION>Orar</CAPTION>
va avea ca efect obinerea unui tabel fr bordur n interior:

Pentru a obine un tabel fr bordur exterioar, ci numai cu
cele interioare, vom da urmtoarele valori:
<TABLE border="1" rules="all" frame="void">
i vom rezultatul va fi:
n funcie de necesiti, putei combina aceste atribute pentru a

obine rezultatele dorite.
8.3. Sub-elementele tabelelor

n continuare vom analiza fiecare sub-element al tabelelor i
atributele sale.
Aa cum ai putut vedea mai sus, fiecare tag <TR> desemneaz
un rnd ntr-un tabel. Fiecare rnd poate conine unul sau mai multe
elemente <TD> sau <TH>.
Din punct de vedere tehnic, tag-ul </TR> este opional, dar
folosirea lui v ajut la eliminarea confuziilor.
Principalele atribute care v permit formatarea acestui element
sunt urmtoarele:

left
center
Precizeaz modul de aliniere pe orizontal
Align right
a coninutului.
justify
char
top
middle Precizeaz modul de aliniere pe vertical a
Valign
bottom coninutului.
baseline
rgb(x,x,x)
Precizeaz culoarea fundalului unui rnd
bgcolor #xxxxxx
ntreg.
colorname
Pentru exemplificare, vom folosi fiierul creat anterior, i anume

test8.html, n care vom include:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR BGCOLOR="cyan">
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR ALIGN="left" VALIGN="middle">
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD><FONT SIZE="6">Curs PHP</FONT></TD>
</TR>
<TR ALIGN="center" VALIGN="bottom">
<TH>12-14</TH>
<TD><FONT SIZE="6">Curs MySQL</FONT></TD>
<TD>Curs HTML</TD>
</TR>
<TR ALIGN="right" VALIGN="baseline">
<TH>14-16</TH>
<TD><FONT SIZE="6">Curs MySQL</FONT></TD>
<TD>Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Dac celelalte atribute produc efecte vizibile, consider c trebuie

oferite cteva explicaii suplimentare privind deosebirea ntre alinierea
vertical BOTTOM i BASELINE.
Alinierea BOTTOM se face dup cea mai de jos cot a
caracterelor, n vreme ce alinierea BASELINE are ca punct de reper
baza textului, dup cum se poate vedea n imaginea de mai jos:
Mai departe ne vom ocupa de tag-ul <TD> care desemneaz o
celul ce conine date ntr-un tabel.
Principalele atribute care v permit formatarea acestui
elementului sunt urmtoarele:

left
center
align right
a coninutului.
justify
char
top
valign
bottom coninutului.
baseline
rgb(x,x,x)
bgcolor #xxxxxx Precizeaz culoarea fundalului celulei.
colorname
background nume fiier O imagine folosit ca fundal pentru celul.
Specific nlimea ocupat de celul n
% cadrul tabelului (n cazul n care nu se
height
pixels specific, nlimea va depinde de
coninutul celulei)
Specific limea ocupat de celul n
% cadrul tabelului (n cazul n care nu se
width
pixels specific, limea va depinde de coninutul
celulei)
Indic numrul de celule din tabel care vor
colspan numr
fi unite pe o coloan.
Indic numrul de celule din tabel care vor
rowspan numr
fi unite pe un rnd.
nowrap nowrap Se folosete pentru a dezactiva ajustarea
textului la limea unei celule
(funcioneaz numai dac n-a fost definit
valoarea atributului "width").
Pentru exemplificare, vom folosi fiierul creat anterior, i anume

test8.html, n care vom include:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH WIDTH="40">10-12</TH>
<TD BGCOLOR="cyan">Curs HTML</TD>
<TD ROWSPAN="3" BACKGROUND="fundal.gif"
NOWRAP="nowrap"><B>Orict de mare ar fi continutul
acestei celule, <BR>textul nu va trece pe rndul urmtor fr
folosirea<BR>
tag-ului BR care execut ruperea rndului. </TD>
</TR>
<TR>
<TH>12-14</TH>
<TD COLSPAN="2" ALIGN="center"
HEIGHT="60">Curs JavaScript</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD ALIGN="right">Curs JavaScript</TD>
<TD BGCOLOR="orange">Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Not: Exist numeroase probleme legate de modul n care
browsere diferite interpreteaz atributul width, rezultatul
afiat putnd diferi foarte mult de la caz la caz. Dac totui
considerai util folosirea acestui atribut, recomandarea
noastr e s-l definii pentru fiecare celul n parte
concomitent cu definirea acestuia pentru ntregul tabel, astfel
nct suma valorilor alocate celulelor s corespund cu
valoarea alocat tabelului.
Referitor la tag-ul <TH> v vom spune doar c funcioneaz

aproape identic cu tag-ul <TD>, avnd aceleai atribute, cu excepia
faptului c <TH> specific unei celule c este antet pentru un rnd sau
pentru o coloan, coninutul de tip text fiind automat ngroat.
Sub-elementul Coloan marcat de tag-ul <COL> definete

valorile atributelor pentru una sau mai maulte coloane ale unui tabel.
Se poate folosi numai n interiorul tag-ului <TABLE>, dar nainte de
oricare dintre tag-urile <TR>, <THEAD> sau <TBODY>.
Fiecare tag <COL> utilizat definete proprietile unei singure
coloane, exceptnd cazul n care nu este utilizat atributul span pentru
a indica mai multe coloane. Deci, primul tag <COL> definete
proprietile primei coloane, al doilea tag <COL> definete
proprietile celei de-a doua coloane etc.
Atributele care permit formatarea sub-elementului <COL> sunt
urmtoarele:
left
center Precizeaz modul de aliniere al datelor n
align
right coloan.
justify
top
valign
bottom coninutului n coloan.
baseline
rgb(x,x,x)
bgcolor #xxxxxx Precizeaz culoarea fundalului coloanei.
colorname
% Specific limea ocupat de coloan n
width
pixels cadrul tabelului.
Precizeaz numrul de coloane crora le
span numr
sunt definite proprietile.
Pentru exemplificare, vom folosi fiierul test8.html, care va

conine urmtoarele:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1">
<COL>
<COL valign="top" bgcolor="yellow" span="2">
<COL align="right" width="120">
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Not: Observai folosirea tag-ului <COL> fr nici un

atribut pnetru prima coloan. n cazul n care dorim s folosim
acest tag numai pentru o anumit coloan, atunci trebuie
folosit pentru toate coloanele precedente, chiar dac nu
produce nici o modificare a formatrii coninutului.
Ne vom referi puin i la tag-ul <CAPTION> pe care l-am folosit

chiar de la primul exemplu. Vom preciza faptul c are un singur
atribut, i anume align care poate lua valorile left, right, top i
bottom care indic locul n care va fi poziionat descrierea tabelului.
De asemenea, nu vom insista nici asupra elementelor

<THEAD>, <TBODY> i <TFOOT> datorit folosirii lor extrem de
rar, n principal din cauza incompatibilitii cu diverse browsere, dar i
a faptului c folosirea lor nu aduce foarte multe avantaje utilizatorului.
Atributele lor sunt urmtoarele:
left
center
align right
a coninutului.
justify
char
top
valign
bottom coninutului.
baseline
rgb(x,x,x)
Precizeaz culoarea fundalului unei seciuni
bgcolor #xxxxxx
ntregi.
colorname
Pentru exemplificare am ales urmtoarele linii de cod:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1">
<THEAD valign="top" bgcolor="yellow">
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
</THEAD>
<TBODY align="center" bgcolor="cyan">
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TH colspan="4">Prof. Ion Popescu</TH>
</TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
n continuare vom pune n practic cele prezentate n acest

capitol, combinnd (att ct se poate) elementele prezentate:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="5" cellpadding="5" cellspacing="15"
bgcolor="#F5F5DC"> <CAPTION align="bottom"> Orarul
cursurilor pentru programatori Web</CAPTION>
<COL align="center" bgcolor="cornsilk">
<COL align="center" width="120" span="3"
bgcolor="bisque">
<THEAD><TR bgcolor="#FFFFEE"><TH
colspan="4">Curs programatori Web
</TH></TR></THEAD>
<TBODY><TR bgcolor="cornsilk">
<TH>Ora</TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD rowspan="2">Curs MySQL</TD>
<TD>Curs PHP</TD>
</TR>
<TR>
<TH height="50">14-16</TH>
<TD>Curs PHP</TD>
<TD>Curs HTML</TD>
</TR></TBODY>
<TFOOT><TR bgcolor="#FFFFEE"><TD colspan="4"
align="right"><FONT
color="#8B0000"><B>Conferentiar prof. Ion Popescu
</B> </FONT></TD></TR></TFOOT>
</TABLE>
</BODY>
</HTML>
CAP. 9. CADRE
Cadrele v permit divizarea ferestrei browser-ului n mai multe

zone dreptunghiulare, dispuse pe rnduri i/sau coloane, fiecare dintre
acestea coninnd un document web diferit. Fiecare astfel de zon
poart denumirea de cadru (frame).
Dintre avantajele oferite de folosirea cadrelor amintim faptul c
reprezint cea mai simpl modalitate de a realiza un document ce
conine pri statice i pri variabile (care se pot schimba). Astfel,
meniurile, logo-urile, mesajele i orice alte informaii mai dorim pot fi
inserate ntr-un cadru ce va rmne permanent vizibil.
Dezavantajele constau mai ales n faptul c nu toate browserele
suport cadre, prin urmare sunt necesare dou versiuni ale aceluiai
site (cu cadre i fr cadre) iar motoarele de cutare nu indexeaz
corespunztor un site care conine cadre.
O pagin ce conine cadre reprezint de fapt un document cu
mai multe pagini, fiecare cadru coninnd o pagin web. n afar de
acestea, mai exist un document web care descrie modul n care va fi
mprit pagina n cadre.
De exemplu, pentru a crea un document cu dou cadre (unul n
stnga i unul n dreapta) este nevoie de trei documente web. n
imaginea de mai jos sunt reprezentate aceste documente aa cum
sunt ele afiate de browsere.
doc1.html doc2.html
doc.html
n acest exemplu, doc.html reprezint documentul care descrie
modul n care fereastra browser-ului va fi divizat n cele dou zone
dreptunghiulare marcate prin cadrele ce conin celelalte dou
documente web.
9.2. Structura unei pagini ce definete cadre
Definirea cadrelor se realizeaz prin folosirea elementului

<FRAMESET> ce se plaseaz ntr-un document web n locul
elementului <BODY>.
Elementul <FRAMESET> descrie modul n care fereastra
browser-ului va fi mprit, mai exact stabilete numrul i
dimensiunile cadrelor (zonelor dreptunghiulare) dispuse pe rnduri
i/sau coloane. Necesit tag de nchidere </FRAMESET>
Atributele acestui element sunt legate de existena rndurilor
sau coloanelor, precum i de modul de delimitare a acestora unele de
altele:

pixels
Definete numrul i mrimea coloanelor
cols %
ntr-un document.
*
pixels
Definete numrul i mrimea rndurilor
rows %
ntr-un document.
*
yes / no Stabilete dac exist sau nu bordur
frameborder
1/0 pentru cadre
framespacing Stabilete grosimea bordurii cadrelor
sau pixels (framespacing n Internet Explorer i
border border n Netscape).
rgb(x,x,x)
bordercolor #xxxxxx Precizeaz culoarea bordurii cadrelor.
colorname
n interiorul elementului <FRAMESET> este elementul

<FRAME>, cte unul pentru fiecare cadru, care are rolul de a stabili
documentele corespunztoare fiecruia dintre cadre.
Pentru exemplificare vor crea un document cu dou cadre
dispuse vertical. n acest sens vor trebui create cele trei documente
corespunztoare.
Vom crea fiierul doc1.html, corespunztor cadrului 1, cu
urmtoarea structur:
<HTML>
<HEAD>
<TITLE>Documentul 1</TITLE>
</HEAD>
<BODY BGCOLOR="cyan">
<H3>Documentul 1 in cadrul 1</H3>
</BODY>
</HTML>
Vom crea i fiierul doc2.html, corespunztor cadrului 2, cu

urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="yellow">
</BODY>
</HTML>
n final vom crea fiierul test9.html, care va stabili dispunerea

cadrelor, cu urmtoarea structur:
<HTML>
<HEAD>
<TITLE>Folosirea cadrelor</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%">
<FRAME SRC="doc1.html">
</FRAMESET>
</HTML>
n cazul n care dorim ca cele dou cadre s fie dispuse orizontal,

fiierul test9.html va avea urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%">
</FRAMESET>
</HTML>
iar rezultatul afiat va fi urmtorul:
Pentru realizarea unei structuri combinate, cu trei cadre, dintre

care unul pe orizontal i dou pe vertical, vom crea fiierul
doc3.html, corespunztor cadrului 3, cu urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="beige">
</BODY>
</HTML>
iar fiierul test9.html va avea urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
</FRAMESET>
</FRAMESET>
</HTML>
n final vom analiza i atributele ce definesc bordura, astfel c

vom folosi urmtoarele exemple:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%" FRAMEBORDER="yes"
FRAMESPACING="15" BORDERCOLOR="blue">
</FRAMESET>
</FRAMESET>
</HTML>
Pentru eliminarea bordurilor, atributele frameborder i

framespacing vor primi valoarea 0, iar rezultatul afiat va fi
urmtorul:
9.3. Atributele cadrelor
Elementul <FRAME> definete fiecare cadru dintr-un document.

Este obligatorie prezena acestui element n fiecare seciune marcat
de tag-ul <FRAMESET>. Nu necesit tag de nchidere.
Atributele ce caracterizeaz acest element sunt urmtoarele:

Reprezint link-ul ctre fiierul ce se va
src URL
deschide n cadrul respectiv..
yes / no Stabilete dac exist sau nu bordur
frameborder
1/0 pentru cadrul respectiv.
Reprezint link-ul ctre o descriere lung
longdesc URL folosit pentru browserele ce nu suport
cadre.
Definete marginile de sus i de jos ale
marginheight pixels
cadrului.
Definete marginile din stnga i din
marginwidth pixels
dreapta ale cadrului.
noresize noresize Cnd este setat, acest atribut mpiedic
ajustarea mrimii cadrului de ctre
utilizatori.
yes
Determin prezena sau absena barei de
scrolling no
derulare (scrollbar).
auto
name text Definete denumirea cadrului.
Specific unde va deschis URL-ul int:
_blank ntr-o fereastr nou;
_blank _self n acelai cadru din care
_self a fost accesat;
target
_parent _parent n cadrul printe;
_top _top - direct n fereastra
browser-ului, lund locul
documentului existent.
Pentru a observa efectele acestor atribute, ne vom folosi de

fiierul test9.html cu urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
</FRAMESET>
</FRAMESET>
</HTML>
Atributul src a fost folosit n exemplele anterioare, prin urmare

nu vom insista asupra lui.
Vom aduga atributul frameborder="no" cadrului nr. 2
(<frame src="doc2.html" frameborder="no">) i vei observa
diferena:
Cadrul 2 cu bordur Cadrul 2 fr bordur
n continuare vom aduga i atributul marginheight cadrului

nr. 2 (<frame src="doc2.html" frameborder="no" marginheight="0">)
pentru a pune n eviden modul n care se modific marginile de sus
i de jos ale cadrului:
Cadrul 2 cu margini implicite Cadrul 2 fr margini sus i

jos
Adugnd i atributul marginwidth cadrului nr. 2 (<frame
src="doc2.html" frameborder="no" marginheight="25"
marginwidth="25">) vom pune n eviden modul n care se modific
marginile din stnga i din dreapta ale cadrului:
Cadrul 2 cu margini implicite Cadrul 2 cu margini de 25
pixeli
Pentru a pune n eviden atributul noresize, mai nti ncercai

s poziionai cursorul de la mouse pe bordura dintre cadre, dup care,
n momentul n care v apare semnul " ", innd apsat pe butonul
din stnga de la mouse, mutai bordura ce separ cadrele:
Aplicnd atributul noresize (<frame src="doc2.html"

noresize>), facilitatea de redimensionare a cadrelor va fi dezactivat,
prin urmare nu va mai aprea semnul " ", ci doar cursorul normal
al mouse-ului, ca n imaginea de mai jos.
Atributul scrolling v permite afiarea barei de derulare n

fiecare cadru. Valoarea implicit este auto, caz n care, n funcie de
mrimea coninutului, browser-ul va decide dac este necesar
afiarea barei de derulare. n cazul atribuirii valorii yes, bara de
derulare va fi afiat ntotdeauna, iar n cazul atribuirii valorii no,
bara de derulare nu va fi afiat deloc.
Pentru exemplificare, vom aduga coninut celor trei documente
ce populeaz cadrele, i anume doc1.hml, doc2.hml i doc2.hml.
Prin folosirea atributului name, cadrelor le pot fi atribuite
denumiri, ceea ce va poate ajuta la identificarea mai usoara a
acestora.
9.4. Destinaii
Cnd creai link-uri ntr-un document web ce conine cadre, este

necesar folosirea unui atribut suplimentar denumit target. Acesta
este corelat cu atributul name prezentat anterior.
Atributul target care poate aprea n urmtoarele elemente
<A>, <AREA>, <BASE> i <FORM>.
Exemple:
<A HREF="file.htm" TARGET="nume_fereastra">

<AREA SHAPE="RECT" COORDS="5,6,2,4"
HREF="file.html" TARGET="nume_fereastra">
<BASE TARGET="nume_fereastra">
<FORM ACTION="cgi-bin/script"
TARGET="nume_fereastra">
Valorile posibile pentru atributul target sunt:

a) a) numele (valoarea atributului name) unei
ferestre deschise de browser sau numele (valoarea
atributului name) unui cadru ncrcat de browser
b) b) una din urmtoarele 4 inte speciale, ce
nu pot fi atribuite atributului name, fiind denumiri
rezervate cu funcii specifice:
TARGET="_blank" (documentul va fi ncrcat
ntr-o fereastr nou a browser-ului);
TARGET="_top" (documentul va fi ncrcat
direct n fereastra browser-ului, lund locul
documentului existent);
TARGET="_parent" (documentul va fi ncrcat
n fereastra/setul de cadre printe);
TARGET="_self" (documentul va fi ncrcat n
acelai cadru);
Pentru exemplificare, vom folosi fiierul test9.html cu

urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
<FRAME SRC="doc1.html" NAME="sus">
<FRAME SRC="doc3.html" NAME="dreapta">
</FRAMESET>
</FRAMESET>
</HTML>
Vom folosi fiierul doc1.html, corespunztor cadrului 1, cu

urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="cyan">
</BODY>
</HTML>
n fiierul doc2.html vom insera link-uri ctre doc4.html cu

destinaii diferite, astfel:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="yellow">
<P><B>Exemplificare destinatii</B><BR>
<A HREF="doc4.html" TARGET="dreapta"> Documentul
4 in cadrul din dreapta</A><BR>
<A HREF="doc4.html" TARGET="sus"> Documentul 4 in
cadrul de sus</A><BR>
<A HREF="doc4.html" TARGET="_self"> Documentul 4 in
acelasi cadru din care este accesat link-ul (si anume in Cadrul
2)</A><BR>
<A HREF="doc4.html" TARGET="_parent"> Documentul 4
in cadrul parinte</A><BR>
<A HREF="doc4.html" TARGET="_top"> Documentul 4
direct in browser (in acest exemplu rezultatul este identic ca la
optiunea precedenta)</A><BR>
<A HREF="doc4.html" TARGET="_blank"> Documentul 4
intr-o fereastra noua a browser-ului </A>
</BODY>
</HTML>
Fiierul doc3.html, corespunztor cadrului 3, va avea

urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
</BODY>
</HTML>
i n final vom crea fiierul doc4.html cu urmtoarea structur:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="pink">
<H3>Documentul 4</H3>
<P><A HREF="test9.html" TARGET="_top"> Dati click
aici pentru a reveni la documentul initial</A></P>
</BODY>
</HTML>
Rezultatele obinute vor fi urmtoarele:
Documentul 4 n cadrul din dreapta
Documentul 4 n cadrul de sus
Documentul 4 n acelai cadru din care este accesat link-ul (i
anume n Cadrul 2)
Imaginea afiat este identic pentru ultimele 3 opiuni:
- - Documentul 4 n cadrul parinte
- - Documentul 4 direct n browser
- - Documentul 4 ntr-o fereastra nou a browser-ului
9.5. Cadre interioare
Cadrele interioare (in-line) sunt cadre ce pot fi inserate oriunde

n interiorul unei pagini web (similar elementelor imagine). Pentru a
insera un cadru interior, se folosete elementul <IFRAME> ce necesit
tag-ul de nchidere </IFRAME>.
Acest element folosete toate atributele elementului <FRAME>,
cu aceleai efecte (i anume src, frameborder, marginheight,
marginwidth, scrolling i name).
Existnd similaritatea cu elementele imagine, o serie de atribute,
specifice elementelor imagine, pot fi utilizate cu elementul <IFRAME>
obinndu-se aceleai rezultate (i anume width, height, align,
hspace i vspace).
ntr-o pagin web pot fi adugate oricte cadre interioare sunt
necesare.
Pentru exemplificare vom modifica doc3.html astfel:
<HTML>
<HEAD>
</HEAD>
<IFRAME SRC="doc4.html" ALIGN="center"
WIDTH="200" HEIGHT="150" </IFRAME>
</BODY>
</HTML>
Vom obine urmtorul rezultat:

9.6. Elementul <NOFRAMES>
nainte de a ncheia i acest capitol, trebui s avei n vedere c

nc mai exist oameni care folosesc anumite browsere ce nu suport
cadre. n aceste cazuri browserele vor afia pagini goale.
Problema aceasta poate fi rezolvat prin inserarea elementului
<NOFRAMES> n interiorul elementului <FRAMESET>.
n interiorul elementului <NOFRAMES> va trebui s inserai cod
HTML obinuit prin care putei redireciona vizitatorii paginilor dvs.
ctre o variant a site-ului fr cadre (dac exist), sau putei s-i
atenionai asupra faptului ca documentul dvs. conine cadre iar
browser-ul lor nu suport aa ceva.
De exemplu:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS="40%,60%" COLS="70%,30%">
<NOFRAMES>
<BODY>Aceast site contine cadre pe care browser-ul
dvs. nu le poate interpreta. Puteti vizita o versiune fara
cadre a site-ului la adresa .
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Pentru a pune n practic cele prezentate n acest capitol, dar si

in cele anterioare, vom realiza o structur combinat, cu trei cadre,
dintre care unul pe orizontal i dou pe vertical. Astfel, cadrul
orizontal va fi alocat titlului (antetului), cel din stnga va fi alocat unui
meniu, iar cel din dreapta va prezenta coninutul corespunztor
meniului.
Structura cadrelor va fi definit n fiierul test_cadre.html ce

va avea urmtorul coninut:
<HTML>
<HEAD>
<TITLE>Retete culinare</TITLE>
</HEAD>
<FRAME SRC="antet_cadre.html" NAME="antet"
SCROLLING="no">
<FRAME SRC="meniu_cadre.html" NAME="meniu">
<FRAME SRC="continut_cadre.html" NAME="retete">
</FRAMESET>
<NOFRAMES>
<H1>Retete culinare</H1> Browser-ul dvs. nu suporta
cadre? Nicio problema! Puteti vedea continutul site-ului nostru
in versiunea
<A HREF="continut_cadre.html">fara cadre</A>.
</NOFRAMES>
</FRAMESET>
</HTML>
Pentru antet vom crea fiierul antet_cadre.html cu urmtorul

coninut:
<HTML>
<HEAD>
<TITLE>Titlu</TITLE>
</HEAD>
<BODY BGCOLOR="saddlebrown">
<H1><FONT COLOR="white">Retete
culinare</FONT></H1>
</BODY>
</HTML>
Pentru meniu vom crea fiierul meniu_cadre.html cu urmtorul

coninut:
<HTML>
<HEAD>
<TITLE>Meniu</TITLE>
</HEAD>
<BODY BGCOLOR="wheat">
<H2>Meniu</H2>
<A HREF="continut_cadre.html#Aperitiv din branza de
burduf" TARGET="retete">Aperitiv din branza de
burduf</A><BR><BR>
<A HREF="continut_cadre.html#Ciorba de caprioara cu
smantana" TARGET="retete">Ciorba de caprioara cu
smantana</A><BR><BR>
<A HREF="continut_cadre.html#Friptura de iepure"
TARGET="retete">Friptura de iepure</A><BR><BR>
<A HREF="continut_cadre.html#Coltunasi dulci cu
branza de vaci" TARGET="retete">Coltunasi dulci cu
branza de vaci</A>
</BODY>
</HTML>
Continutul va fi cuprins in fiierul continut_cadre.html astfel:
<HTML>
<HEAD>
<TITLE>Continut</TITLE>
</HEAD>
<A NAME="Aperitiv din branza de burduf"><H2>Aperitiv
din branza de burduf</H2></A>
<B>Ingrediente:</B>
<UL>
<LI>1/2 kg branza de oaie (se poate inlocui cu cas
proaspat)
<LI>100 ml smantana
<LI>5 sardele
<LI>ceapa
<LI>chimen
<LI>50-100 ml bere
</UL>
<B>Mod de preparare:</B>
<P>Se piseaza branza cu o furculita (daca e cas atunci se
da prin masina de tocat). Peste se toarna berea,
smantana. Chimenul se macina si se adauga o lingurita
fara varf, iar la final sardelele si ceapa rasa. Se amesteca
bine bine si se sareaza dupa gust. De preferat sa se
serveasca in aceeasi zi.</P>
<B>Recomandari:</B>
<P>Sa se orneze cu bucatele taiate de gogosari sau
masline</P>
<BR>
<A NAME="Ciorba de caprioara cu
smantana"><H2>Ciorba de caprioara cu
smantana</H2></A>
<B>Ingrediente:</B>
<UL>
<LI>500 g carne de caprioara
<LI>100 g ceapa
<LI>100 g morcovi
<LI>50 g patrunjel
<LI>50 g ulei
<LI>75 g orez
<LI>250 g rosii
<LI>40 ml otet
<LI>200 g smantana
<LI>2 oua
<LI>verdeata
<LI>sare
</UL>
<P>Carnea de caprioara se portioneaza si se pune la fiert
in apa cu sare. In timpul fierberii se spumeaza cat este
nevoie. Ceapa se toaca marunt, se caleste in ulei, se
adauga zarzavatul de supa taiat julien si se mai calesc
impreuna cateva minute. Se sting cu apa si se pun in
ciorba. Cand carnea este aproape fiarta, se pune orezul
fiert separat si rosiile curatate de coaja si seminte si
taiate cuburi. Smantana se amesteca cu galbenusurile de
ou si doua linguri de otet si se adauga la ciorba. Se mai
potriveste o data gustul de sare, iar la servit se presara cu
verdeata tocata marunt.</P>
<BR>
<A NAME="Friptura de iepure"><H2>Friptura de
iepure</H2></A>
<B>Ingrediente:</B>
<UL>
<LI>1 kg carne de iepure (pulpa)
<LI>50 g slanina afumata
<LI>50 g unt
<LI>sare
</UL>
<P>Carnea de iepure se sterge cu un stergar, se
impaneaza cu slanina afumata, se freaca cu sare, se unge
cu unt si se asaza intr-o tava cu restul de unt si putina
apa, se da la cuptor si se frige la un foc potrivit. In timpul
frigerii se stropeste cu sosul format in tava. Se mananca
cu garnituri de legume si salate de sezon.</P>
<BR>
<A NAME="Coltunasi dulci cu branza de
vaci"><H2>Coltunasi dulci cu branza de vaci</H2></A>
<B>Ingrediente:</B>
<UL>
<LI>500 g faina
<LI>4 oua
<LI>500 g branza de vaci
<LI>40 g coaja rasa de lamaie
<LI>175 g zahar
<LI>sare
</UL>
<P>Din faina, 2 oua, putina sare si putina apa se prepara
o coca mai deasa, din care se intinde o foaie si se taie
patrate cu latura de 5-7 cm. Branza de vaci se amesteca
cu 75 g zahar, 2 oua si coaja de lamaie rasa, se
repartizeaza, in mod egal, pe patratele de coca, se indoaie
in forma de triunghi si se lipesc bine. Se fierb in apa cu
sare, se scurg, se trec printr-un jet de apa rece, se toarna
deasupra untul fierbinte si se presara cu restul de zahar.
</P>
</BODY>
</HTML>

CAP. 10. FORMULARE

Formulare: iat o noiune de care ne lovim tot timpul, pentru c
suntem nevoii s completm formulare din momentul n care ne-am
nscut i pn murim.
i tot formularele sunt cele care fac cu adevrat din Internet o
tehnologie interactiv. Fr aceste formulare, utilizatorul nu ar avea
acces dect la anumite resurse statice, predefinite, pe cnd, cu
ajutorul formularelor, pot fi introdui anumii parametri care dau un
caracter dinamic Internet-ului.
Dar pentru a analiza parametrii introdui n formulare sunt
necesare anumite aplicaii care decid cum va aciona serverul ca
rspuns la datele primite. Codul acestor aplicaii poate fi scris n
limbaje de programare web precum ASP, JAVA, PHP, JSP etc. care nu
fac ns subiectul acestui ghid.
Un formular poate conine unul sau mai multe controale de tipul:
casete text (text boxes), casete de parole (password boxes), ascunse
(hidden), casete de validare (checkboxes), butoane radio (radio
buttons), buton trimitere formular (submit), buton resetare formular
(reset), buton imagine (image), liste etc., toate plasate n interiorul
elementului marcat de tag-ul <FORM>.

Un URL ce definete adresa aplicaiei web
care prelucreaz datele sau o adres de e-
action URL
mail valid unde vor fi trimise datele dup
apsarea butonului Submit (Trimite).
O list cu elemente separate de virgul a
list de tipurilor de coninut pe care serverul ce
accept
coninut proceseaz formularul le poate interpreta
corect.
O list cu elemente separate de virgul a
accept- list de caracterelor posibile ce constituie datele
charset caractere formularului. Valoarea implicit este
unknown.
Determin mecanismul folosit la codificarea
enctype mimetype
coninutului formularului.
Get (implicit) sau post specific ce metod
get
method HTTP va fi folosit la transmiterea datelor
post
din formulat ctre serverul web.
Definete un nume unic pentru formular,
numele
name util n cazul folosirii unor scripturi Java sau
formularului
VB.
target _blank Specific unde va deschis URL-ul int:
_blank ntr-o fereastr nou;
_self n acelai cadru din care a
_self fost accesat;
_parent _parent n cadrul printe;
_top _top - direct n fereastra browser-
ului, lund locul documentului
existent.
10.2. Proiectarea unui formular
n procesul de proiectare de proiectare a unui formular se

pornete de la datele pe care le dorii s le obinei. Pentru aceasta v
recomandm urmtoarele:
- alegei controale care sunt adecvate pentru categoria de date
pe care dorii s le obinei si pentru interaciunile pe care le
furnizeaz;
- tag-uli cu claritate fiecare control, astfel nct utilizatorul s
neleag funcia acestuia;
- n msura posibilitilor, aliniai tag-urile i marginile din
stnga ale controalelor. Structura unui formular bine proiectat este
asemntoare cu aceea a unei pagini de ziar, fiind compus dintr-o
serie de coloane n cadrul crora fiecare element vizual este aliniat cu
elementele plasate deasupra, respectiv dedesubtul su. Putei obine
acest tip de structura folosind tabelele sau tag-ul <BR>;
- grupai controalele corelate i separai fiecare asemenea grup
de celelalte grupuri prin ncorporarea de spaii albe n structura dvs.;
- secvena de controale din formular trebuie s fie asemntoare
cu ordinea n care le va manipula utilizatorul. n caz contrar,
utilizatorul va fi obligat s piard timp navignd de la un control la
altul.
Este important s reinei c acestea sunt doar ndrumri, nu
reguli. Nefiind reguli, putei opta, din cnd n cnd, pentru nclcarea
lor. Pentru a determina dac o variant de proiectare este superioar
alteia, este util s cerei prerea unui grup de utilizatori. Dac nici
acetia nu v pot fi de ajutor, ncercai s obinei asisten din partea
unui alt programator. n cel mai ru caz, strduii-v s v punei dvs.
niv n rolul unui utilizator al formularului. ntrebai-v dac
formularul este clar, uor de utilizat i eficient. n caz afirmativ, este
momentul s trecei mai departe i s creai efectiv formularul HTML.
10.3. Crearea unui formular

Dac procesul de proiectare este bazat pe oportunism, procesul
de creare a unui formular, pornind de la structura proiectat, este mai
direct.
Mai nti, creai schia HTML elementar, care va conine
controalele din formular, apoi ncorporai controalele n structura
respectiv. n particular, un formular HTML trebuie s includ un buton
de expediere pe care utilizatorul execut click pentru a trimite
serverului datele din formular. Deoarece o singur pagin HTML poate
conine mai multe formulare, putei repeta de mai multe ori etapele
intermediare ale acestui proces.
Pentru a include un formular n interiorul corpului unei pagini
HTML se folosete tag-ul <FORM>, care are urmtoarea sintax:
<FORM METHOD="metoda" ACTION="url">
Atributul METHOD al tag-ului FORM poate lua una din valorile
GET sau POST. Pentru moment, specificai ntotdeauna valoarea POST.
Atributul ACTION specific adresa URL a scriptului ce prelucreaz
datele colectate prin intermediul formularului.
Adresa URL poate fi nscris ca adres absolut (de exemplu
http://www.domeniul_meu.com/prelucrare_formular.php), respectiv
ca adres relativ, care specific o locaie relativ la locaia paginii
curente (de exemplu prelucrare_formular.php).
ntre tag-ul <FORM> i tag-ul de nchidere </FORM>
corespunztoare, plasai controalele formularului.
Ca nceptor, este mai bine s folosii n mod consecvent metoda
POST, deoarece alegerea ntre metodele GET i POST este destul de
complicat. Ca regul empiric, muli programatori folosesc GET
pentru formulare care execut o cutare sau o interogare, respectiv
POST pentru formulare care actualizeaz o baz de date sau un fiier.
Dou dezavantaje ale metodei GET sunt acelea c impune o limit
asupra cantitii de date care pot fi trimise scriptului de prelucrare i
c transfer datele prin ataarea irurilor codificate la adresa URL a
scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi
vizualizate de ctre utilizator. Un avantaj al metodei GET este acela ca
utilizatorii pot insera semne de carte n rezultatele unei interogari sau
al unei cutri care folosete metoda GET, dar nu pot executa aceeai
operaie n cazul unei interogri sau al unei cutri care folosete
metoda POST.
10.4. Codificarea datelor
nainte de a le trimite la destinatar, browser-ul codific datele

din formular. Tehnica de codificare depinde de valoarea atributului
enctype. Valorile posibile pentru acest atribut sunt:
a) application/x-www-form-urlencoded utilizat mpreun
cu metoda GET (parametri prestabilii). n acest caz:
- datele sunt trimise sub form de list de perechi
nume=valoare, separate prin simbolul "&";
- spaiile albe sunt nlocuite de simbolul "+";
- caracterele non-alfanumerice sunt nlocuite cu simbolul "%"
urmat de codul ASCII corespunztor caracterului respectiv;
- ntreruperile de rnd sunt nlocuite de secvena "%0D%0A%"
(CR/LF) (de exemplu:
nume=Popescu&prenume=Ion&adresa=Str.Mare+nr.1 %0D%0A
%Romania)
b) text/plain utilizat mpreun cu tipul de aciune
action="mailto" pentru trimiterea datelor prin e-mail. Acest caz este
similar cazului precedent, cu excepia faptului ca spaiile nu mai sunt
nlocuite de simbolul "+".
c) multiform/form-data utilizat mpreun cu metoda POST
pentru trimiterea imaginilor sau a altor fiiere ctre server.
10.5. Inserarea controalelor de tip <INPUT> ntr-un

formular
Utilizatorii interacioneaz cu formularele prin ceea ce poart

denumirea de "controale".
Cele mai utilizate tipuri de controale sunt cele definite de
elementul <INPUT> prin intermediul atributui TYPE. Acestea sunt:
a) a) Cmpuri de tip TEXT
Se folosesc la introducerea de caractere alfanumerice ntr-un

formular. Sintaxa uzual este de forma:
<FORM>
Nume: <INPUT TYPE="text" NAME="nume"><BR>
Prenume: <INPUT TYPE="text" NAME="prenume">
</FORM>
Rezultatul afiat n browser va fi urmtorul:

Cmpurilor de tip text le pot fi precizate urmtoarele atribute:
TYPE: text
SIZE: determin mrimea cmpurilor text ca
numr de caractere. Implicit are valoarea
de 20 de caractere
MAXLENGTH: determin numrul maxim de caractere ce
pot fi intruse n acel cmp
NAME: reprezint numele variabilei ce va fi trimis
aplicaiei ce prelucreaz formularul
VALUE: afieaz o valoare implicit; n general
rmne necompletat
b) b) Cmpuri de tip parol (PASSWORD)
Se folosesc la introducerea de parole ntr-un formular. Sintaxa

uzual este de forma:
<FORM>
Username: <INPUT TYPE="text" NAME="user"><BR>
Password: <INPUT TYPE="password"
NAME="password">
</FORM>
Cmpurilor de tip parol le pot fi precizate urmtoarele atribute:

TYPE: password
SIZE: determin mrimea cmpurilor parol ca
numr de caractere. Implicit are valoarea
de 20 de caractere
MAXLENGTH: determin numrul maxim de caractere ce
pot fi intruse n acel cmp
VALUE: afieaz o valoare implicit; n general
rmne necompletat
c) c) Butoane de tip RADIO
Se folosesc pentru a determina efectuarea unei singure alegeri

dintr-o serie limitat ntr-un formular. Sintaxa uzual este de forma:
<FORM>
Sexul dvs.:<BR>
<INPUT TYPE="radio" NAME="sex" VALUE="Barbat">
Barbat <BR>
<INPUT TYPE="radio" NAME="sex" VALUE="Femeie">
Femeie
</FORM>
Butoanelor de tip radio le pot fi precizate urmtoarele atribute:
TYPE: radio
CHECKED: cnd se specific, determin ca una din
opiuni s fie bifat iniial. Nu se poate folosi
dect pentru un singur buton radio, n caz
contrar, aceast specificaie va fi luat n
considerare numai la ultimul buton radio.
VALUE: reprezint valoarea ce va fi trimis aplicaiei
ce prelucreaz formularul
d) d) Casete de validare (CHECKBOX)
Se folosesc pentru a determina efectuarea mai multor alegeri

dintr-o serie limitat ntr-un formular. Sintaxa uzual este de forma:
<FORM>
Sunteti interesat de :<BR>
<INPUT TYPE="checkbox" NAME="programare"
VALUE="html" CHECKED> HTML <BR>
VALUE="css"> Stiluri CSS<BR>
VALUE="javascript"> Javascript <BR>
VALUE="php"> PHP
</FORM>
Casetelor de validare le pot fi precizate urmtoarele atribute:
TYPE: checkbox
CHECKED: cnd se specific, determin ca una din
opiuni s fie bifat iniial
De reinut este faptul c doar casetele de validare selectate sunt

incluse n datele transmise ctre server.
e) e) Buton de transmitere (SUBMIT)
Fiecare formular necesit un buton de transmitere. Acesta este

elementul care determin browser-ul s trimit numele i valorile
elementelor formularului ctre server pentru a fi prelucrate.
Sintaxa uzual este de forma:
<FORM>
<INPUT TYPE="submit" VALUE="Trimite">
</FORM>
Butonul de transmitere poate avea urmtoarele atribute:
TYPE: submit
VALUE: reprezint textul (tag-ul) ce va fi afiat pe
buton
Un formular i pot fi definite unul sau mai multe butoane de

transmitere.
f) f) Buton de transmitere tip imagine (IMAGE)
Se folosete n cazul n care dorii s adugai puin

"personalitate" butonului de transmitere.
<FORM>
<INPUT TYPE="image" SRC="URL">
</FORM>
Folosind ca imagine fiierul buton.jpg, existent pe site-ul nostru

la adresa http://ghid-html.dap.ro/teste/buton.jpg, precum i pe CD-ul
ataat prezentului ghid, rezultatul afiat n browser va fi urmtorul:
Acest tip de buton de transmitere poate avea urmtoarele
atribute:
TYPE: image
NAME: reprezint numele butonului ce poate fi utilizat
n cazul folosirii unor scripturi
SRC: indic URL-ul fiierului ce conine imaginea
respectiv
g) g) Buton de anulare (RESET)
Este o idee bun s includei n formular i un buton de anulare.

Acesta permite utilizatorului s goleasc ntregul coninut al
formularului.
<FORM>
<INPUT TYPE="reset" VALUE="Anuleaza">
</FORM>
Butonul de anulare poate avea urmtoarele atribute:
TYPE: reset
VALUE reprezint textul (tag-ul) ce va fi afiat pe
buton
h) h) Buton generic (BUTTON)
Se folosete pentru a ataa unui formular un buton generic, care

nu are un comportament prestabilit, prin apsarea lui lansndu-se n
execuie un anumit script (folosind JavaScript sau alt limbaj de
programare).
<FORM>
<INPUT TYPE="button" VALUE="Executa">
</FORM>
Butonul generic poate avea urmtoarele atribute:
TYPE: button
NAME: reprezint numele butonului ce poate fi utilizat
n cazul folosirii unor scripturi
VALUE reprezint textul (tag-ul) ce va fi afiat pe
buton
i) i) Cmpuri de tip fiier (FILE)
Sunt folosite pentru a permite utilizatorilor s fac upload

fiierelor pe server. Sintaxa uzual este de forma:
<FORM>
Username: <INPUT TYPE="file">
</FORM>

Cmpurilor de tip fiier le pot fi precizate urmtoarele atribute:
TYPE: file
SIZE: determin mrimea cmpurilor fiier ca numr
de caractere. Implicit are valoarea de 20 de
caractere
VALUE: specific un nume de fiier prestabilit
ACCEPT: lista tipurilor MIME separate de virgul care
indic tipul de transfer
j) j) Cmpuri ascunse (HIDDEN)
Sunt folosite pentru a trimite date fr ns a permite

utilizatorilor s le poat vizualiza sau manipula, fiind totui necesare
pentru prelucrarea corect a formularului. Sintaxa uzual este de
forma:
<FORM>
<INPUT TYPE="hidden">
</FORM>
n acest caz, browser-ul nu va afia nimic. Utilitatea acestui tip

de cmpuri o vei remarca n exemplul din finalul acestui capitol.
Cmpurilor ascunse le pot fi precizate urmtoarele atribute:
TYPE: hidden
10.6. Alte tipuri de controale
Pe lng controalele prezentate anterior mai exist o serie

identificate fiecare prin propriul su element, i anume:
a) a) Liste de selecie
Exist dou tipuri de astfel de liste: liste cortin (drop-down list)
i liste derulante (scrolling list). Ambele se obin folosind elementul
<SELECT>, diferenierea fcndu-se cu ajutorul atributului SIZE, n
cazul listelor cortin nefiind precizat sau avnd valoarea 1, iar n cazul
listelor derulante putnd avea orice valoare diferit de 1.
Atributele elementului <SELECT> sunt urmtoarele:

SIZE: reprezint numrul de elemente din list
vizibile
MULTIPLE: dac este specificat, acest atribut permite
realizarea de selecii multiple, a mai multor
elemente concomitent prin folosirea
combinaiilor SHIFT+click pentru elemente
consecutive, respectiv CTRL+click pentru
elemente neconsecutive
Elementele unor astfel de liste sunt marcate de tag-ul

<OPTION>.
Atributele elementului <OPTION> sunt urmtoarele:
SELECTED: cnd acest atribut este prezent, opiunea

respectiv este preselectat
<FORM>
<SELECT NAME="lista de selectie">
<OPTION VALUE="1">primul element al
listei</OPTION>
<OPTION VALUE="2">al doilea element al
listei</OPTION>
<OPTION VALUE="3">al treilea element al
listei</OPTION>
<OPTION VALUE="4">al patrulea element al
listei</OPTION>
<OPTION VALUE="5">al cincilea element al
listei</OPTION>
</SELECT>
</FORM>
ntruct atributul SIZE nu a fost precizat, valoarea sa implicit

fiind "1", browser-ul va afia o list tip cortin:
Aplicnd atributului SIZE valoarea 3 (<select name="lista de
selectie" size="3">), vom obine o list derulant, astfel:
Pentru realizarea de selecii multiple se folosete atributul

MULTIPLE. n acest caz v recomandm s specificai o valoare diferit
de 1 atributului SIZE ntruct listele cortin nu accept selecii
multiple. Sintaxa folosit este urmtoarea:
<SELECT NAME="lista de selectie" SIZE="4" MULTIPLE>
Selecie realizat cu Selecie realizat cu

SHIFT+click CTRL+click
n cazul n care dorii s introducei ntr-o astfel de list unul sau
mai multe elemente preselectate, atunci trebuie s adugai atributul
SELECTED fiecruia din elementele respective, astfel:
<FORM>
<SELECT NAME="lista de selectie" SIZE="4" MULTIPLE>
<OPTION VALUE="1">primul element al
listei</OPTION>
<OPTION VALUE="2" SELECTED>al doilea element al
listei</OPTION>
<OPTION VALUE="3">al treilea element al
listei</OPTION>
<OPTION VALUE="4">al patrulea element al
listei</OPTION>
<OPTION VALUE="5">al cincilea element al
listei</OPTION>
</SELECT>
</FORM>
Al doilea i al treilea element

preselectate
Pentru gruparea elementelor, se folosete sub-elementul

<OPTGROUP> n interiorul elementului <SELECT>.
Acest sub-element are un singur atribut (a crui prezen este
obligatorie), i anume LABEL, ce definete tag-ul unui grup.
Sintaxa folosit este urmtoarea:
<FORM>
<SELECT NAME="lista de selectie">
<OPTION SELECTED VALUE="none">none</OPTION>
<OPTGROUP LABEL="Grupa 1">
<OPTION VALUE="1.1">primul element al grupei
1</OPTION>
<OPTION VALUE="1.2">al doilea element al grupei
1</OPTION>
<OPTION VALUE="1.3">al treilea element al grupei
1</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Grupa 2">
<OPTION VALUE="2.1">primul element al grupei
2</OPTION>
<OPTION VALUE="2.2">al doilea element al grupei
2</OPTION>
<OPTION VALUE="2.3">al treilea element al grupei
2</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
b) b) Zone cu text (TEXTAREA)

La fel ca i o caset cu text, o zon cu text permite unui
utilizator s introduc un anumit text. Diferena const n faptul c o
zon cu text poate permite utilizatorului s introduc mai multe linii de
text, n timp ce o caset cu text permite utilizatorului s introduc o
singur linie.
Atributele elementului <TEXTAREA> sunt urmtoarele:
NAME: reprezint numele zonei cu text, respectiv al
variabilei ce va fi trimis aplicaiei ce
prelucreaz formularul Iat
ROWS: specific numrul de rnduri vizibile n zona sintaxa
cu text pentru
COLS: specific numrul de coloane vizibile n zona crearea
cu text unei zone
READONLY: cnd este specificat, indic faptul c cu text:
utilizatorii formularului nu pot modifica
coninutul zonei cu text
<FORM>
<TEXTAREA NAME="zona cu text" ROWS="5" COLS="25"
READONLY>
Aceasta este o zona cu text definita pe 5 randuri si 25 de
coloane
</TEXTAREA>
</FORM>
10.7. Alte atribute ale formularelor
n afar de cele prezentate anterior, mai exist dou atribute ce

pot fi adugate elementelor unui formular. Acestea sunt:
a) a) accesskey ce definete o scurttur pentru
executarea unei comenzi specifice respectivului element
i/sau focalizeaz acel element. Ca valori posibile se
poate folosi orice caracter (de exemplu "f"). Pentru a
selecta sau executa comanda, utilizatorul trebuie s in
apsat tasta ALT i apoi s apese tasta literei
corespunztoare (de exemplu ALT+f).
Not: Nu toate browser-ele suport acest atribut. De
exemplu, dei n Microsoft Internet Explorer funcioneaz
corect, n Mozilla Firefox combinaia ALT+f va avea ca
efect apelarea meniului File.
b) b) tabindex ce definete o alt ordine de

parcurgere a elementelor formularului n cazul apsrii
tastei TAB (ordinea prestabilit fiind aceea a ordinii n
care elementele au fost adugate n formular). Valorile
posibile ale acestui atribut sunt reprezentate de orice
numr ntreg pozitiv.
Sintaxa uzual privind folosirea acestor atribute este:
<FORM>
Nume: <INPUT TYPE="text" NAME="nume"
ACCESSKEY="n" TABINDEX="1">Acest control se poate accesa
si cu ALT+n<BR>
Prenume: <INPUT TYPE="text" NAME="prenume"
ACCESSKEY="p" TABINDEX="3">Acest control se poate accesa
si cu ALT+p<BR>
Comentarii: <TEXTAREA NAME="comentarii" ROWS="5"
COLS="25" ACCESSKEY="c" TABINDEX="2">Acest control se
poate accesa si cu ALT+c. Folosind tasta TAB in loc de mouse
pentru deplasarea dintr-un camp in altul, veti observa efectul
atributului TABINDEX.
</TEXTAREA>
</FORM>

Pentru a pune n practic cele prezentate anterior, vom crea un
fiier test10.html ce va cuprinde un model de formular complex, ale
crui rezultate vor fi expediate pe adresa voastr de e-mail.
Pentru obinerea unui aspect ct mai plcut, n sensul alinierii
corespunztoarele a elementelor formularului, vom crea un tabel n
interiorul acestuia.
<HTML>
<HEAD>
<TITLE>Formulare</TITLE>
</HEAD>
<BODY BGCOLOR="wheat">
<FORM NAME="formular_F1" METHOD="POST"
ENCTYPE="text/plain"
ACTION="mailto:adresa_de_mail@domeniu.com">
<INPUT TYPE="hidden" NAME="Subiect"
VALUE="Rezultatul exercitiului cu formulare">
<TABLE BORDER="0" CELLSPACING="10">
<TR><TD>Nume: </TD>
<TD><INPUT TYPE="text" SIZE="25" MAXLENGTH="50"
NAME="Nume" ACCESSKEY="n" TABINDEX="1"></TD></TR>
<TR><TD>Prenume: </TD>
<TD><INPUT TYPE="text" SIZE="25" MAXLENGTH="50"
NAME="Prenume" ACCESSKEY="p"
TABINDEX="2"></TD></TR>
<TR><TD>Parola: </TD>
<TD><INPUT TYPE="password" SIZE="25"
MAXLENGTH="50" NAME="Parola" ACCESSKEY="q"
TABINDEX="3"></TD></TR>
<TR><TD>Sexul dvs.:</TD>
<TD><INPUT TYPE="radio" NAME="Sex" VALUE="B">
Barbat
<INPUT TYPE="radio" NAME="Sex" VALUE="F">
Femeie</TD></TR>
<TR><TD VALIGN="top">Sunteti interesat/a de:</TD>
<TD><INPUT TYPE="checkbox" NAME="Programare"
VALUE="html" CHECKED> HTML <BR>
<INPUT TYPE="checkbox" NAME="Programare"
VALUE="css"> Stiluri CSS<BR>
VALUE="javascript"> Javascript <BR>
VALUE="php"> PHP</TD></TR>
<TR><TD VALIGN="top">Ati ajuns la capitolul:</TD>
<TD><SELECT NAME="Capitolul curent">
<OPTION VALUE="1">CAP. 1. NOTIUNI
GENERALE</OPTION>
<OPTION VALUE="2">CAP 2. CREAREA SI EDITAREA
UNEI PAGINI WEB</OPTION>
<OPTION VALUE="3">CAP. 3. FORMATAREA
DOCUMENTULUI</OPTION>
<OPTION VALUE="4">CAP. 4. FORMATAREA
TEXTULUI</OPTION>
<OPTION VALUE="5">CAP. 5. CREAREA
LISTELOR</OPTION>
<OPTION VALUE="6">CAP. 6. HYPERLINK-
URI</OPTION>
<OPTION VALUE="7">CAP. 7. FOLOSIREA
IMAGINILOR</OPTION>
<OPTION VALUE="8">CAP. 8. TABELE</OPTION>
<OPTION VALUE="9">CAP. 9. CADRE</OPTION>
<OPTGROUP LABEL="CAP. 10. FORMULARE">
<OPTION VALUE="10.1.">Notiuni generale</OPTION>
<OPTION VALUE="10.2.">Elementele
formularelor</OPTION>
<OPTION VALUE="10.3.">Crearea unui formular
</OPTION>
<OPTION VALUE="10.4.">Codificarea datelor</OPTION>
<OPTION VALUE="10.5.">Inserarea controalelor de tip
"INPUT"</OPTION>
<OPTION VALUE="10.6.">Alte tipuri de controale
</OPTION>
<OPTION VALUE="10.7.">Alte atribute ale
formularelor</OPTION>
<OPTION VALUE="10.8." SELECTED>Aplicatie
practica</OPTION></OPTGROUP>
</SELECT></TD></TR>
<TR><TD VALIGN="top">Comentarii:</TD>
<TD><TEXTAREA NAME="Comentarii" ROWS="5"
COLS="25" ACCESSKEY="c" TABINDEX="4">Scrieti aici
comentariile voastre</TEXTAREA></TD></TR>
<TR><TD ALIGN="center"><INPUT TYPE="submit"
VALUE=" Trimite "></TD>
<TD ALIGN="center"><INPUT TYPE="reset" VALUE="
Anuleaz"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
iar rezultatul primit (n cazul n care nu completai nimic) va fi:
Subiect=Rezultatul exercitiului cu formulare

Nume=
Prenume=
Parola=
Programare=html
Capitolul curent=10.8.
Comentarii=Scrieti aici comentariile voastre
CAP. 11. JAVA I JAVASCRIPT
Vom ncepe acest capitol prin a face distincia Java i JavaScript.

Java este un limbaj de programare orientat-obiect, ce se
adreseaz programatorilor avansai putnd fi rulat fr modificri pe
orice computer (PC, PDA etc) pe care exist instalat o "main
virtual" Java (JVM=Java Virtual Machine), fiind extrem de potrivit,
dei nu exclusiv, pentru Internet.
Pe de alt parte, JavaScript este un limbaj de programare
orientat-obiect bazat pe conceptul prototipurilor. Limbajul este
binecunoscut pentru folosirea n construirea siturilor web, dar de
asemenea este folosit pentru acesul la obiecte ncastrate (embedded
objects) n alte aplicaii.
n ciuda numelui i a unor oarecare similariti n sintax, ntre
JavaScript i limbajul Java nu exist nici o legtur. Ca i Java,
JavaScript are o sintax asemntoare cu cea a limbajului C, dar are
mai multe n comun cu Limbajul de Autoprogramare dect cu Java.
11.2. Limbajul JAVA
Java este un limbaj de programare conceput de Sun

Microsystems la nceputul anilor 90.
A fost conceput ca un limbaj de programare orientat-obiect
foarte puternic, "cross-platform" i "device-independent", ceea ce
nseamn c programul compilat trebuie s ruleze att pe PC-uri, MAC-
uri sau calculatoare cu platform UNIX.
Browser-ele creeaz un mediu pentru rularea applet-urilor Java,
numit Java Virtual Machine. Acesta ofer independena platformei
pentru applet-urile Java.
Denumirea de applet se refer la orice mini-aplicaie creat cu
ajutorul limbajului Java. Creare unui applet nu face obiectul acestui
ghid. Applet-urile sunt programe compilate separate ce au extensia
".class". Acestea sunt descrcate mpreun cu pagina web prin
folosirea tag-ului <APPLET>.
Sintaxa HTML pentru folosirea tag-ului <APPLET> i a tag-ului
su asociat <PARAM>, este urmtoarea:
< APPLET
[CODEBASE = directorApplet]
[CODE = clasaApplet]
[ALT = textAlternativ]
[NAME = numeInstanApplet]
WIDTH = limeInPixeli
HEIGHT = nlimeInPixeli
[ALIGN = aliniere]
[VSPACE = spaiuVertical]
[HSPACE = spaiuOrizontal] >
[< PARAM NAME = numeParametru_1 VALUE = valoare_1
>]
...
[< PARAM NAME = numeParametru_n VALUE = valoare_n
>]
[text HTML alternativ]
</APPLET>
Atributele puse ntre paranteze ptrate sunt opionale.

Semnificaia atributelor este urmtoarea:

left
right
top
bottom Semnific modalitatea de aliniere a appletul-
align middle ui n pagina Web, semnificaiile lor fiind
baseline aceleai ca i la tag-ul <IMG>.
texttop
absmiddle
absbottom
Specific textul ce trebuie afiat dac
alt text browser-ul nelege tag-ul APPLET dar nu
poate rula applet-uri Java.
Specific numele fiierului ce conine clasa
code URL principal a applet-ului. Acesta va fi cutat n
directorul specificat de CODEBASE.
Specific URL-ul n care se gsete clasa
applet-ului. Uzual se exprim relativ la
codebase URL directorul documentului HTML. n cazul n
care lipsete, se consider implicit URL-ul
documentului.
Specific nlimea suprafeei n care va fi
height pixeli afiat applet-ul. Este un atribut
obligatoriu.
Specific numrul de pixeli dintre applet i
hspace pixeli
marginile orizontale ale suprafeei de afiare.
Ofer posibilitatea de a da un nume
respectivei instane a applet-ului, astfel nct
name text mai multe applet-uri aflate pe aceeai pagin
s comunice ntre ele folosindu-se de numele
lor.
Specific numrul de pixeli dintre applet i
vspace pixeli
marginile verticale ale suprafeei de afiare.
Specific limea suprafeei n care va fi
width pixeli afiat applet-ul. Este un atribut
obligatoriu.
< PARAM NAME = numeParametru1 VALUE = valoare1 >

Tag-urile <PARAM> sunt folosite pentru specificarea parametrilor
unui applet. Aceti parametri permit utilizatorului s personalizeze
aspectul sau comportarea unui applet fara a-i schimba codul si
recompila clasele.
text HTML alternativ

Este textul ce va fi afiat n cazul n care browser-ul nu nelege
tag-ul <APPLET>. Browser-ele care neleg Java vor ignora acest text.
11.3. Limbajul JAVASCRIPT
JavaScript v permite s creai o interfa activ cu utilizatorul,

s dea o impresie vizual plcut n timp ce navigai prin paginile site-
ului. Putei verifica validitatea informaiilor introduse ntr-un formular
nainte ca datele s fie trimise ctre server. Putei face calcule
matematice, crea pagini HTML dinamice, personalizate n funcie de
opiunile utilizatorului sau al browser-ului.
JavaScript controleaz browser-ul, i prin intermediul scripturilor
putei deschide ferestre noi, putei afia mesaje de avertizare i putei
pune mesaje n bara de stare a ferestrei browserului. Putei genera
ceasuri, calendare i documente cu timpul nscris. Putei chiar verifica
prezena plug-in-urilor n browser, i putei redirecta utilizatorul spre o
pagin diferit n cazul n care browserul nu are un anumit plug-in.
O meniune important: programele care ruleaz pe calculatorul
utilizatorului sunt numite aplicaii client-side (aflate pe partea de
client), i programele care ruleaz pe server (inclusiv CGI-urile) sunt
numite aplicaii server-side (aflate pe partea de server)
Deoarece JavaScript ruleaz pe calculatorul dumneavoastr, i-au
fost impuse o serie de limitri, majoritatea din raiuni de securitate, i
anume:
- nu permite citirea sau scrierea de fiiere pe calculatorul
utilizatorului. Singura excepie este permisiunea de a scrie n
directorul de cookie-uri al browserului, dar i aici sunt anumite limite.
- nu permite citirea/scrierea de fiiere pe server. Alternativa este
s rulai pe server un program care s preia datele trimise de script i
s le scrie pe server (un CGI, scris ntr-un limbaj precum Perl sau PHP,
sau un program Java.
- un script JavaScript nu poate nchide o fereastr de browser
care nu a fost deschis de el. Astfel se evit situaia cnd intrai pe un
site i vi se nchid celelalte ferestre active care conin alte site-uri...
- nu poate citi informaii dintr-un browser care conine o pagina
web de pe un alt server, ca s nu putei afla pe ce site-uri navigeaz
utilizatorul.
Un script JavaScript este un program inclus ntr-o pagina HTML.
Deoarece este ncadrat de tag-ul <script>, textul scriptului nu apare
pe ecran, dar este rulat i interpretat de ctre browser. Tag-ul
<script> este prezent cel mai frecvent n seciunea <head> a paginii
HTML, dei se pot pune i n seciunea <body>. De obicei, scripturile
care urmeaz s afieze mesaje pe ecran sunt scrise n <body>.
V prezentm n continuare o list a atributelor ce pot fi
adugate tag-urilor HTML pentru a defini diferite aciuni:
- - Aciuni legate de ferestre
Valabile numai n elementele <BODY> i <FRAMESET>

Scriptul ce va fi rulat la ncrcarea
onload script
documentului
Scriptul ce va fi rulat la nchiderea
onunload script
documentului
- - Aciuni legate de formulare
Valabile numai n elementul <FORM>

Scriptul ce va fi rulat cnd se elementul se
onchange script
schimb
Scriptul ce va fi rulat la trimiterea
onsubmit script
formularului
Scriptul ce va fi rulat la resetarea
onreset script
formularului
Scriptul ce va fi rulat la selectarea
onselect script
elementului
Scriptul ce va fi rulat la pierderea focalizrii
onblur script
asupra elementului
Scriptul ce va fi rulat la focalizarea asupra
onfocus script
elementului
- - Aciuni legate de tastatur
Nu sunt valabile n elementele <BASE>, <BDO>, <BR>,

<FRAME>, <FRAMESET>, <HEAD>, <HTML>, <IFRAME>,
<META>, <PARAM>, <SCRIPT>, <STYLE> i <TITLE>.

Scriptul ce va fi rulat cnd este apsat o
onkeydown script
tast
Scriptul ce va fi rulat cnd este apsat i
onkeypress script
eliberat o tast
Scriptul ce va fi rulat cnd este eliberat o
onkeyup script
tast
- - Aciuni legate de mouse
Nu sunt valabile n elementele <BASE>, <BDO>, <BR>,

<FRAME>, <FRAMESET>, <HEAD>, <HTML>, <IFRAME>,
<META>, <PARAM>, <SCRIPT>, <STYLE> i <TITLE>.

Scriptul ce va fi rulat cnd se face click
onclick script
cu mouse-ul
Scriptul ce va fi rulat cnd se face
ondblclick script
dublu-click cu mouse-ul
Scriptul ce va fi rulat cnd este apsat
onmousedown script
butonul mouse-ului
Scriptul ce va fi rulat cnd este micat
onmousemove script
cursorul de la mouse
Scriptul ce va fi rulat cnd cursorul de
onmouseout script la mouse este mutat n afara unui
element
Scriptul ce va fi rulat cnd cursorul de
onmouseover script la mouse este mutat asupra unui
element
Scriptul ce va fi rulat cnd este eliberat
onmouseup script
butonul mouse-ului
Pentru a exemplifica cele artate mai sus, vom crea un fiier

test11.html ce va conine dou applet-uri Java i un script Javascript.
<HTML>
<HEAD>
<TITLE>Java si Javascript</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"> Iata un applet simplu ce reproduce
functiile unui calculator.<BR><BR>
<APPLET CODE="AdderApplet.class" WIDTH="175"
HEIGHT="175">
</APPLET><BR><BR>
Iata un applet ce reproduce un calendar si foloseste
diversi parametri.<BR><BR>
<APPLET CODEBASE="C:\Ghid programare HTML\Teste"
CODE="tcaldate.class" WIDTH="200" HEIGHT="170">
<PARAM NAME="font" VALUE="Arial">
<PARAM NAME="fontsize" VALUE="12">
<PARAM NAME="fontstyle" VALUE="1">
<PARAM NAME="bgcolor" VALUE="13684944">
<PARAM NAME="bgcolor2" VALUE="14737663">
<PARAM NAME="bgcolor3" VALUE="400">
<PARAM NAME="_min" VALUE="01 Ian 2008">
<PARAM NAME="current" VALUE="1z5 zzIan 08">
<PARAM NAME="_max" VALUE="31 Ian 2008">
<PARAM NAME="t_col1" VALUE="400">
</APPLET><BR><BR>
Iata un script ce schimba doua imagini intre ele in functie
de pozitia mouse-ului.<BR><BR>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<A HREF="test11.html"
ONMOUSEOVER="img_act('image_1a')"
ONMOUSEOUT="img_inact('image_1a')"><IMG
SRC="picture1b.gif" BORDER="0"
WIDTH="80" HEIGHT="50" NAME="image_1a"></A>
</P>
</BODY>
</HTML>
Rezultatul afiat n browser-ul IE va fi urmtorul:

CAP. 12. PAGINI WEB MULTIMEDIA
12.1. Ce este multimedia?

Multimedia reprezint tot ce putei auzi sau vedea: texte, cri,
imagini, muzic, sunete, CD-uri, DVD-uri, filme, tot felul de nregistrri
video sau audio etc.
Multimedia se prezint ntr-o multitudine de formate, iar pe
Internet vei gsi multe dintre aceste elemente nglobate n pagini
web. Browser-ele actuale ofer suport pentru multe dintre aceste
formate, dar nu pentru toate.
Suportul pentru sunete, animaii i video este tratat n mod
diferit de browsere diferite. Unele elemente pot fi manevrate intern,
altele necesit anumite plug-in-uri, n vreme ce altele pot solicita
activarea anumitor controale ActiveX.
n acest capitol vei afla despre diferitele formate multimedia i
cum s le folosii ntr-o pagin web.
Elementele multimedia (precum sunetele i video) sunt stocate
n fiiere media. Modalitatea cea mai simpl de a determina tipul unui
fiier media este de a analiza extensia fiierului respectiv (de exemplu,
cele mai utilizate tipuri de fiiere ce conin imagini au extensia .jpg sau
.gif).
12.2. Formatul fiierelor multimedia ce conin sunete
Sunetele pot fi stocate n diferite formate de fiiere. Astfel

deosebim:
a) a) Formatul MIDI
MIDI (Musical Instrument Digital Interface) este un format ce
permite transmiterea de informaii muzicale ntre dispozitive
electronice muzicale (precum sintetizatoare) i plcile de sunet
ale calculatoarelor.
Formatul MIDI a fost implementat n 1982 de ctre industria
muzical. Acest format este foarte flexibil i poate fi folosit
pentru (aproape) orice, de la crearea unor sunete foarte simple,
pn la crearea unora cu adevrat profesionale.
Fieierele MIDI nu conin sunete, ci un set de instruciuni digitale
muzicale (note muzicale) care pot fi interpretate de plcile de
sunet ale calculatoarelor.
Dezavantajul la acest tip de fiiere const n faptul c nu pot
stoca muzic (n toat complexitatea ei), ci doar note muzicale.
Avantajul l constituie mrimea mic a acestor fiiere, prin
urmare se pot ncrca uor ntr-o pagin web, precum i faptul
c acest format este suportat de majoritatea sistemelor de
operare i de cele mai populare browsere de Internet.
Fiierele de tip MIDI au extensia .mid sau .midi.
b) b) Formatul RealAudio
Formatul RealAudio a fost dezvoltat pentru Internet de ctre
Real Media. Acest format suport chiar i video.
Formatul permite difuzarea de informaii audio (muzic on-line,
Internet radio) cu lime de band joas. Din cauza acestei
limi de band, calitatea este, de cele mai multe ori, slab.
Fiierele de tip RealAudio au extensia .rm sau .ram.
c) c) Formatul AU
Acest formatul a fost dezvoltat de ctre Sun Microsystems i este
suportat de majoritatea sistemelor de operare.
Aceste fiierele au extensia .au.
d) d) Formatul AIFF
AIFF (Audio Interchange File Format) a fost dezvoltat de ctre
Apple. Acest tip de fiiere nu sunt suportate de toate browser-
ele.
Aceste fiierele au extensia .aif sau .aiff.
e) e) Formatul SND
SND (Sound) a fost dezvoltat, de asemenea, de ctre Apple i au
acelai dezavantaj, i anume c nu sunt suportate de toate
browser-ele.
Aceste fiierele au extensia .snd.
f) f) Formatul WAVE
WAVE (waveform) a fost dezvoltat de ctre IBM i Microsoft.
Este un format suportat de toate computerele pe care ruleaz
Windows i este recunoscut de majoritatea browsere-lor.
Fiierele de tip WAVE au extensia .wav.
g) g) Formatul MP3
Fiierele MP3 sunt de fapt fiiere MPEG, dezvoltate iniial pentru
video de ctre Moving Pictures Experts Group. Se poate afirma
c fiierele MP3 reprezint partea de sunet dintr-un fiiere video
n format MPEG.
MP3 este n prezent unul dintre cele mai populare formate
folosite la nregistrarea muzicii. Sistemul de codificare MP3
combin o bun compresie (ce duce la fiiere mici) cu calitate
nalt. Este de ateptat ca pe viitor toate sistemele de operare s
ofere suport pentru acest tip de format.
Fiierele de tip MP3 au extensia .mp3 sau .mpga.
n funcie de scopul pentru care creai o pagin web multimedia
va trebui s v orientai i asupra unui anumit format de fiier.
Astfel, dac dorii ca sunetele nregistrate (muzic sau de alt tip)
s poat fi asculatet de toi vizitatorii paginii web, atunci trebuie
s folosii fiiere n format WAV, ntruct este cel mai popular
format pe Internet i este suportat de majoritatea browsere-lor.
Dac pagina web este despre nregistrri muzicale, atunci
formatul cel mai potrivit este MP3.
12.3. Formatul fiierelor multimedia ce conin video
i imaginile video pot fi stocate n diferite formate de fiiere.

Astfel deosebim:
a) a) Formatul AVI
Formatul AVI (Audio Video Interleave) a fost dezvoltat de ctre
Microsoft. Este un format suportat de toate computerele pe care
ruleaz Windows i este recunoscut de majoritatea browsere-lor.
Dei este un format des ntlnit pe Internet, nu este ntotdeauna
suportat de calculatoarele cu sisteme de operare non-Windows.
Fiierele de tip AVI au extensia .avi.
b) b) Formatul Windows Media

Acest formatul a fost dezvoltat de ctre Microsoft. i acest
format este unul suportat de toate computerele pe care ruleaz
Windows, dar nu este suportat de calculatoarele cu sisteme de
operare non-Windows dect n urma instalrii unor extra
componente (playere specializate).
Fiierele de tip Windows Media au extensia .wmv.
c) c) Formatul MPEG
Formatul MPEG (Moving Pictures Expert Group) este n prezent
unul dintre cele mai populare formate folosite pe Internet. Acest
format este suportat de majoritatea sistemelor de operare i de
cele mai populare browsere de Internet.
Fiierele de tip MPEG au extensia .mpg sau .mpeg.
d) d) Formatul QuickTime
Formatul QuickTime a fost dezvoltat de ctre Apple i nu poate
rula pe platformele Windows fr instalarea unui player
specializat.
Fiierele de tip QuickTime au extensia .mov sau .qtm.
e) e) Formatul RealVideo
Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real
Media.
Formatul permite difuzarea de informaii video (video on-line,
Internet video) cu lime de band joas. Din cauza acestei
limi de band, calitatea este, de cele mai multe ori, slab.
Fiierele de tip RealVideo au extensia .rm sau .ram.
f) f) Formatul Shockwave (Flash)

Formatul Shockwave a fost dezvoltat de ctre Macromedia. Acest
format necesit instalarea unui player specializat pentru a putea
rula. n prezent, aceast component este oferit preinstalat de
ultimele versiuni ale browsere-lor Netscape i Internet Explorer.
Fiierele de tip Shockwave au extensia .swf.
12.4. Adugarea de informaii multimedia unei pagini web
Informaiile multimedia pot fi redate direct de browser sau prin

intermediul unui program ajuttor (un player specializat), n funcie de
elementul HTML i de formatul fiierului multimedia folosit.
Cea mai simpl cale de a realiza acest lucru este prin folosirea
unei ancore (link) care s duc la sursa elementului multimedia. Este
cea mai prietenoas metod ntruct ofer posibilitatea vizitatorilor
de a alege ntre a vedea o pagin web cu elemente multimedia sau
fr acestea.
n acest caz pagina se ncarc mult mai repede nemaifiind
nevoie s se ncarce toate informaiile multimedia.
Sintaxa folosit pentru realizarea celor prezentate mai sus este
similar cu cea prezentat n subcapitolul 6.3. (Ancore):
<A href="nume fiier multimedia">Click here to play

multimedia</A>
O metod specific, mai complex, ce are ca rezultat includerea

n pagina web (ca parte integrant din aceasta) a unor informaii
multimedia, se realizeaz prin intermediul elementului <OBJECT>.
Not: Dei, n funcie de browser-ul folosit, mai pot fi

folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de
Internet Explorer, i <EMBED>, recunoscut de Internet
Explorer i Netscape, consoriul W3C (World Wide Web
Consortium) recomand utilizarea elementului <OBJECT>.
Atributele utilizate cu acest element sunt:
Atribut Descriere
archive Precizeaz locaia (URL-ul) fiierelor arhiv.
Precizeaz locaia (URL-ul) obiectului. Valorile posibile
depind de proiectantul elementului de control. n
classid
Windows, aceste valori sunt nscrise n regitri i pot fi
accesate cu aplicaia Registry Editor.
Precizeaz calea (URI-ul) n care se gsete clasa
codebase
obiectului specificat prin atributele classid, data i archive.
codetype Specific tipul fiierului specificat prin atributul classid.
Precizeaz numele i locaia (URL-ul) obiectului. Se poate
data folosi mpreun sau ca o alternativ a atributului classid,
n funcie de tipul obiectului.
Cnd este prezent, acet atribut face ca definiia curent
declare introdus de elementul <OBJECT> s fie tratat ca o
simpl declaraie.
height Specific nlimea suprafeei n care va fi afiat obiectul.
Precizeaz denumirea obiectului (cnd acesta este cuprins
name
ntr-un formular).
Precizeaz textul ce va fi afiat pn cnd este ncrcat
standby
obiectul.
Precizeaz poziia elementului curent n document
tabindex (ordinea n care va fi focalizat de utilizator cnd se
folosete tastatura).
Determin tipul MIME asociat cu fiierul respectiv. Este un
type atribut opional dar recomandat cnd se folosete
atributul data.
width Specific limea suprafeei n care va fi afiat obiectul.
Acest element necesit n mod obligatoriu tag-ul de nchidere

corespunztor </OBJECT>.
mpreun cu elementul <OBJECT> (n interiorul acestuia) se
folosete i elementul asociat <PARAM> care definete parametrii
elementului <OBJECT>.
Atributele utilizate cu acest element sunt:
Atribut Descriere
id Precizeaz un identificator unic pentru element.
name Precizeaz o denumire pentru element.
type Determin tipul coninutului.
value Specific valoarea parametrului.
valuetype Specific tipul valoarii parametrului.
Elementul <OBJECT> poate suporta diferite tipuri de informaii

multimedia, cum ar fi imagini, sunete, video, pagini web etc.
n funcie de tipul acestor informaii, difer i sintaxa folosit n
limbajul HTML.
Astfel, pentru a insera o imagine (n format .jpg), prin

intermediul elementului <OBJECT>, se folosete urmtoarea sintax:
<OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg"

DATA="nume_fisier.jpg">
</OBJECT>
Pentru a insera un sunet (n format .wav) se folosete

urmtoarea sintax:
<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-
0080C74C7E95">
<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>
Pentru a insera un film (n format .wmv) se folosete urmtoarea

sintax:
0080C74C7E95">
<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>
Pentru a insera o pagin web se folosete urmtoarea sintax:
<OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..."

DATA="http://www.pagina_web.com">
</OBJECT>
Pentru a insera o animaie creat n Flash (n format .swf) se

folosete urmtoarea sintax:
<OBJECT WIDTH="..." HEIGHT="..."
CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
CODEBASE="http://download.macromedia.com/pub/sho
ckwave/cabs/flash
/swflash.cab#4,0,0,0">
<PARAM NAME="SRC" VALUE=" nume_fisier.swf">
</OBJECT>
12.5. Inserarea unui film QuickTime ntr-o pagin web
Formatul QuickTime a fost dezvoltat de ctre Apple i, dei este

un format des ntlnit pe Internet, nu poate rula pe platformele
Windows fr instalarea unui player specializat.
Fiierele de tip QuickTime au extensia .mov sau .qtm.
Cu ajutorul elementului <OBJECT> poate fi uor adugat cod
ntr-o pagin web astfel nct un film QuickTime s poat fi inserat
ntr-o pagin web.
Astfel, se poate seta instalarea automat a unui player
QuickTime n cazul n care nu este deja instalat.
Sintaxa folosit n mod uzual este de forma urmtoare:
<OBJECT WIDTH="240" HEIGHT="300"

CLASSID="clsid:02BF25D5-8C17-4B23-BC80-
D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.c
ab">
<PARAM NAME="src" VALUE="sample.mov">
<PARAM NAME="autoplay" VALUE="true">
<PARAM NAME="controller" VALUE="true">
</OBJECT>
Atributele width i height trebuie setate astfel nct s

corespund dimensiunii fimului QuickTime (n pixeli).
Atributul classid identific n mod unic software-ul ce va rula
filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23-BC80-
D3488ABDDC6B" astfel nct s identifice controlul ActiveX ce trebuie
instalat pe computer nainte ca filmul s poat fi rulat. Dac utilizatorul
nu are instalat respectivul control ActiveX, browser-ul poate n mod
automat s-l descarce i s-l instaleze.
Atributul codebase specific calea (URI-ul) n care se gsete
clasa obiectului specificat prin atributul classid. Internet Explorer
folosete acest atribut pentru a specifica locaia de unde poate fi
descrcat player-ul corespunztor. n acest caz, trebuie setat
"http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaia
unde se gsete ultima variant a player-ului QuickTime.
Parametrul src trebuie s se orienteze asupra fiierului ce
conine filmul.
Parametrul autoplay se seteaz "true" n cazul n care se
dorete ca filmul s nceap s ruleze automat.
La fel i parametrul controller se seteaz "true" n cazul n care
se dorete s fie afiat bara de control a player-ului.
n urma inserrii codului prezentat mai sus, rezultatul va fi
urmtorul:
12.6. Inserarea unui film Real Video ntr-o pagin web
Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real

Media.
Formatul permite difuzarea de informaii video (video on-line,
Internet video) cu lime de band joas. Din cauza acestei limi de
band, calitatea este, de cele mai multe ori, slab.
Fiierele de tip RealVideo au extensia .rm sau .ram.
Cu ajutorul elementului <OBJECT> se introduce codul n pagina
web astfel nct filmele Real Video s poat fi inserate ntr-o pagin
web.
Spre deosebire de formatul QuickTime, nu se poate seta
instalarea automat a player-ului corespunztor n cazul n care nu
este deja instalat. Prin urmare, nainte de a putea rula un film n
format Real Video, este necesar instalarea programului RealPlayer.
Versiunea pentru Windows poate fi descrcat de la adresa
http://uk.real.com/player/win.
Sintaxa folosit n mod uzual este de forma urmtoare:

CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
<PARAM NAME="controls" VALUE="All">
<PARAM NAME="autostart" VALUE="true">
<PARAM NAME="src" VALUE="sample.rm">
</OBJECT>
Atributele width i height trebuie setate astfel nct s

corespund dimensiunii fimului Real Video (n pixeli).
Atributul classid identific n mod unic software-ul ce va rula
filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA" astfel nct s identifice controlul ActiveX ce trebuie
instalat pe computer nainte ca filmul s poat fi rulat.
Parametrul src trebuie s se orienteze asupra fiierului ce
conine filmul.
Parametrul autostart se seteaz "true" n cazul n care se
dorete ca filmul s nceap s ruleze automat.
Parametrul controls se seteaz "All" n cazul n care se dorete
s fie afiat bara de control a player-ului sau "ImageWindow " n
cazul n care NU se dorete s fie afiat bara de control a player-ului.
n urma inserrii codului prezentat mai sus, rezultatul va fi
urmtorul:
12.7. Alte metode de inserare a unor sunete ntr-o pagin
web
Aa cum am atras atenia anterior, pentru introducerea de

sunete ntr-o pagin web mai pot fi folosite i alte elemente, cum ar fi
<BGSOUND>, recunoscut de Internet Explorer, i <EMBED>,
recunoscut de Internet Explorer i Netscape.
Elementul <BGSOUND> este folosit pentru a insera un sunet pe
fundalul unei pagini web. Fiierele suportate de acest element pot fi n
format WAV, AU sau MID.
Atributele caracteristice acestui element sunt:
Atribut Descriere
Precizeaz balansul. Poate lua valori ntre -10000 (100%
balance
stnga) i +10000 (100% dreapta).
delay Definete timpul de pauz dintre repetiii.
id Definete un identificator atribuit sunetului.
loop Precizeaz de cte ori va fi repetat sunetul (-1 = infinit).
src Precizeaz locaia (URL-ul) fiierului ce conine sunete.
title Precizeaz un titlu atribuit sunetului.
volume Precizeaz volumul. Poate lua valori ntre 0 (max.) i
-10000 (min.).
Sintaxa folosirii acestui element este foarte simpl:
<HTML>
<BODY>
<H2>Muzica in fundal </H2>
<BGSOUND SRC="town.mid">
</BODY>
</HTML>
Folosind codul de mai sus vei obine o pagin web pe fundalul

crei se va auzi o pies instrumental.
Elementul <EMBED> este folosit pentru a insera elemente

multimedia ntr-o pagin web n cazul browsere-lor care nu suport
elementul <OBJECT>.
Elementul <OBJECT> poate fi folosit cu browserele mai noi, care
suport controale ActiveX (Internet Explorer 5), n vreme ce
elementul <EMBED> este recomandat s fie folosit pentru browserele
mai vechi.
Pentru compatibilitate, se recomand folosirea simultan a celor
dou elemente. n aceast situaie, un browser care recunoate
elementul <OBJECT> va ignora elementul <EMBED>.
Atributele caracteristice acestui element sunt:
Atribut Descriere
Stabilete dac obiectul multimedia pornete n mod
autostart automat la ncrcarea paginii web. Poate lua valorile true
sau false.
height Specific nlimea suprafeei n care va fi afiat obiectul.
Stabilete dac obiectul multimedia este vizibil pentru
hidden
vizitatorul paginii web. Poate lua valorile true sau false.
src Precizeaz locaia (URL-ul) fiierului ce conine sunete.
width Specific limea suprafeei n care va fi afiat obiectul.
Precizeaz volumul. Poate lua valori ntre 0 (max.) i
volume
-10000 (min.).
mpreun cu elementul <EMBED> se recomand folosirea

elementului <NOEMBED> care ar trebui s conin informaii ce vor fi
afiate n cazul n care browser-ul nu suport elementul <EMBED>.
Din nefericire, un browser care suport elementul <EMBED> va
ignora elementul <NOEMBED>, chiar dac este incapabil s
afieze obiectul introdus de elementul <EMBED>.
Sintaxa recomandat pentru folosirea acestui element este

urmtoarea:
<EMBED SRC="cale/fiier_multimedia" WIDTH="..."

HEIGHT="..." >
<NOEMBED>
<P>Din pcate nu avei instalat plugin-ul corespunztor
pentru a vedea acest tip de fiier multimedia. Putei vedea n
continuare o imagine edificatoare.
<IMG SRC="cale/fiier_imagine" WIDTH="..."
HEIGHT="..." ALT="o imagine edificatoare">
</NOEMBED>
Se poate folosi chiar i o combinaie ntre elementele <EMBED>

i <BGSOUND>, astfel nct, dac unul din elemente nu este suportat
de browser, s fie recunoscut cellalt.
Folosirea codului urmtor
<HTML>
<BODY>
<EMBED SRC="town.mid" WIDTH="100" HEIGHT="40"
>
<NOEMBED>
<H2>Muzica in fundal </H2>
<BGSOUND SRC="town.mid">
</NOEMBED>
</BODY>
</HTML>
va avea ca rezultat afiarea urmtorului rezultat:

Not: Bara de control afiat aparine player-ului
QuickTime deoarece a fost setat ca "Default Player" pentru
fiierele de tip .MID.
Pentru exemplificare, vom crea un fiier test12.html ce va

cuprinde o parte dintre elementele prezentate anterior:
<HTML>
<HEAD>
<TITLE>Adaugarea de informatii multimedia unei pagini
web</TITLE>
</HEAD>
<BODY>
<H2>Inserarea unei imagini</H2>
<OBJECT HEIGHT="200" WIDTH="200"
TYPE="image/jpeg" DATA="computer.jpg">
</OBJECT>
<BR>
<H2>Inserarea unui sunet (format .wav)</H2>
0080C74C7E95">
<PARAM NAME="FileName" VALUE="horse.wav">
<EMBED SRC="horse.wav" WIDTH="100"
HEIGHT="40" >
<NOEMBED>
Browser-ul dvs. nu suport elementele OBJECT i
nici EMBED
</NOEMBED>
</OBJECT>
<BR>
<H2>Inserarea unui film (format .wmv)</H2>
0080C74C7E95">
<PARAM NAME="FileName" VALUE="movie.wmv">
</OBJECT>
<BR>
<H2>Inserarea unei pagini web</H2>
<OBJECT TYPE="text/html" HEIGHT="200"
WIDTH="400"
DATA="test10.html">
</OBJECT>
<BR>
<H2>Inserarea unei animatit Flash (format .swf)</H2>
CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
CODEBASE="http://download.macromedia.com/pub/sho
ckwave/cabs/flash/swflash.cab#4,0,0,0">
<PARAM NAME="SRC" VALUE="flash.swf">
</OBJECT>
</BODY>
</HTML>

CAP. 13. ELEMENTE SPECIALE
13.1. Meta-Elementele
Scopul elementelor meta este de oferi informaii despre

coninutul documentului web. Mai poart numele de metadate, adic
sunt date care descriu alte date.
Sunt marcate prin tag-ul <META>, nu necesit tag de nchidere,
iar folosirea lor este opional. ntr-un document web pot fi incluse
un numr nelimitat de astfel de elemente.
Aceste elemente pot fi incluse numai n interiorul seciunii
<HEAD> a unui document web.
Dei ofer informaii relevante pentru browser i pentru
motoarele de cutare, descriind coninutul documentului web, acestea
nu sunt afiate de ctre browsere.
Cele mai importante atribute ale acestui element sunt:

- autorul documentului
author
- descrierea documentului
description
- cuvinte cheie
keywords
name - programul cu care a fost generat codul
generator
- data ultimei actualizri (eventual i
revised
autorul)
others
- etc.
- tipul i setul de caractere
content-type - data i ora la care expir documentul
expires - specific timpul i un alt URL ce va fi
http-equiv
refresh ncrcat
set-cookie - seteaz numele i valoarea pentru
cookie-uri
Caracteristic acestui element este faptul c fiecare cuprinde o

pereche de atribute.
Astfel, descrierea unui document web se poate realiza folosind
urmtoarea sintax:
<META NAME="description" CONTENT="coninut">
Definirea cuvintelor cheie, util pentru unele motoare de

cutare, se poate realiza folosind urmtoarea sintax:
<META NAME="keywords" CONTENT="aici niruii

cuvinte cheie relevante despre coninutul documentului web
separate prin virgul">
Datorit abuzurilor unor webmasteri, prin repetarea n mod

exagerat a unor cuvinte cheie, multe din motoarele de cutare
existente astzi au ncetat s mai considere relevant informaia
cuprins n aceast seciune i se axeaz pe analiza coninutului
documentului.
n cazul n care dorii s redirecionai vizitatorii unei pagini ctre
o alt pagin n mod automat, se folosete atributul HTTP-EQUIV cu
valoarea refresh, n urmtoarea sintax:
<META HTTP-EQUIV="refresh" CONTENT="timp;

URL=pagina_noua.html">
Variabila timp specific timpul (n secunde) dup care va fi

ncrcat noul URL specificat n variabila pagina_noua.html.
Atenie la folosirea ghilimelelor care cuprind ntregul

coninut al atributului CONTENT i la punctul i virgula care
separ cele dou variabile.
Este recomandat ca pentru utilizatorii cu browsere din vechile

generaii care nu fac refresh n mod automat s adugai un link n
seciunea <BODY> a documentului, astfel nct vizitatorii s poat fi
redirecionai manual ctre o alt pagin web.
Pentru a insera informaii despre tipul de document web

(valoarea prestabilit a acestuia este text/html) i despre setul de
caractere utilizat n document, se atribuie valoarea content-type
atributului HTTP-EQUIV, iar variabilele asociate atributului CONTENT
vor conine respectivele informaii n urmtoare sintax:
<META HTTP-EQUIV="content-type"
CONTENT="text/html; charset=windows-1250">
Setul de caractere windows-1250 conine setul de caractere

utilizat n Europa Central i de Est (Belarus, Croaia, Cehia, Ungaria,
Polonia, Romnia, Serbia, Slovacia, Slovenia).
13.2. Inserarea comentariilor
n multe situaii este necesar inserarea de comentarii ncodul

surs al unui document web. Astfel de comentarii sunt ignorate de
ctre browser. Putei folosi comentariile pentru a explica codul scris la
un moment dat, ceea ce v-ar putea ajuta ulterior, n cazul n care
dorii s modificai codul.
De asemenea, n interiorul comentariilor pot fi stocate informaii
specifice pentru anumite programe, care nu vor fi vizibile pentru
utilizatori dat vor fi totui interpretate de programele respective. O
practic des ntlnit este de a insera scripturile Javascript ;i
elementele de stil n interiorul comentariilor, astfel nct browserele
care nu recunoscul respectivele elemente s nu le afieze.
Tag-urile care definesc un comentariu sunt .
Comentariile pot fi plasate oriunde n interiorul unui document
web.
.
Not: V recomand s folosii totui cu msur

comentariile n interiorul unui document web deoarece, ca
orice alt element, mrete dimensiunea fiierului HTML ceea ce
duce, implicit, la un timp mai mare de ncrcare n browser.
Pentru a exemplifica cele prezentate anterior, vom crea un fiier

test13.html ce va avea urmtorul coninut:
<HTML>
<HEAD>
<META HTTP-EQUIV="refresh"
CONTENT="5;URL=test13b.html">

<META HTTP-EQUIV="content-type"
CONTENT="text/html; charset=windows-1250">

<META NAME="description" CONTENT="Pagina web ce
prezinta exemple de folosire a unor elemente speciale HTML">

<META NAME="keywords" CONTENT="HTML, web,
refresh, meta, comentariu, exemplu">

</HEAD>
<BODY>
<P>Peste 5 secunde veti fi directionat catre pagina <A
HREF="test13b.html">test13b.html</A>.

<BR>Daca nu sunteti redirectionat, va rugam sa dati click
pe link.</P>
</BODY>
</HTML>
Fiierul test13b.html are urmtorul coninut:
<HTML>
<BODY>
<P>Dati click pe urmatorul link pentru a reveni in pagina
anterioara <A HREF="test13.html">test13.html</A></P>
</BODY>
</HTML>

CAP. 14. INTRODUCERE N CSS
14.1. Ce nseamn CSS?
CSS (Cascading Style Sheets) sau foi de stil n cascad,

reprezint un mecanism simplu de a aduga elemente de stil (tipuri de
caractere, culori, aliniere, spaiere etc.) unui document web.
Tag-urile HTML au avut iniial rolul de defini coninutul unui
document, de a face distincia ntre titlul unui paragraf (definit prin
tag-urile <Hn>), coninutul paragrafului (definit prin tag-ul <P>),
tabele (definite prin tag-ul <TABLE>) etc. Aspectul i modul de afiare
al unui site cdeau n sarcina browserului, fr a fi folosite niciun fel de
tag-uri de formatare.
Dar cum cele dou principale browsere Internet Explorer i
Netscape Navigator au continuat s adauge noi tag-uri i atribute
limbajului HTML original, a devenit tot mai dificil s creezi un site n
care coninutul documentului HTML s fie clar separat de modul su de
prezentare.
Pentru a rezolva aceast problem, consoriul W3C, responsabil
de standardizarea specificaiilor HTML, a creat stilurile i le-a adugat
specificaiilor HTML 4.0.
n prezent, marea majoritate a browserelor suport CSS.
14.2. Prioritate n cascad
CSS specific o schem a prioritilor pentru a determina care

regul de stil are prioritate atunci cnd exist mai multe reguli aplicate
aceluiai element. Este vorba de aa-numita prioritate n cascad,
prioritatea fiind calculat conform anumitor reguli, astfel nct rezultat
s fie predictibil.
Informaiile de stil pot fi prezentate sub diferite forme, astfel
putem deosebi:
- - stiluri inline, definite n interiorul unui element HTML
- - foi de stil interne, definite n interiorul elementului
<HEAD>
- - foi de stil externe, definite ntr-un fiier cu extensia .css
Prioritatea cea mai mare o are stilul inline, dup care, din
punctul de vedere al prioritii, urmeaz stilul definit n interiorul
elementului <HEAD> i, n cele din urm, stilul din foia extern. Prin
urmare, o definire a stilului inline va prevala n faa stilului intern care,
la rndul su, va prevala n faa stilului extern.
14.3. Folosirea stilurilor

Sintaxa CSS este alcatuit din trei pri: un selector, o
proprietate i o valoare, n urmtorul format:
selector { proprietate: valoare}
Selectorul este reprezentat de elementul (tag-ul) crui dorii s-i

aplicai un anumit stil, proprietatea este atributul pe care dorii s-l
schimbai i fiecare proprietate poate lua o anumit valoare.
Propritatea i valoarea sunt separate de dou puncte (:) i sunt
ncadrate de acolade {}. De exemplu:
body {color: blue}
Dac dorii s modificai mai multe proprieti aceluiai element,

trebuie s separai fiecare proprietate cu punct i virgul (;). Exemplul
de mai jos arat cum s definii un paragraf aliniat pe centrul paginii
iar textului i se aplic culoarea roie:
p {text-align: center; color: red}
Pentru a evidenia mai bine proprietile definitie de stil, putei

scrie fiecare proprietate pe cte un rnd, ca n exemplul urmtor:
p{
text-align: center;
color: red
}
De asemenea, ca i n HTML, pentru a putea introduce i

explicaii ce pot fi utile ulterior, n CSS pot fi inserate comentarii ce vor
fi ignorate de ctre browser. Comentariile ncep cu (/*) i se ncheie cu
(*/), ca n exemplul urmtor:
/* Acesta este un comentariu */
14.4. Cum se insereaz o foaie de stil
Cnd un browser citete o foaie de stil, va aplica documentului

formatrile specificate n foia respectiv. n funcie de forma n care
sunt prezentate informaiile de stil, inserarea acestora ntr-un
document web se poate efectua n trei moduri:
a) astfel, pentru inserarea unei foi de stil externe, ideal cnd
stilul se va aplica mai multor pagini, trebuie folosit tag-ul <LINK> n
fiecare pagin ce urmeaz s foloseasc stilul respectiv. Atributele
obligatorii pentru tag-ul <LINK> sunt REL cu valoarea stylesheet,
TYPE cu valoarea text/css i HREF care are ca valoare adresa URL a
fiierului care conine foaia de stil.
Acest tag se amplaseaz n seciunea HEAD a paginii web cu
urmtoarea sintax:
<HEAD>
<LINK REL="stylesheet" TYPE="text/css"
HREF="nume_fiier.css">
</HEAD>
n aceste condiii, browserul va citi foia de stil din fiierul

nume_fiier.css i va formata documentul n mod corespunztor.
O foaie de stil poate fi scris n orice editor de text. Fiierul nu
trebuie sa conin vreun tag HTML i trebuie salvat cu extensia .css.
b) o foaie de stil intern ar trebui folosit atunci cnd exist un
singur document cu un stil propriu. Foaia de stil intern se definete n
seciunea HEAD folosind tagul <STYLE> astfel:
<HEAD>
<STYLE TYPE="text/css">
h1 {color: blue}
p {margin-left: 20px}
body {background-image: url("fundal.gif")}
</STYLE>
</HEAD>
Browserul va citi acum stilurile, aa cum au fost definite, i va

formata documentul n conformitate cu acestea.
Not: n mod normal un browser ignor tag-urile

necunoscute. Acest lucru nseamn c browserele mai vechi,
care nu suport stiluri, vor ignora tag-ul <STYLE>, dar vor
afia coninutul acestuia, cuprins ntre tag-ul de nceput i cel
de ncheiere, sub form de text. Pentru a prentmpina acest
neajuns, este recomandabil s includei coninutul n interiorul
unui comentariu, ca n exemplul de mai jos:
<HEAD>

</STYLE>
</HEAD>
c) n final, dac dorii s folosii un stil inline, va trebui s folosii

atributul style n interiorul tag-ului respectiv. Este o metod folosit
mai ales atunci cnd un stil urmeaz s fie aplicat unei singure apariii
a unui element. Atributul style poate conine orice caracteristic CSS.
Exemplul urmtor arat cum se poate schimba culoarea i stilul
fontului folosit ntr-un paragraf, fr a mai apela la tag-urile <FONT>
cu atributul color i <B>:
<p style="color:red; font-weight:bold"> Acesta este un

paragraf n care textul va fi de culoare roie i scris cu
caractere ngroate</p>
Nu voi insista asupra foilor de stil, o prezentare amnunit a

acestora urmnd s fac subiectul unui viitor ghid.
CAP. 15. CONSIDERAII GENERALE DESPRE DESIGN I
ASPECT
Este simplu s faci o pagin web, dar este important s faci o

pagin web bun. De ce afirm c este simplu s faci o pagin web?
Pentru c oricine are un editor HTML de tipul WYSIWYG (WhatYou See
Is What You Get) poate realiza o pagin web fr a fi nevoit s
neleag complexitatea unei pagini web privit ca un ntreg.
n acest capitol vom face o scurt trecere n revist a aspectelor
ce determin realizarea unei pagini web bune i a problemelor cu care
v-ai putea confrunta.
15.1. Diferene dintre un document web i unul tiprit
n contrast cu un document tiprit, un document web este ceva

complet diferit. n acest caz, designerul are prea puin control asupra
felului n care este afiat o pagin, ntruct acest lucru depinde n
mare msur de browserul web folosit. Dei frustrant, a face o pagin
web s fie afiat la fel n diferite browsere este un lucru extraordinar,
constituind o provocare pentru majoritatea webdesignerilor.
Cnd creeaz un site, un webdesigner trebuie s in cont de
urmtoarele:
Varietatea browserelor
Varietatea versiunilor pentru acelai tip de browser
Varietatea sistemelor de operare folosite
Varietatea adncimii culorii pe monitoarele vizitatorilor
Varietatea rezoluiilor alese de diveri utilizator
etc.
Cu un numr att de mare de variabile de care depinde afiarea
unei pagini web, nu este posibil ntotdeauna ca o pagin web s fie
afiat n mod identic pe dou calculatoare diferite. i, aa cum am
precizat i anterior, acest lucru constituie o adevarat provocare
pentru webdesigneri.
n orice caz, trebuie s inei cont ca un site nu este fcut pentru
voi sau pentru eful vostru. Numai pentru c exist o introducere
fcut n Flash pe un site nu nseamn c trebuie s avei i voi o
introducere similar.
Un site trebuie creat n funcie de public int cruia i se
adreseaz. Acetia pot fi clieni sau poteniali clieni. Un bun
webdesigner i privete rezultatul muncii prin ochii unui potenial
client.
De exemplu, dac concepei un site adresat persoanelor mai n
vrst, trebuie s avei grij s oferii site-ului un aspect simplu, uor
de urmrit, cu fonturi puin mai mari dect de obicei.
Trebuie s analizai cu regularitate statisticile referitoare la site
pentru a vedea ce browsere sunt folosite de majoritatea vizitatorilor,
ce sisteme de operare folosesc, dac folosesc platforma Javascript de
la Sun, sau dac au activate anumite controale ActiveX. Pentru a
obine astfel de informaii putei folosi fie scripturile proprii, fie nscriei
propriul site ntr-unul dintre site-urile de analiz existente pe Internet
(de exemplu www.trafic.ro sau www.statistics.ro).
15.2. Mrimea optim a unei paginii web i optimizarea ei
Optimizarea paginilor web este unul din aspectele cele

importante ale webdesignului. O pagin web optimizat se ncarc
mult mai repede pe calculatorul vizitatorului i astfel informaia ajunge
mult mai repede la int. Paginile care se ncarc greu, i aici facem
referire la paginile care se ncarc n mai mult de 10 secunde, sau care
au o introducere facut n Flash, pot duce la pierderea unei pri dintre
vizitatori, n special a celor care nu au suficient rbdare. Nimic nu-i
mpiedic s apese unul din butoanele Back sau Close Window. Cu
toate acestea, introducerile create n Flash ofer i avantaje prin faptul
c pot fi foarte atractive din punct de vedere vizual i ofer
posibilitatea folosirii unor meniu interactive.
Pentru a stabili mrimea optim a unei pagini web trebuie s
avei n vedere cei patru factori care influeneaz ncrcarea ntr-un
browser:
mrimea fiierului care conine codul HTML
limea de band a conexiunii vizitatorilor
viteza procesorului serverului care gzdueite pagina web
complexitatea paginii web
Din moment ce nu putei interveni asupra conexiunii vizitatorilor,
trebuie s v ocupai de ceilali factori. Astfel, ncercai s gzduii
pagina web un server foarte rapid, optimizai pagina web prin
curarea codului HTML de elementele redundante, de grafica
excesiv, de elementele multimedia care nu sunt strict necesare etc.
ceea ce va avea ca rezultat micorarea dimensiunii fiierului surs.
Dac este vorba despre un site care se adreseaz tuturor
categoriilor de utilizatori, atunci mrimea fiecrei pagini web nu
trebuie s depeasc 75 kb. Astfel, vei avea garania c fiecare
pagin se ncarc n doar cteva secunde.
La calcularea mrimii unei pagini web se iau n calcul nu numai
fiierul HTML, ci i toate elementele grafice i multimedia folosite,
inclusiv imaginile de fundal, inclusiv scripturile Javascript externe
(fiiere cu extensia .js), inclusiv foile de stil (fiiere cu extensia .css),
scripturi PHP etc.
15.3. Structura i aspectul unui site
Structura directoarelor trebuie s fie logic i s reflecte aspectul

propriului site.
Un site poate ncepe ca o simpl pagin web, se poate dezvolta
ntr-un set de cteva pagini, iar n timp, n funcie de ct de
important dorii s fie prezena voastr pe Internet, poate ajunge
chiar i la sute de pagini. Coordonarea unui numr mare de pagini
poate fi un lucru extrem de dificil mai ales dac nu se lucreaz ntr-un
mod coerent de la nceput.
Astfel, trebuie evitat amestecul tuturor fiierelor ntr-un singur
director, fiind necesar gruparea lor n funcie de caracteristicile
similare.
De exemplu, toate imaginile incluse ntr-un site trebuie grupate
ntr-un director separat, cum ar fi imagini. Acesta, la rndul su, se
poate mpri n subdirectoare cu denumiri sugestive: pictograme,
butoane sau fundaluri.
n mod similar pot fi separate i fiierele de alt tip, cum ar fi cele
Javascript, PHP sau ASP, care pot fi incluse n directoare cu nume
sugestive.
Denumirea dat unui director sau subdirector depinde numai de
voi i, chiar dac este consumatoare de timp, cu siguran va ajuta la
nelegerea structurii site-ului de ctre oricine va dori s-i aduc
modificri.
Referitor la aspect, trebuie inut cont de faptul c o pagin web

ncepe n colul din stnga sus i se poate ntinde orict spre dreapta
sau n jos. Acesta face s poat fi infinit de lat i de lung.
Este recomandabil ca o pagin s nu necesite derulare spre

dreapta, de aceea, nainte de a publica o pagin web pe Internet,
trebuie testat modul n care se comport n funcie de diferite rezoluii
ale monitorului.
Dintre acestea, cele mai uzuale sunt:
640 x 480 (valabil pentru sistemele foarte vechi)
800 x 600
1024 x 768
1280 x 1024
1600 x 1280
Altele (valabile pentru Mac i Web TV)
15.4. Combinarea culorilor
Alegerea combinaiei de culori potrivite este esenial pentru

orice site. Aceasta trebuie s reflecte, pe ct de mult posibil, coninutul
site-ului. O bun combinaie de culori poate deschide drumul spre
succes, n vreme ce una aleas n mod nefericit poate duce la eecul
unui site.
Asigurai-v c alegei ntr-un mod chibzuit combinaia de culori
care s se potriveasc temei site-ului. Aceste culori trebuie s fie
complementare culorilor folosite pentru logo-ul ales sau n contrast cu
acesta, tocmai pentru a-l evidenia.
Reinei c efectul unei singure colori se schimb, uneori chiar
dramatic, cnd este folosit n combinaie cu alte culori.
De exemplu, culoarea roie este evitat de obicei de site-urile
ce ofer informaii financiare, n vreme ce combinaiile de albastru i
gri au fost ntotdeauna o bun alegere pentru site-urile profesionale.
15.5. Tipurile de caractere folosite
Dac simii un impuls irezistibil s folosii un tip de caracter

(font) incredibil de aspectuos sau unul care reproduce scrisul de mn,
sfatul meu este s v reinei un astfel de impuls.
Una dintre multitudinea de variabile din webdesign o constituie i
disponibilitatea unor anumite fonturi pe computerele vizitatorilor.
De exemplu, dac folosii pentru afiarea textului un font ce se
gsete n computerul vostru, cum ar fi Palatino, dar acesta nu se
gsete i n computerul unui vizitator, browserul va nlocui fontul
respectiv cu altul implicit, cum ar fi Times New Roman sau Arial. Acest
lucru va avea drept consecin schimbarea drastic a aspectului paginii
afiate i toat strduina voastr pentru realizarea unui site atractiv
va rmne fr rezultat.
Pentru o maxim compatibilitate a tipurilor de caractere ntre
diveri utilizatori i diverse browsere, sunt recomandate trei familii de
fonturi:
Familia fonturilor fr piciorue (Sans-serif)
Arial, Verdana, Geneva, Helvetica, Sans-serif
Familia fonturilor cu piciorue (Serif)
Times, Times New Roman, Georgia, Serif
Familia fonturilor fr monospaiate (Monospace)
Courier, Courier New, Monospace
Evident, exist i metode de a folosi fonturi deosebite ntr-o

pagin web. Cea mai simpl dintre acestea este de a transforma textul
respectiv ntr-o imagine, folosind o serie de programe adecvate. Dar,
cum totul are un pre, acesta va contribui la creterea dimensiunii
paginii web i, implicit, la o ncrcare mai lent.
Am tot amintit de diversitatea browserelor existente. Nu v
oprete nimeni s descrcai o copie a fiecruia dintre ele, mai ales c
sunt gratuite, i s le instalai n propriul computer. Astfel vei putea
testa propriul site pe cteva dintre cele mai folosite browsere (Internet
Explore, Netscape Navigator, Mozilla Firefox, Opera).
Legat de Netscape Navigator v informez c este oficial mort,
ncepnd cu 1 martie 2008 nu se mai acord niciun fel de suport
pentru niciuna dintre versiuni i nu vor mai fi realizate alte versiuni noi
(sursa http://archive.netscape.com/).
CAP. 16. PUBLICAREA UNUI SITE
16.1. Alegerea gazdei
n cazul n care acest ghid i-a atins scopul i ai reuit s

deprindei cele mai importante noiuni legate de limbajul HTML,
nseamn c deja putei crea un site.
Dar asta nu e totul. Un site, pentru a-i atinge scopul pentru
care a fost creat, mai trebui s fie publicat.
Tot ce v mai rmne de fcut este s gsii un server gazd,
unul gratuit pentru nceput, unde s postai site-ul. Cel mai simplu
mod este s cutai pe Google site-urile care ofer gzduire gratuit.
Dintre acestea v recomandm www.dap.ro.
16.2. Crearea contului
Primul pas const n crearea unui cont.

Pentru c modul de creare a unui cont difer de la un site la
altul, pentru exemplificare vom folosi site-ul www.dap.ro.
Am ales ca denumire (nume utilizator) ghid_html@yahoo.com
Dup efectuarea tuturor pailor de nregistrare i introducerea

datelor personale, vei primi un cod de activare la adresa de mail pe
care ai specificat-o.
16.3. Publicarea site-ului

Dup activarea contului va trebui s comandai un pachet de
gzduire. n cazul de fa am ales unul gratuit:
n acest moment, dnd click pe link-ul GRATUIT, vom avea acces

la panoul de administrare care, printre altele, ofer facilitatea unui
Manager de Fiiere ce v permite s ncrcai propriile fiiere pe
serverul xhost.
Este momentul s ncepei crearea paginilor (n cazul n care nu
ai creat deja o variant off-line a site-ului pe propriul PC). Este indicat
s avei dou copii ale documentului. O copie trebuie s fie pe serverul
gazdei iar a doua pe computerul personal, astfel nct problemele
cauzate de cderile de curent sau pierderea conexiunii la internet s
nu v afecteze munca.
n continuare, urmnd recomandrile din capitolul precedent, va
trebui s creai un director pe hard disk pentru a stoca documentele
HTML, imaginile, sunetele, precum i celelalte elemente pe care dorii
s le includei n paginile web.
Pagina principal trebuie denumit "index.html", majoritatea
serverelor fiind setate s recunoasc pagina principal dup aceast
denumire. n cazul n care "index.html" nu funcioneaz ca pagin
principal, contactai persoana care administreaz server-ul i
ntrebai-l ce denumire implicit are setat server-ul pentru a
recunoate pagina principal (de ex. index.htm, main.html etc.).
Cea mai bun experien n webdesign o vei cpta navignd pe
Internet. Putei salva o copie complet a site-urilor care v rein
atenia i le putei studia codul surs pentru a analiza (nu copia)
modul n care au fost fcute.
V doresc mult succes!
CAP. 14. INTRODUCERE N CSS
14.1. Ce nseamn CSS?
CSS (Cascading Style Sheets) sau foi de stil n cascad,

reprezint un mecanism simplu de a aduga elemente de stil (tipuri de
caractere, culori, aliniere, spaiere etc.) unui document web.
Tag-urile HTML au avut iniial rolul de defini coninutul unui
document, de a face distincia ntre titlul unui paragraf (definit prin
tag-urile <Hn>), coninutul paragrafului (definit prin tag-ul <P>),
tabele (definite prin tag-ul <TABLE>) etc. Aspectul i modul de afiare
al unui site cdeau n sarcina browserului, fr a fi folosite niciun fel de
tag-uri de formatare.
Dar cum cele dou principale browsere Internet Explorer i
Netscape Navigator au continuat s adauge noi tag-uri i atribute
limbajului HTML original, a devenit tot mai dificil s creezi un site n
care coninutul documentului HTML s fie clar separat de modul su de
prezentare.
Pentru a rezolva aceast problem, consoriul W3C, responsabil
de standardizarea specificaiilor HTML, a creat stilurile i le-a adugat
specificaiilor HTML 4.0.
n prezent, marea majoritate a browserelor suport CSS.
14.2. Prioritate n cascad
CSS specific o schem a prioritilor pentru a determina care

regul de stil are prioritate atunci cnd exist mai multe reguli aplicate
aceluiai element. Este vorba de aa-numita prioritate n cascad,
prioritatea fiind calculat conform anumitor reguli, astfel nct rezultat
s fie predictibil.
Informaiile de stil pot fi prezentate sub diferite forme, astfel
putem deosebi:
- - stiluri inline, definite n interiorul unui element HTML
- - foi de stil interne, definite n interiorul elementului
<HEAD>
- - foi de stil externe, definite ntr-un fiier cu extensia .css
Prioritatea cea mai mare o are stilul inline, dup care, din
punctul de vedere al prioritii, urmeaz stilul definit n interiorul
elementului <HEAD> i, n cele din urm, stilul din foia extern. Prin
urmare, o definire a stilului inline va prevala n faa stilului intern care,
la rndul su, va prevala n faa stilului extern.
14.3. Folosirea stilurilor
Sintaxa CSS este alcatuit din trei pri: un selector, o

proprietate i o valoare, n urmtorul format:
selector { proprietate: valoare}
Selectorul este reprezentat de elementul (tag-ul) crui dorii s-i

aplicai un anumit stil, proprietatea este atributul pe care dorii s-l
schimbai i fiecare proprietate poate lua o anumit valoare.
Propritatea i valoarea sunt separate de dou puncte (:) i sunt
ncadrate de acolade {}. De exemplu:
body {color: blue}
Dac dorii s modificai mai multe proprieti aceluiai element,

trebuie s separai fiecare proprietate cu punct i virgul (;). Exemplul
de mai jos arat cum s definii un paragraf aliniat pe centrul paginii
iar textului i se aplic culoarea roie:
p {text-align: center; color: red}
Pentru a evidenia mai bine proprietile definitie de stil, putei

scrie fiecare proprietate pe cte un rnd, ca n exemplul urmtor:
p{
text-align: center;
color: red
}
De asemenea, ca i n HTML, pentru a putea introduce i

explicaii ce pot fi utile ulterior, n CSS pot fi inserate comentarii ce vor
fi ignorate de ctre browser. Comentariile ncep cu (/*) i se ncheie cu
(*/), ca n exemplul urmtor:
/* Acesta este un comentariu */
14.4. Cum se insereaz o foaie de stil
Cnd un browser citete o foaie de stil, va aplica documentului

formatrile specificate n foia respectiv. n funcie de forma n care
sunt prezentate informaiile de stil, inserarea acestora ntr-un
document web se poate efectua n trei moduri:
a) astfel, pentru inserarea unei foi de stil externe, ideal cnd
stilul se va aplica mai multor pagini, trebuie folosit tag-ul <LINK> n
fiecare pagin ce urmeaz s foloseasc stilul respectiv. Atributele
obligatorii pentru tag-ul <LINK> sunt REL cu valoarea stylesheet,
TYPE cu valoarea text/css i HREF care are ca valoare adresa URL a
fiierului care conine foaia de stil.
Acest tag se amplaseaz n seciunea HEAD a paginii web cu
urmtoarea sintax:
<HEAD>
<LINK REL="stylesheet" TYPE="text/css"
HREF="nume_fiier.css">
</HEAD>
n aceste condiii, browserul va citi foia de stil din fiierul

nume_fiier.css i va formata documentul n mod corespunztor.
O foaie de stil poate fi scris n orice editor de text. Fiierul nu
trebuie sa conin vreun tag HTML i trebuie salvat cu extensia .css.
b) o foaie de stil intern ar trebui folosit atunci cnd exist un
singur document cu un stil propriu. Foaia de stil intern se definete n
seciunea HEAD folosind tagul <STYLE> astfel:
<HEAD>
h1 {color: blue}
</STYLE>
</HEAD>
Browserul va citi acum stilurile, aa cum au fost definite, i va

formata documentul n conformitate cu acestea.
Not: n mod normal un browser ignor tag-urile

necunoscute. Acest lucru nseamn c browserele mai vechi,
care nu suport stiluri, vor ignora tag-ul <STYLE>, dar vor
afia coninutul acestuia, cuprins ntre tag-ul de nceput i cel
de ncheiere, sub form de text. Pentru a prentmpina acest
neajuns, este recomandabil s includei coninutul n interiorul
unui comentariu, ca n exemplul de mai jos:
<HEAD>

</STYLE>
</HEAD>
c) n final, dac dorii s folosii un stil inline, va trebui s folosii

atributul style n interiorul tag-ului respectiv. Este o metod folosit
mai ales atunci cnd un stil urmeaz s fie aplicat unei singure apariii
a unui element. Atributul style poate conine orice caracteristic CSS.
Exemplul urmtor arat cum se poate schimba culoarea i stilul
fontului folosit ntr-un paragraf, fr a mai apela la tag-urile <FONT>
cu atributul color i <B>:
<p style="color:red; font-weight:bold"> Acesta este un

paragraf n care textul va fi de culoare roie i scris cu
caractere ngroate</p>
Nu voi insista asupra foilor de stil, o prezentare amnunit a

acestora urmnd s fac subiectul unui viitor ghid.
CAP. 15. CONSIDERAII GENERALE DESPRE DESIGN I
ASPECT
Este simplu s faci o pagin web, dar este important s faci o

pagin web bun. De ce afirm c este simplu s faci o pagin web?
Pentru c oricine are un editor HTML de tipul WYSIWYG (WhatYou See
Is What You Get) poate realiza o pagin web fr a fi nevoit s
neleag complexitatea unei pagini web privit ca un ntreg.
n acest capitol vom face o scurt trecere n revist a aspectelor
ce determin realizarea unei pagini web bune i a problemelor cu care
v-ai putea confrunta.
15.1. Diferene dintre un document web i unul tiprit
n contrast cu un document tiprit, un document web este ceva

complet diferit. n acest caz, designerul are prea puin control asupra
felului n care este afiat o pagin, ntruct acest lucru depinde n
mare msur de browserul web folosit. Dei frustrant, a face o pagin
web s fie afiat la fel n diferite browsere este un lucru extraordinar,
constituind o provocare pentru majoritatea webdesignerilor.
Cnd creeaz un site, un webdesigner trebuie s in cont de
urmtoarele:
Varietatea browserelor
Varietatea versiunilor pentru acelai tip de browser
Varietatea sistemelor de operare folosite
Varietatea adncimii culorii pe monitoarele vizitatorilor
Varietatea rezoluiilor alese de diveri utilizator
etc.
Cu un numr att de mare de variabile de care depinde afiarea
unei pagini web, nu este posibil ntotdeauna ca o pagin web s fie
afiat n mod identic pe dou calculatoare diferite. i, aa cum am
precizat i anterior, acest lucru constituie o adevarat provocare
pentru webdesigneri.
n orice caz, trebuie s inei cont ca un site nu este fcut pentru
voi sau pentru eful vostru. Numai pentru c exist o introducere
fcut n Flash pe un site nu nseamn c trebuie s avei i voi o
introducere similar.
Un site trebuie creat n funcie de public int cruia i se
adreseaz. Acetia pot fi clieni sau poteniali clieni. Un bun
webdesigner i privete rezultatul muncii prin ochii unui potenial
client.
De exemplu, dac concepei un site adresat persoanelor mai n
vrst, trebuie s avei grij s oferii site-ului un aspect simplu, uor
de urmrit, cu fonturi puin mai mari dect de obicei.
Trebuie s analizai cu regularitate statisticile referitoare la site
pentru a vedea ce browsere sunt folosite de majoritatea vizitatorilor,
ce sisteme de operare folosesc, dac folosesc platforma Javascript de
la Sun, sau dac au activate anumite controale ActiveX. Pentru a
obine astfel de informaii putei folosi fie scripturile proprii, fie nscriei
propriul site ntr-unul dintre site-urile de analiz existente pe Internet
(de exemplu www.trafic.ro sau www.statistics.ro).
15.2. Mrimea optim a unei paginii web i optimizarea ei
Optimizarea paginilor web este unul din aspectele cele

importante ale webdesignului. O pagin web optimizat se ncarc
mult mai repede pe calculatorul vizitatorului i astfel informaia ajunge
mult mai repede la int. Paginile care se ncarc greu, i aici facem
referire la paginile care se ncarc n mai mult de 10 secunde, sau care
au o introducere facut n Flash, pot duce la pierderea unei pri dintre
vizitatori, n special a celor care nu au suficient rbdare. Nimic nu-i
mpiedic s apese unul din butoanele Back sau Close Window. Cu
toate acestea, introducerile create n Flash ofer i avantaje prin faptul
c pot fi foarte atractive din punct de vedere vizual i ofer
posibilitatea folosirii unor meniu interactive.
Pentru a stabili mrimea optim a unei pagini web trebuie s
avei n vedere cei patru factori care influeneaz ncrcarea ntr-un
browser:
mrimea fiierului care conine codul HTML
limea de band a conexiunii vizitatorilor
viteza procesorului serverului care gzdueite pagina web
complexitatea paginii web
Din moment ce nu putei interveni asupra conexiunii vizitatorilor,
trebuie s v ocupai de ceilali factori. Astfel, ncercai s gzduii
pagina web un server foarte rapid, optimizai pagina web prin
curarea codului HTML de elementele redundante, de grafica
excesiv, de elementele multimedia care nu sunt strict necesare etc.
ceea ce va avea ca rezultat micorarea dimensiunii fiierului surs.
Dac este vorba despre un site care se adreseaz tuturor
categoriilor de utilizatori, atunci mrimea fiecrei pagini web nu
trebuie s depeasc 75 kb. Astfel, vei avea garania c fiecare
pagin se ncarc n doar cteva secunde.
La calcularea mrimii unei pagini web se iau n calcul nu numai
fiierul HTML, ci i toate elementele grafice i multimedia folosite,
inclusiv imaginile de fundal, inclusiv scripturile Javascript externe
(fiiere cu extensia .js), inclusiv foile de stil (fiiere cu extensia .css),
scripturi PHP etc.
15.3. Structura i aspectul unui site
Structura directoarelor trebuie s fie logic i s reflecte aspectul

propriului site.
Un site poate ncepe ca o simpl pagin web, se poate dezvolta
ntr-un set de cteva pagini, iar n timp, n funcie de ct de
important dorii s fie prezena voastr pe Internet, poate ajunge
chiar i la sute de pagini. Coordonarea unui numr mare de pagini
poate fi un lucru extrem de dificil mai ales dac nu se lucreaz ntr-un
mod coerent de la nceput.
Astfel, trebuie evitat amestecul tuturor fiierelor ntr-un singur
director, fiind necesar gruparea lor n funcie de caracteristicile
similare.
De exemplu, toate imaginile incluse ntr-un site trebuie grupate
ntr-un director separat, cum ar fi imagini. Acesta, la rndul su, se
poate mpri n subdirectoare cu denumiri sugestive: pictograme,
butoane sau fundaluri.
n mod similar pot fi separate i fiierele de alt tip, cum ar fi cele
Javascript, PHP sau ASP, care pot fi incluse n directoare cu nume
sugestive.
Denumirea dat unui director sau subdirector depinde numai de
voi i, chiar dac este consumatoare de timp, cu siguran va ajuta la
nelegerea structurii site-ului de ctre oricine va dori s-i aduc
modificri.
Referitor la aspect, trebuie inut cont de faptul c o pagin web

ncepe n colul din stnga sus i se poate ntinde orict spre dreapta
sau n jos. Acesta face s poat fi infinit de lat i de lung.
Este recomandabil ca o pagin s nu necesite derulare spre

dreapta, de aceea, nainte de a publica o pagin web pe Internet,
trebuie testat modul n care se comport n funcie de diferite rezoluii
ale monitorului.
Dintre acestea, cele mai uzuale sunt:
640 x 480 (valabil pentru sistemele foarte vechi)
800 x 600
1024 x 768
1280 x 1024
1600 x 1280
Altele (valabile pentru Mac i Web TV)
15.4. Combinarea culorilor
Alegerea combinaiei de culori potrivite este esenial pentru

orice site. Aceasta trebuie s reflecte, pe ct de mult posibil, coninutul
site-ului. O bun combinaie de culori poate deschide drumul spre
succes, n vreme ce una aleas n mod nefericit poate duce la eecul
unui site.
Asigurai-v c alegei ntr-un mod chibzuit combinaia de culori
care s se potriveasc temei site-ului. Aceste culori trebuie s fie
complementare culorilor folosite pentru logo-ul ales sau n contrast cu
acesta, tocmai pentru a-l evidenia.
Reinei c efectul unei singure colori se schimb, uneori chiar
dramatic, cnd este folosit n combinaie cu alte culori.
De exemplu, culoarea roie este evitat de obicei de site-urile
ce ofer informaii financiare, n vreme ce combinaiile de albastru i
gri au fost ntotdeauna o bun alegere pentru site-urile profesionale.
15.5. Tipurile de caractere folosite
Dac simii un impuls irezistibil s folosii un tip de caracter

(font) incredibil de aspectuos sau unul care reproduce scrisul de mn,
sfatul meu este s v reinei un astfel de impuls.
Una dintre multitudinea de variabile din webdesign o constituie i
disponibilitatea unor anumite fonturi pe computerele vizitatorilor.
De exemplu, dac folosii pentru afiarea textului un font ce se
gsete n computerul vostru, cum ar fi Palatino, dar acesta nu se
gsete i n computerul unui vizitator, browserul va nlocui fontul
respectiv cu altul implicit, cum ar fi Times New Roman sau Arial. Acest
lucru va avea drept consecin schimbarea drastic a aspectului paginii
afiate i toat strduina voastr pentru realizarea unui site atractiv
va rmne fr rezultat.
Pentru o maxim compatibilitate a tipurilor de caractere ntre
diveri utilizatori i diverse browsere, sunt recomandate trei familii de
fonturi:
Familia fonturilor fr piciorue (Sans-serif)
Arial, Verdana, Geneva, Helvetica, Sans-serif
Familia fonturilor cu piciorue (Serif)
Times, Times New Roman, Georgia, Serif
Familia fonturilor fr monospaiate (Monospace)
Courier, Courier New, Monospace
Evident, exist i metode de a folosi fonturi deosebite ntr-o

pagin web. Cea mai simpl dintre acestea este de a transforma textul
respectiv ntr-o imagine, folosind o serie de programe adecvate. Dar,
cum totul are un pre, acesta va contribui la creterea dimensiunii
paginii web i, implicit, la o ncrcare mai lent.
Am tot amintit de diversitatea browserelor existente. Nu v
oprete nimeni s descrcai o copie a fiecruia dintre ele, mai ales c
sunt gratuite, i s le instalai n propriul computer. Astfel vei putea
testa propriul site pe cteva dintre cele mai folosite browsere (Internet
Explore, Netscape Navigator, Mozilla Firefox, Opera).
Legat de Netscape Navigator v informez c este oficial mort,
ncepnd cu 1 martie 2008 nu se mai acord niciun fel de suport
pentru niciuna dintre versiuni i nu vor mai fi realizate alte versiuni noi
(sursa http://archive.netscape.com/).
CAP. 16. PUBLICAREA UNUI SITE
16.1. Alegerea gazdei
n cazul n care acest ghid i-a atins scopul i ai reuit s

deprindei cele mai importante noiuni legate de limbajul HTML,
nseamn c deja putei crea un site.
Dar asta nu e totul. Un site, pentru a-i atinge scopul pentru care
a fost creat, mai trebui s fie publicat.
Tot ce v mai rmne de fcut este s gsii un server gazd,
unul gratuit pentru nceput, unde s postai site-ul. Cel mai simplu
mod este s cutai pe Google site-urile care ofer gzduire gratuit.
Dintre acestea v recomandm www.dap.ro.
16.2. Crearea contului
Primul pas const n crearea unui cont.

Pentru c modul de creare a unui cont difer de la un site la
altul, pentru exemplificare vom folosi site-ul www.dap.ro care ofer
gzduire gratuit site-urilor necomerciale.
Am ales ca subdomeniu (nume utilizator): ghid-html
Dup efectuarea tuturor pailor de nregistrare i introducerea

datelor personale, vei primi un cod de activare la adresa de mail pe
care ai specificat-o.
16.3. Publicarea site-ului

Din acest moment, dup autentificare, vom avea acces la panoul
de administrare care, printre altele, ofer numeroase faciliti printre
care i crearea de conturi FTP ce v permit s ncrcai propriile fiiere
pe serverul dap.ro.
Not: Va trebui mai nti s v modificai parola primit prin

email cu una format din minim 6 caractere i s conin att cifre ct
i litere (minim cte una din fiecare grup).
Adresa va fi de genul : ftp.user.dap.ro

User : userftp@user.dap.ro
Parola : Parola pe care ai ales-o cnd v-ai fcut userul ftp-ului.
Este momentul s ncepei crearea paginilor (n cazul n care nu

ai creat deja o variant off-line a site-ului pe propriul PC). Este indicat
s avei dou copii ale documentului. O copie trebuie s fie pe serverul
gazdei iar a doua pe computerul personal, astfel nct problemele
cauzate de cderile de curent sau pierderea conexiunii la internet s
nu v afecteze munca.
n continuare, urmnd recomandrile din capitolul precedent, va
trebui s creai un director pe hard disk pentru a stoca documentele
HTML, imaginile, sunetele, precum i celelalte elemente pe care dorii
s le includei n paginile web.
Pagina principal trebuie denumit "index.html", majoritatea
serverelor fiind setate s recunoasc pagina principal dup aceast
denumire. n cazul n care "index.html" nu funcioneaz ca pagin
principal, contactai persoana care administreaz server-ul i
ntrebai-l ce denumire implicit are setat server-ul pentru a
recunoate pagina principal (de ex. index.htm, main.html etc.).
Cea mai bun experien n webdesign o vei cpta navignd pe
Internet. Putei salva o copie complet a site-urilor care v rein
atenia i le putei studia codul surs pentru a analiza (nu copia)
modul n care au fost fcute.
V doresc mult succes!
Anexa 1 Numele i codurile culorilor
Tabelul de mai jos cuprinde lista principalelor culori care sunt suportate de
majoritatea browserelor.
Dac dorii s validai coninutul unui document HTML sau CSS, atunci va trebui
s folosii una din cele 16 denumiri acceptate de W3C, i anume: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow. Pentru celelalte culori va trebui s specificai valoarea codului HEX sau RGB.
Numele culorii Codul culorii HEX

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #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
Pentru a vedea i culoarea corespondent, putei accesa pagina

http://ghid-html.dap.ro/teste/culori.html
Anexa 2 Caractere speciale i simboluri
Tabelele de mai jos cuprind o serie de caractere speciale i simboluri pentru

folosirea crora este necesar cunoaterea reprezentrii de tip alfabetic sau de tip
numeric.
Caractere ASCII
Rezultat Descriere Reprezentare alfabetica Reprezentare numerica
" quotation mark " "
' apostrophe ' (nu merge n IE) '
& ampersand & &
< less-than < <
> greater-than > >
Simboluri ISO 8859-1

non-breaking space
inverted exclamation mark ¡ ¡
cent ¢ ¢
pound £ £
currency ¤ ¤
yen ¥ ¥
broken vertical bar ¦ ¦
section § §
spacing diaeresis ¨ ¨
copyright © ©
feminine ordinal indicator ª ª
angle quotation mark (left) « «
negation ¬ ¬
soft hyphen
registered trademark ® ®
spacing macron ¯ ¯
degree ° °
plus-or-minus ± ±
superscript 2 ² ²
superscript 3 ³ ³
spacing acute ´ ´
micro µ µ
paragraph ¶ ¶
middle dot · ·
spacing cedilla ¸ ¸
superscript 1 ¹ ¹
masculine ordinal
º º
indicator
angle quotation mark
» »
(right)
fraction 1/4 ¼ ¼
fraction 1/2 ½ ½
fraction 3/4 ¾ ¾
inverted question mark ¿ ¿
multiplication × ×
division ÷ ÷
Caractere ISO 8859-1

capital a, grave accent À À
capital a, acute accent Á Á
capital a, circumflex
Â Â
accent
capital a, tilde Ã Ã
capital a, umlaut mark Ä Ä
capital a, ring Å Å
capital ae Æ Æ
capital c, cedilla Ç Ç
capital e, grave accent È È
capital e, acute accent É É
capital e, circumflex
Ê Ê
accent
capital e, umlaut mark Ë Ë
capital i, grave accent Ì Ì
capital i, acute accent Í Í
capital i, circumflex
Î Î
accent
capital i, umlaut mark Ï Ï
capital eth, Icelandic Ð Ð
capital n, tilde Ñ Ñ
capital o, grave accent Ò Ò
capital o, acute accent Ó Ó
capital o, circumflex
Ô Ô
accent
capital o, tilde Õ Õ
capital o, umlaut mark Ö Ö
capital o, slash Ø Ø
capital u, grave accent Ù Ù
capital u, acute accent Ú Ú
capital u, circumflex
Û Û
accent
capital u, umlaut mark Ü Ü
capital y, acute accent Ý Ý
capital THORN, Icelandic Þ Þ
small sharp s, German ß ß
small a, grave accent à à
small a, acute accent á á
small a, circumflex accent â â
small a, tilde ã ã
small a, umlaut mark ä ä
small a, ring å å
small ae æ æ
small c, cedilla ç ç
small e, grave accent è è
small e, acute accent é é
small e, circumflex accent ê ê
small e, umlaut mark ë ë
small i, grave accent ì ì
small i, acute accent í í
small i, circumflex accent î î
small i, umlaut mark ï ï
small eth, Icelandic ð ð
small n, tilde ñ ñ
small o, grave accent ò ò
small o, acute accent ó ó
small o, circumflex accent ô ô
small o, tilde õ õ
small o, umlaut mark ö ö
small o, slash ø ø
small u, grave accent ù ù
small u, acute accent ú ú
small u, circumflex accent û û
small u, umlaut mark ü ü
small y, acute accent ý ý
small thorn, Icelandic þ þ
small y, umlaut mark ÿ ÿ

HTML Pe Intelesul Tuturor

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Pe Intelesul Tuturor

Încărcat de

Drepturi de autor:

Formate disponibile

CAP. 1.

1.1. Ce nseamn HTML?

HTML este acronimul de la HyperText Markup Language i

1.2. Documentele HTML structur

Un document HTML este format dintr-o succesiune de blocuri de

De exemplu: <B>Acest text se va vedea ngroat ntr-un

Primul cuvnt sau caracter ce apare n interiorul acestor

De exemplu: </FONT> este un tag de nchidere

Cuvntul sau cuvintele ce urmeaz dup element i desprite de

De exemplu: <FONT COLOR=BLUE>Acest text va fi

Elementele HTML pot avea unul sau mai multe atribute:

De exemplu: <FONT COLOR=BLUE SIZE=+1>Acest

De remarcat c atributele nu apar i n tag-urile de nchidere.

1.3. Elemente de baz

Orice pagin web (document HTML) are n structur trei

Tag-ul <HTML> este primul tag care trebuie s apar ntr-un

Iat un model de structur a unui document HTML:

i iat cum arat un document HTML ce utilizeaz tag-urile din

CAP. 2. CREAREA I EDITAREA UNEI PAGINI WEB

2.1. Alegerea programului de editare

Exist o multitudine de programe pe care le putei folosi la

Pentru exemplificare, am ales culoarea albastr pentru tag-uri,

n Notepad++ codurile unui document HTML se vor vedea astfel:

Aa cum am menionat i n capitolul precedent, exist anumite

Prin urmare, n Notepad++ vei scrie urmtoarele:

n acest moment avei seciunile HEAD i BODY cuprinse ntre

Iat un exemplu de titlu:

<TITLE> Ghid de programare HTML </TITLE>

2.3. Stabilirea proprietilor documentului

ntregul coninut al documentului format din text, imagini, culori,

Atribut Valoare Descriere

Culorile sunt precizate folosind codurile RGB (red-green-blue) i

Denumire culoare Valoare RGB Cod hexazecimal

<BODY BGCOLOR=#000000 TEXT=#FFFF00

Rezultatul codurilor precedente va fi un document web cu fundal

Not: Codurile hexazexcimale vor fi precedate

2.4. Utilizarea imaginilor ca fundal

Elementul BODY permite, de asemenea, utilizarea unei imagini

Rezultatul va fi afiarea ca fundal a imaginii din fiierul

2.5. Aplicaie practic

n baza celor prezentate anterior, vom realiza un document web

<B>Pagina cu fundal color</B>

Din meniul File se alege opiunea Save, se stabiliete calea

Rezultatul afiat va fi urmtorul:

Dac nu avei un fiier de tip imagine (.gif sau .jpg) care se

Not: Fii ateni la calea utilizat la descrcarea fiierului!

Rezultatul afiat va fi urmtorul:

CAP. 3. FORMATAREA DOCUMENTULUI

3.1. Crearea titlurilor n pagin

Elementele constituite din titluri i subtitluri se regsesc n

Rezultatul afiat va fi urmtorul:

Atributele specifice acestui element sunt:

Atribut Valoare Descriere

3.2. Crearea paragrafelor

Paragrafele v permit s adugai text n documentul web ntr-o

Rezultatul afiat va fi urmtorul:

Atributele specifice acestui element sunt:

Atribut Valoare Descriere

3.3. Ruperea rndurilor

O modalitate de a mpri o zon de text pe rnduri este de a

Rezultatul afiat va fi urmtorul:

3.4. Despre paragrafe pre-formatate

Paragrafele pre-formatate sunt definite prin tag-ul <PRE>.

Rezultatul afiat va fi urmtorul: