Referat HTML

3.
Bazele limbajului HTML
Ce este limbajul HTML ?
HTML nu este un limbaj de programare.HTML s-a dezvoltat ca un subdomeniu al

SGML(Standard Generalized Markup Language) care este un limbaj de marcare mai avansat si a fost
mult timp favoritul DoD(Department of Defense).Problema schimbului de informatie intre doua sau mai
multe calculatoare este o problema extrem de complexa. Rezolvarea acestei probleme implica
existenta unor "reguli de comunicare" pe care calculatoarele sa le respecte. O comunicare reala intre
doua parti - fie ele calculatoare sau nu - se bazeaza pe faptul ca informatia oferita de una dintre parti
poate fi preluata si mai apoi inteleasa de catre cealalta.
Regulile dupa care doua calculatoare care ruleaza sub diferite sisteme de operare comunica
sunt stabilite de catre protocoale. Despre acestea am vorbit pe scurt in capitolul precedent. Dar in afara
acestor reguli mai apare nevoia existentei unui "limbaj" pe care ambele calculatoare sa-l inteleaga. In
WWW acesta este limbajul HTML.Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit
dintr-un set de marcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit
interpretor de HTML informatii despre modul de formatare a continutului unui document si despre
legaturile acestuia cu alte fisiere.
Elemente de marcare
Elementele de marcare sunt principalele componente ale limbajului HTML. Ele

apar in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare in
controlul de inceput (sub forma <nume-element>) si in cel de sfarsit (sub forma </nume-element>).
Exemplu:
<BODY> si </BODY>
Portiunea din document incadrata de controalele HTML se mai numeste continutul elementului marcat
si este partea de document asupra caruia actioneaza respectivul mod de formatare.Anumite elemente
nu necesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, in general pentru ca nu au un
continut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document care pot
sa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul documentului fiind implicita (Ex:
BODY).Limbajul HTML nu face distinctie intre literele mari si literele mici ale alfabetului. De aceea
formularile <BR>, <br> sau <Br> desemneaza acelasi control.
Atribute
Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor
perechi de nume si valori in interiorul etichetei de inceput, dupa numele elementului referit. Exemplu:
<H1 id = "Paragraful 1" color = "blue">
Prezenta ghilimelelor la valorile atributelor este optionala.
Fiecare control HTML are anumite atribute cu valori presetate care pot fi modificate de catre creatorul
documentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, in timpul
interactiunii cu utilizatorul, cu ajutorul scripturilor. Dar despre ele, mai tarziu...
Atributele ale caror valori sunt de tip boolean (adica adevarat sau fals) sunt setate in felul
urmator:
- absenta lor in eticheta de inceput a marcajului echivaleaza cu valoarea false presetata
- prezenta lor echivaleaza cu setarea valorii true
Exemplu:
Formularea
<option selected = "selected">
sau
<option selected>
marcheaza atribuirea valorii true atributului selected, atribut al elementului option.
Daca valoarea unui atribut nu este una valida ea va fi ignorata.
Referinte de entitati
1
Pentru a introduce in continutul documentelor HTML unele caractere care nu fac
parte din alfabetul limbii engleze, numite si caractere speciale, (cum ar fi è, ß sau ®) se folosesc
marcaje speciale numite referinte de entitati sau referinte de caracter. Spre deosebire de controalele de
marcaj despre care am vorbit in sectiunile anterioare, referintele de entitate nu sunt incadrate de
caracterele "<" si ">". Ele incep intotdeauna cu caracterul ampresand "&" urmat de un text in stransa
legatura cu caracterul pe care il reprezinta sau un cod numeric si se termina cu caracterul ";".De
asemenea, caracterele folosite in marcajele HTML (<, >, &) se pot insera in cadrul documentului numai
cu ajutorul referintelor de entitate.
Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta:

& sau &#32 = &
< sau &#60 = <
> sau &#62 = >
" sau &@34 = "
® = ®
Comentarii
Reprezinta texte care apar in fisierul sursa HTML, dar care nu vor fi afisate de catre browser
catre utilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui
fisier sursa cat mai clar si mai usor de inteles si corectat. Comentariile sunt incadrate de marcajele
"". E foarte important ca in interiorul comentariului sa nu existe secventa de caractere "--"
deoarece aceasta genereaza confuzie.
Exemplu:

Alinierea
Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat

pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile
acordate acestui atribut pot fi:
left - pentru alinierea la stanga
center - pentru pentru pozitionarea centrata
right - pentru alinierea la dreapta
Implicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat
contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in
interiorul controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz alinierea implicita este
la dreapta. Pentru a determina alinierea pe verticala a unui element in cadrul elementului container se
foloseste atributul valign cu urmatoarele valori posibile:
middle - pentru pozitionarea centrata
top - pentru alinierea la partea de sus a containerului
bottom - pentru alinierea la partea de jos a containerului
Culorile
Valorile atributelor referitoare la culorile textului, fondului sau ale altor

elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre
cele 16 culori "sigure", adica acele culori care vor fi recunoscute si afisate de majoritatea
calculatoarelor.Exprimarea numerica se realizeaza prin codul RGB ( adica RED-GREEN-BLUE ) al
culorii.Codul este alcatuit din 3 numere cuprinse intre 0 si 255 scrise in baza 16, fiecare exprimand
prezenta cantitativa a uneia dintre cele trei nuante care definesc codul culorii respective.
Exemplu:
2
<P style="color:#ff00cc">
Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure". Iata
un tabel cu numele si codul lor:
Aqua #00ffff Navy #000080
Black #000000 Olive #808000
Blue #0000ff Purple #800080
Fuchsia #ff00ff Red #ff0000
Gray #808080 Silver #c0c0c0
Green #00ff00 Teal #008080
Lime #008000 White #ffffff
Maroon #800000 Yellow #ffff00
Dimensiunile
Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei

moduri:
a.Dimensiunea absoluta este referita in pixeli. De exemplu o exprimare de forma "width =

300" denota ca un anumit element are latimea de 300 pixeli
b.Dimensiunea relativa (procentuala) este referita in procente. Astfel textul "width = 50%"
exprima faptul ca elementul referit va avea ca latime jumatate din latimea disponibila a elementului in
care este incadrat.
c.Dimensiunea proportionala (multidimensiunea) este folosita atunci cand doua sau mai multe
elemente impart un anumit numar de pixeli disponibili. Ea se exprima sub forma "i*", unde i este un
numar care arata cate "parti" din total sunt revendicate. De exemplu, pe un spatiu de 60 de pixeli
disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit.
Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli,
20 pixeli si, respectiv, 30 pixeli.
Valori data-ora
Formatul pentru scrierea acestor valori este :

YYYY-MM-DDThh:mm:ssTZD
unde
YYYY - reprezinta anul scris cu 4 cifre
MM - reprezinta luna (Ianuarie = 01, .., Decembrie = 11)
DD - reprezinta ziua din luna, cu valori de la 01 la 31
T - ramane caracter scris cu litera mare pentru a marca inceputul scrierii orei
hh - repreinta ora scrisa cu doua cifre, de la 00 la 23. Nu se admit formulari care contin AM sau PM.
mm - reprezinta minutele cu valori intre 00 si 59.
ss - reprezinta secundele cu valori intre 00 si 59.
TZD - reprezinta precizarea fusului orar si poate lua urmatoarele valori:
"Z" pentru Coordinated Universal Time (UTC)
+hh:mm pentru un fus orar in avans cu hh ore si mm minute fata de UTC.
-hh:mm pentru un fus orar in devans cu hh ore si mm minute fata de UTC.
Exemplu:
1994-11-05T08:15:30-05:00
Coduri de limbaje
Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a
carui valoare este codul de limbaj al tarii respective. Codul de limbaj este alcatuit din doua parti:
Cod principal - cu ajutorul caruia se identifica tara in care limbaujul este folosit
Subcod (optional) - specifica o versiune a limbajului respectiv
Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple:
en = limba engleza
3
en-US = limba engleza -varianta americana
fr = limba franceza
de = limba germana
it = limba italiana
es = limba spaniola
pt = limba portugheza
4.Structura unui document
Sectiunile unui document HTML
Un document HTML este impartit in trei sectiuni:
a.Sectiunea de informatii HTML

b.Sectiunea de antet a documentului
c.Corpul documentului
Controalele <HTML> si <HTML> incadreaza antetul si corpul documentului .Ele comunica

interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard.
Prezenta acestor etichete in document este optionala.Structura explicata a unui document
HTML:
<html>
<head>

<title>Structura Documentului HTML</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

Salut. Aceasta este o pagina Web cat se poate de simpla.
</body>
</html>
Sectiunea de informatii
Sectiunea de informatii HTML ofera informatii asupra versiunii limbajului HTML folosit.
Multe editoare de HTML insereaza automat textul necesar la inceputul documentului
Exemplu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Antetul documentului
Sectiunea de antet a documentului este incadrata de controalele <HEAD> si

</HEAD>. Prezenta celor doua controale in document este optionala, insa ea ajuta la o impartire mai
clara a documentului pe sectiuni.Antetul documentului cuprinde, in general, informatii precum titlul
documentului (pentru a fi afisat pa baza de sus a a ferestrei programului de navigare sau pentru ca
documentul sa poata fi mai usor identificat de catre utilizator), cuvinte-cheie care folosesc motoarelor
de cautare de documente, precum si alte informatii legate de documentul creat. Informatiile folosite in
aceasta sectiune nu sunt afisate de catre browser, ele avand doar rol informativ.
Astfel:
<TITLE> indica titlul documentului. Textul aflat aici va fi - de obicei- afisat pe bara de titlu al
programului de exporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele
4
specifice ale acestui program.
<META> si <LINK> ofera asa-numitele meta-informatii despre document declarand anumite
proprietati impreuna cu valorile acelor proprietati. Daca valoarea unei proprietati este definita intern se
va folosi controlul <META>, iar daca valoarea va fi luata dintr-o locatie oarecare din exterior se va folosi
controlul <LINK>. Succesul folosirii acestor doua controale depinde in mare masura de interpretorul de
HTML utilizat de catre utilizator.
De exemplu, cu ajutorul elementului META se pot preciza informatiile care vor fi trimise in
"header-ul" documentului, adica informatii specifice protocolului HTTP si pe care browserul le "citeste"
pentru a pregati afisarea documentului.Se folosesc formularile:
http-equiv= pentru numele informatiei meta

content= pentru continutul (valoarea) informatiei respective.
In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza:
-tipul documentului
-setul de caractere folosit
Tipul documentului pentru un document HTML este - "text/html".

Setul de caractere reprezinta o multime de caractere folosite in alfabetul diferitelor limbi,
caractere identificate printr-un numar de cod. De aceea, pentru ca browserul sa poata descifra corect
informatia pe care o primeste este recomandabil ca acest atribut sa fie specificat in antetul fiecarui
document.
Seturile de caractere sunt niste standarde stabilite de catre ISO (Organizatia Internationala
pentru Standardizare) si reprezinta reguli de codificare a caracterelor.
Printre cele mai folosite astfel de seturi aminitim:
-ISO 8859-1 -(sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii ale
alfabetului latinsi este cel mai des intalnit;
-ISO 8859-5 - alfabetul chirilic;
-ISO 8859-6 - alfabetul arab;
-ISO 646 - codificarea ASCII restransa (pe 7 biti, adica 128 de caractere)
Exemplu:

Pentru alte tipuri de informatii meta cuprinse in antet se va utiliza formularea
<META name="[nume proprietate]" content="[valoare proprietate]">
In acest mod se pot specifica informnatii privind autorul paginii respective, sau informatii in scopuri de
indexare a paginii de catre paianjeni sau motoare de cautare Web.
Exemplu:
<META name="author" content="Superman">

<META name="keywords" content="Sport, fotbal, FIFA">
Despre elementul LINK vom vorbi intr-unul din capitolele urmatoare.
Corpul documentului
Corpul documentului este locul unde se plaseaza continutul efectiv al documentului si este
incadrat de controalele <BODY> si </BODY>. Chiar daca marcarea corpului documentului cu cele doua
etichete este optionala, folosirea lor va determina o mai mare claritate in impartirea documentului pe
sectiuni.
Controlul <BODY> poate sa contina atribute referitoare la fondul si marginile documentului sau
culoarea textului.
Astfel:
5
background = "imagine.jpeg" seteaza imaginea de fond a documentului.
bgcolor = "#0000ff" seteaza culoare fondului documentului (Aqua).
In cazul in care ambele sunt prezente, browserul cauta fisierul mentionat ca imagine de fond.
Daca acesta exista, el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului,
culoarea de fond fiind vizibila numai daca fondul imagini este transparent. Daca nu, fondul
documentului va fi dat de culoarea setata de catre bgcolor.
text = "#ff0000" seteaza culoarea textului existent in document.
Pentru a seta dimensiunile marginilor din stanga si de sus ale documentului se folosesc
atributele:
Pentru Internet Explorer:
topmargin - pentru marginea de sus
leftmargin - pentru marginea din stanga
Pentru Netscape Navigator:
marginheight - pentru marginea de sus
marginwidth - pentru marginea din stanga
Pentru Internet Explorer exista posibilitatea de a atasa unui document un fond sonor. Aceasta
se poate realiza prin folosirea in antetul documentului a elementului BGSOUND. Doua dintre atributele
acestuia sunt foarte importante:
src - determina fisierul audio care va fi rulat de catre browser la incarcarea documentului in fereastra
loop - determina de cate ori va fi repetata secventa de sunet respectiva. O valoare egala cu -1
determina repetarea continua a sunetului
Exemplu:
Document cu imagine de fundal

<html>
<head>
<title>Document cu imagine si sunet de fundal</title>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1”>
<bgsound src=”muzica.mp3” loop=”-1”>
</head>
<body background=”pozamea.jpg” bgcolor=”#ff0000” text=”#800080”>
Acest document are o imagine in fundal
</body>
</html>
Exemplu:
Document cu setarea culorii fundalului si a dimensiunii marginilor

<html>
<head>
<title>Document cu culoare de fond</title>
</head>
<body bgcolor="#00FFFF" text="#000080" marginwidth=0 marginheight=0 leftmargin=0
topmargin=0>
Aceasta pagina are culoarea de fond "aqua". Textul va fi tiparit cu culoare albastra <br>
Marginile documentului au fost fixate la <b>"0"</b> prin setari care vor fi acceptate si de Internet
Explorer si de Netscape Navigator
</body>
</html>
In cazul in care in corpul documentului interpretorul HTML gasete o eticheta pe care nu o

recunoaste (o eticheta scrisa gresit, inexistenta sau o eticheta de sfarsit care nu are eticheta de inceput
corespunzatoare) el nu o va lua in considerare, tiparind doar eventualul continut marcat de eticheta
respectiva. Insa aceste etichete "scapate" in corpul documentului pot provoca diferente semnificative
6
intre forma dorita si cea obtinuta a continutului afectat!
5.Despre aspectul unui document
Generalitati
In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a
elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al
materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit.
Impartirea documentului in linii si paragrafe
Programele de explorare Web ignora caracterele Enter, taburile si spatiile

multiple. Astfel, aspectul documentului afisat utilizatorului nu coincide cu aspectul fisierului sursa.
Pentru a obtine asezarea dorita a componentelor documentului in fereastra programului de navigare, se
folosesc controalele de separare <BR> si <P> care determina desfasurarea continutului pe linii si
paragrafe. Astfel, pentru a marca trecerea la un nou paragraf folositi controlul <P>, iar pentru a marca
trecerea la o linie noua folositi controlul <BR>. Aceste doua controale nu necesita marcaj de inchidere
(terminare). Pentru a insera in document un numar oarecare de spatii libere se foloseste caracterul
special (NonBreakingSpace). Spatiile astfel inserate au proprietatea de a nu permite browserului
trecerea la linie noua.
Pentru a forta afisarea unei parti de text mai lunga pe o singura linie se mai pot folosi controalele
<NOBR> si </NOBR> cu rolul de a marca inceputul si sfarsitul sectiunii de text care va fi afisata pe o
singura linie. Nu toate browserele recunosc aceste controale, asa ca - daca se poate - evitati sa le
folositi!
Exemplu:
Folosirea paragrafelor a liniilor de text si a spatiilor libere
<html>
<head>
<title>Linii si paragrafe</title>
</head>
<body>
<p>
Paragraf1:
Acest text va fi afisat pe o singura linie.
<p>
Paragraf2:<br>
O linie de text<br>
Alta linie de text
<p>
<p>
<p>
<p>
<p>Paragraf3:<br>
..dupa 4 linii libere...
<p>
Paragraf4:<br>
Intre         cuvinte
       exista
suficient    spatiu
<p>Paragraf5:<br>
<nobr>bla-bla-bla-bla bla-bla bla bla bla-bla-bla bla-bla-bla-bla bla-bla bla-bla-bla-bla bla-bla-bla- bla-
bla- bla-bla- bla-bla- bla-bla-bla- bla pe o singura linie</nobr>
</body>
</html>
7
Antetele de sectiune
In cazul in care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni,

alegerea cea mai naturala este folosirea marcajelor de formatare a subtitlurilor.Titlurile si subtitlurile
sectiunilor documentului se vor marca folosind elementele de la H1 la H6, in ordine descrescatoare a
importantei, dimensiunea fontului folosit descrescand si ea. La afisare, programul de navigare va lasa
linii goale inainte si dupa fiecare marcaj pentru titlu si subtitlu.
Exemplu:
Antete de sectiune
<h1>Element H1</h1>
<H2>Element H2</H2>
<H3>Element H3</H3>
<h4>Element H4</h4>
<h5>Element H5</h5>
<H6>Element H6</H6>
Rigla orizontala
Pentru o mai vizibila impartire a corpului documentului se voloseste rigla orizontala marcata cu
controlul <HR>. Prezenta acestui control produce desenarea unei linii orizontale subtiri pe toata
latimea documentului.
Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size, care seteaza dimensiunile pe
orizontala si, respectiv, pe vericala a liniei in pagina. Pentru a elimina aspectul tridimensiunal al riglei se
poate utiliza optiunea noshade care elimina efectul de "umbrire" a riglei.
Exemplu:
rigle orizontale
<hr noshade>
<hr align="center" width="30%">
<p>
<p>
<p>
<hr align="left" width="50%" size="20" color="#0000FF"></p>
<hr align="right" width="50%" size="20" color="#0000FF" ></p>
Controlul <Address>
Acest control este folosit de obicei la sfarsitul documentului pentru a plasa informatii
utile utilizatorului pentru a contacta autorul paginii sau informatii de copyright.
Exemplu:
Folosirea elementului Address
<H1 align="center">Draga cititorule,</H1>

<p>Bla-bla-bla...
<p>Bla-bla-bla...
<p>Bla-bla-bla...
8
<p align="right">
Cu drag, <b>Seful</b>!</p>
<hr>
<address>
Pentru recalmatii contactati-ne la<br>
invizibilii@nicaieri.com </address>
Controalele <DIV> si <SPAN>
Controlul <DIV> este folosit in document pentru a grupa intr-un bloc "logic" o parte
din continutul documentului in vederea atribuirii unitare a caracteristicilor legate de stilul de
prezentare, sau pentru a identifica respectivul bloc de continut in vederea utilizarii lui de catre
scripturile prezente in document. Browserul va trece la line noua inainte si dupa terminarea acestui
marcaj.De asemenea acest controle se mai poate folosi alaturi de proprietatile de stil pentru pozitionare
pentru a creea in cadrul documentului "straturi" de dimensiuni variabile ce pot fi pozitionate in diferite
locatii ale documentului, suprapuse, ascunse sau expuse, in functie de necesitatile designer-ului.
Controlul <SPAN>are rolul de a "extrage" o portiune de document - de obicei inclusa intr-un
bloc marcat de controale HTML si care, eventual, are specificate un anumit numar de atribute - pentru a
o identifica sau apentru a-i oferi un format de afisare diferit de restul blocului din care face parte.
Exemplu:
identificarea blocurilor de text cu ajutorul elementelor Div si Span
<div style="font-size:14;color:blue;background
color:yellow">Elementul  Div</div>
<hr align="right" color="#0000ff"
width="50%">
<div style="color:red">
Certificatul de deces consemneaza la rubrica "Profesia" - fermier. Daca ar fi fost numai
atat, azi nu s-ar mai vorbi nimic de <span style = "color:navy">Elementul Span</span>.
Folosirea atributului style
Ultimele versiuni ale limbajului HTML au optat in mod categorig pentru despartirea
continutului unui document HTML de forma in care este el prezentat. Acest lucru este posibil prin
utilizarea foilor de stil, a stilurilor definite in antetele documentului, sau prin gruparea proprietatilor
legate de forma de prezentare in cadrul unui singur atribut: style.
Utilizarea acestuia in interiorul unui control HTML - aproape toate care se pot gasi in interiorul corpului
documentului, cu putine exceptii (<Script> sau <Basefont>) se face respectand urmatorul tipar de
scriere:
<element style ="proprietate:valoare ; proprietate:valoare;..."
unde :
-element este numele elementului folosit (ex: H1, Img,Table)
-proprietate este numele unei proprietati de stil. Aceste nume nu coincid in totalitate cu
numele proprietatilor marcajelor HTML. De exemplu proprietatea face a morcajului Font devine font-
family ca proprietate de stil. Cele mai utilizate proprietati de stil vor fi prezentate in lectia consacrata
modelelor de stil.
-valoare este valoarea acordata proprietatii respective. Ea trebuie sa corespunda valorilor
posibile ale acestei proprietati.
Creatorii de documente HTML sunt puternic incurajati sa foloseasca proprietatile de stil in
locul setarii individuale a fiecarii proprietati in cadrul marcajelor. Trebuie stiut, insa, ca versiunile mai
vechi ale programelor de explorare Web nu recunosc nici atributul style, nici marcajul STYLE si nici
referintele catre modelele de stil. De aceea, inainte de a folosi una sau alta dintre variante trebuie sa
faceti un calcul exact al avantajelor si dezavantajelor pe care fiecare le implica.
Informatii tool-tip
Cea mai simpla forma de interactiune a documentului cu utilizatorul o reprezinta
9
afisarea unor informatii foarte scurte despre elementele documentului atunci cand utilizatorul
pozitioneaza mouse-ul in spatiul ocupat de elementele respective.
Pentru a realiza acest lucru se foloseste proprietatea de stil title, valoarea ecestei proprietati fiind textul
informativ afisat in dreptul cursorului odata cu pozitionarea mouse-ului pe elementul care are setata
aceasta proprietate.
6.Stiluri de text
In documentele pe care la veti creea veti folosi diferite stiluri de text pentru a pune in
evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita (citate, nume, etc). Pentru
aceasta veti specifica explicit valori pentru unele din atributele ale unui font:
-corpul de litera
-culoare fontului
-stilul fontului
-dimensiunea fontului
Controale pentru stilul fontului
Cel mai usor mod de a marca un anumit stil corespunzator unui text in
documentul dumneavoastra este de a folosi controalele care modifica stilul fontului dupa cum urmeaza:
<B> se foloseste pentru scrierea cu caractere ingrosate (Bold).
<I> se folooseste pentru scrierea cu caractere inclinate (Italics).
<U> este folosit atunci cand se doreste ca un anumit pasaj din text sa fie subliniat.
<TT> indica folosirea fontului monospatiu, adica acea forma de scriere in care fiecare
caracter ocupa pe latime acelasi spatiu. Acest tip de font este asemanator cu cel utilizat se catre
masinile de scris.
<SUB> se foloseste pentru scrierea indicilor inferiori.
<SUP> se foloseste pentru scrierea indicilor superiori.
<STRIKE> este folosit pentru scriere unui text "taiat" cu o linie orizontala.
Este obligatorie prezenta etichetelor de sfarsit a controalelor mai sus mentionate pentru a
putea delimita portiunea de text asaupra careia se aplica stilul de font dorit.
Exemplu:
Utilizarea controalelor pentru stilul fontului
<b>aceste cuvinte sunt ingrosate</b><br>

<i>aceste cuvinte sunt inclinate</i><br>
<u>aceste cuvinte sunt subliniate</u><br>
etc….
Controlul <Font>
Acest control permite specificare atributelor care privesc tipul caracterelor,

dimensiunea si culoarea lor. El se aplica pentru a formata un bloc de text in vedrea afisarii lui cu
anumite caracteristici dorite de catre creatorul documentului. Atributele pe care le avem la indemana
sunt:
a. Face folosit pentru alegerea corpului de litera utilizat. Valoarea atribuita acestei proprietati
trebuie sa fie un nume de font valid. Este recomandabil sa folositi fonturile "clasice" pentru a va asigura
ca browserul va rcunoaste tipul de font specificat.
Exemplu:
<FONT Face="Arial">
Deoarece diferitele sisteme (Windows, Machintosh, etc) nu recunosc aceleasi fonturi, se pot
atribui proprietatii Face una sau mai multe valori separate prin virgula. Astfel sistemul va alege primul
font valid gasit in lista.
<FONT Face="Arial,Chicago">
b. Size folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7.
Valoare atribuita dimensiunii fontului poate fi de doua tipuri:
10
-absoluta : specifica dimensiunea exacta a fontului.
Exemplu:
<FONT Size = 5>
-relativa : specifica dimensiunea fontului fata de cea a fontului actual.
Exemplu:
<FONT Size = +1>
In exemplul de mai sus dimensiunea fontului este majorata cu o unitate.
In cazul in care valoarea specificata este mai mica decat 1 sau mai mare decat 7, interpretorul
HTML va va lua ca dimensiune valida pe 1, respectiv 7.
Valoarea imlicita a dimensiunii fontului este, de obicei, 3.
c. Color este atributul cu ajutorul caruia se poate stabili culoarea textului marcat. Valorile
acestei proprietati se pot scrie fie cu ajutorul codului hexazecimal al culorii, fie cu ajutorul numelui celor
16 culori de baza.
Exemplu:
<Font Color = red>
<Font Color = #ff0000>
Utilizarea culorilor in text nu trebuie sa genereze situatii ambigue. Astfel, un text afisat cu
culoare albastra va avea acelasi aspect cu cel al unei legaturi catre un alt fisier. De asemenea, folosirea
in exces culorilor poate da documentului un aspect neplacut si obositor
Exemplu:
Utilizarea atributelor fontului
<font face="Arial" size = 4>scris cu arial marimea 4</font>.
<font color="#ff0000"> red</font> <br><font face="Courier"
color="#008000">scris cu courier culoarea lime </font>,
Controlul <Basefont>
Daca dorim sa alegem un anumit tip de font, o anumita dimensiune sau culoare
a fontului care sa fie valabile pe intreg continutul documentului, se va utiliza marcajul BASEFONT.
Exemplu:
<body>
<basefont color=blue size=5>
...
</body>
Astfel textul continut in documentul de mai sus va fi afisat cu culoarea albastra si va avea
dimensiunea de 5 unitati. Exceptie fac doar tabelele si acele pasaje de text care au controale HTML de
formatare a textului care impun alte atribute de afisare.
Stiluri logice de formatare a textului
Exista cateva stiluri predefinite de punere in evidenta a unui text:
<Strong> pentru evidentiere puternica

<Em> pentru scriere cu caractere italice
<Cite> pentru inserare de citate
<Code> pentru listing de program
<Dfn> pentru definitie de cuvant
<Blockquote> pentru a pune in evidenta un bloc de text. Blocul de textul va fi indentat spre
dreapta fata de marginea stanga a elementului care il contine.
<Pre> folosit pentru afisarea textului "preformatat". Textul marcat de etichetele de inceput si
sfarsit ale acestui control va fi afisat de catre browser intr-o forma aproape identica cu aceea in care a
fost scris in sursa documentului HTML. Astfel, se vor respecta spatiile libere si trecerea la linie noua, dar
caracterele vor fi afisate cu font de tip monospatiu.
Mai trebuie sa amintim aici si posibilitatea de a marca modificarile aparute in versiunile
ulterioare ale documentului cu ajutorul controalelor <Ins> si <Del>. Dar despre ele nu putem spune ca
aplica un stil predefinit textului pe care il marcheaza, deoarece modalitatea in care acesta este afisat in
fereastra programului de explorare Web difera foarte mult de la program la program. De obicei aceste
11
marcaje contin atributul datetime pentru a informa despre data de la care sunt valabile modificarile pe
care aceste controale le notifica.
Exemplu:
folosirea stilurilor logice de formatare a textului
<strong>Folosirea elementului STRONG</strong><br>

<em>Folosirea elementului em</em><br>
<cite>Folosirea elementului CITE</cite><br>
<code>Folosirea elementului code
    public class Exemplu<br>
    {<br>
    public int i;<br>
    for (i = 0;i!=10;i++)<br>
      System.out.println("Rezultat = " +2*i);<br>
    }</code>
<pre>folosirea elementului pre,observati cum spatiile multiple nu mai sunt ignorate</pre>
7.Liste
De multe ori, in redactarea unor documente ajungem in punctul in care trebuie

sa enumeram un set de elemente care formeaza, din punct de vedere logic, o multime. Prezentarea
acestora trebuie realizata in asa fel incat relatiile dintre ele, sau dintre ele si eventualiele
"subelemente" sa fie cat mai clar exprimate din punct de vedere vizual. Pentru aceasta se folosesc
diferitele tipuri de liste.
Liste neordonate
Probabil cele mai intalnite liste in cadrul documentelor HTML sunt cele
neordonate. Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste elementul UL.
Fiecare lista contine un set de elemente numite "itemi", prezenta unui item in cadrul unei liste
marcandu-se cu ajutorul elementului LI.
Exemplu:
Prezentarea informatiei sub forma de lista neordonata
<ul>
<li>John Lennon</li>
<li>Paul Mccartney
<li>Ringo Star</li>
<li>George Harrison</li>
</ul>
<p>
<hr>
<b>Liste imbricate:</b>
<ul>
<li>element 1</li>
<ul>
<li>element 1.1</li>
<ul>
<li>element 1.2.1</li>
</ul>
</ul>
<li>element 2</li>
12
<li>element 3</li>
<ul>
</ul>
</ul>
<p>
<hr>
<b>Folosirea atributului <i>"type"</i>:</b>
<ul type="square">
<li>Ianuarie</li>
<li>Februarie</li>
<LI>Martie</LI>
</ul>
Fiecare element al listei este indentat fata de marginea din stanga (sau dreapta, daca directia
de scriere este de la drapta la stanga) listei; astfel, prezentarea ei devine foarte clara si atractiva. Mai
mult, ficare item al listei va avea un marcaj in fata sa, corespunzator nivelului de subordonare al listei.
Acest marcaj poate fi ales cu ajutorul atributului Type, iar valorile posibile sunt:
disc - pentru un cerculet plin
circle - pentru un cerculet gol
square - pentru un patratel plin
Implicit, prgramele de explorare Web folosesc tipul disc pentru primul nivel de subordonare (si,
respectiv, de indentare), circle pentru al doilea nivel si square pentru urmatoarele nivele. Eticheta de
sfarsit a unui element al listei(</li>) nu este obligatorie, elementul respectiv considerandu-se incheiat
in momentul aparitiei unei noi etichete <li> sau a etichetei care incheie lista. Elementul UL inlocuieste
elementele DIR si MENU din versiunile mai vechi ale limbajului HTML.
Liste ordonate
Listele ordonate se aseamana foarte mult cu cele neordonate, diferenta majora

constand in faptul ca listele ordonate atribuie ca marcaj fiecarui item un element (numar, litera) prin
care se evidentiaza ordinea sa in cadrul listei. Listele ordonate sunt marcate in interiorul documentului
cu ajutorul elementului OL.
Pentru a stabili care va fi marcajul de ordonare in lista al fiecarui item se foloseste atributul Type.
Valorile acestuia pot fi:
1 pentru cire arabe: 1,2,3,... (valoare implicita)
a pentru litere mici: a,b,c,...
A pentru litere mari: A,B,C,...
i pentru cifre romane tiparite cu litere mici: i,ii,iii,iv,...
I pentru cifre romane tiparite cu litere mari: I,II,III,IV,...
Exemplu:
Folosirea listelor ordonate
<h2>Lista ordonata implicita:</h2>

<ol>
<li>element 1</li>
<li>element 2</li>
<ol>
</ol>
<li>element 3</li>
<ol>
<li>element 3.1
<ol>
13
</ol>
</ol>
</ol>
<hr>
<p>
<h2>Folosirea atributului <b>"type":</b></h2>
<ol type="A">
<li>element 1</li>
<li>element 2</li>
<ol type = "i">
</ol>
<li>element 3</li>
<ol type="i">
<li>element 3.1
<ol type="a">
</ol>
</ol>
</ol>
<hr>
<P>
<h2>Folosirea atributului "value"</h2>
<ol>
<li value="10">Element 1</li>
<li value = "100">Element 2</li>
<ol type="i">
<li value="5">Element 2.1</li>
<li value = "10">Element 2.2</li>
</ol>
<li >Element 3</li>
</ol>
Se pot folosi si marcajele aplicate itemilor listelor neordonate, dar in felul acesta notiunea de
"lista ordonata" isi pierde sensul.
In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cu
o unitate la fiecare item adaugat. Pentru a modifica valoarea de start a numerotarii elementelor listei se
foloseste atributul Start asociat elementului OL. Astfel, formularea
<OL start = "2" >
are ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b", "ii",etc), celelalte
continuand in mod normal, prin adaugarea cate unei unitati. Pentru a forta marcarea unei alte valoari in
dreptul unui item se foloseste atributul Value asociat elementului LI. Valoarea acordata acestui atribut
va fi numarul (sau ordinea caracterului) scris in fata elementului respectiv.
Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenta
itemilor din listele subordonate, numerotarea facandu-se separat pe fiecare nivel de subordonare
Liste de definitii
Se pot folosi si marcajele aplicate itemilor listelor neordonate, dar in felul acesta
notiunea de "lista ordonata" isi pierde sensul.
In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cu
o unitate la fiecare item adaugat. Pentru a modifica valoarea de start a numerotarii elementelor listei se
foloseste atributul Start asociat elementului OL. Astfel, formularea
14
<OL start = "2" >
are ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b", "ii",etc), celelalte
continuand in mod normal, prin adaugarea cate unei unitati. Pentru a forta marcarea unei alte valoari in
dreptul unui item se foloseste atributul Value asociat elementului LI. Valoarea acordata acestui atribut
va fi numarul (sau ordinea caracterului) scris in fata elementului respectiv.
Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenta
itemilor din listele subordonate, numerotarea facandu-se separat pe fiecare nivel de subordonare
Exemplu:
Lista de definitii
<dl>
<dt><b>mar</b></dt>
<dd>fruct rosu</dd>
</dl>
8.Legaturi si referinte
Aspectele prezentate pana acum certifica faptul ca un document HTML prezinta

proprietati de formatare si structurare care sa permita prezentarea informatiei de tip text intr-o forma
cat mai logica si reusita din punct de vedere vizual-estetic.Insa caracteristica cea mai importanta a
documentelor HTML este aceea de a putea contine in interiorul lor legaturi catre alte documente (sau
programe) care se pot gasi pe acelasi calculator sau pe unul dintre calculatoarele din imensa retea a
Web-ului. Mai mult, exista posibilitatea ca un anumit element din continutul documentului sa contina o
legatura catre un alt element din cadrul aceluiasi document. Despre toate acestea in cele ce urmeaza.
Referinte externe
Sunt sigur ca ati intilnit situatii in care, intr-o carte, atunci cand autorul face
referire la un citat sa o informatie dintr-o alta carte sau un dintr-un alt document acesta insereaza intr-o
paranteza numele lucrarii referite, eventual pagina sau sectiunea referita. Daca informatia respectiva
prezinta interes pentru utilizator, acesta nu are decat sa caute in rafturile bibliotecii sale (in cazul cel
mai fericit) sau ale altor biblioteci, materialul amintit. Aceasta maniera fragmentata de a primi
informatia este singura posibila in cazul textelor obisnuite a caror expunere se realizeaza pe cele doua
dimensiuni ale suprafetei plane reprezentate de foaia de hartie.
Limbajul HTML rezolva aceasta problema prin introducerea notiunii de hipertext. Hiper-textul
difera de textul obisnuit prin introducere in interiorul documentului a unor elemente de legatura cu alte
documente existente in Web. Prin activarea acestor elemente cu ajutorul mouse-ului sau tastaturii se
realizeaza trecerea instantanee de la documentul initial (documentul sursa) la cel vizat (documentul
destinatie), fiind oricand posibila revenirea la documentul initial. Orice legatura are doua capete numite
ancore si un sens. Primul capat (elementul care refera) este ancora sursa, iar al doilea capat (elementul
referit) este ancora destinatie. Ancora sursa se numeste referinta si ea poate fi externa sau interna,
dupa cum ancora destinatie se gaseste in afara sau in interiorul documentului care contine referinta.
Prezenta unei referinte in interiorul documentului se marcheaza cu ajutorul perechii de controale HTML
<A> si </A>. Pentru ca marcajul de referinta sa fie functional, acesta trebuie sa contina atributul Href,
numit atribut de referinta hipertext. Valoarea acestuia este un URL care localizeaza documentul referit.
Exemplu:
<A href = "http://www.msn.com/">Legatura cu..</A>

Legaturile unui document nu sunt limitate la legaturi cu alte documente. El poate sa contina legaturi de
tip "mail" sau legaturi catre fisiere de tip "program" care vor fi executate atunci cand utilizatorul
activeaza referinta de legatura corespunzatoare.
URL-uri relative
Despre URL-uri am vorbit in introducerea acestei documentatii. Insa acum, inainte de a trece
la cateva exemple simple, e cazul sa vorbim despre URL-uri relative.Daca informatia pe care o puneti la
15
dispozitia utilizatorilor in Web este alcatuita din mai multe documente corelate, ea trebuie structurata
corespunzator intr-o formula de directoare si subdirectoare care sa va ofere o distribuire cat mai logica
a materialelor. Aceasta structura formeaza un "site".
Sa presupunem ca directorul radacina al site-ului se numeste "Radacina". El contine directoarele
"Produse" si "Informatii" si documentul "index.html". In interiorul directorului "Produse" se gasesc
documentele "Carti.html" si "Muzica.html", iar in directorul "Informatii" se gaseste documentul
"Preturi.html". Un URL relativ este URL-ul in care nu se trece decat calea de la fisierul curent la fisierul
destinatie. Calculatorul va completa automat calea catre documentul curent, construind astfel URL-ul
complet. In cazul trecerii catre directorul parinte se foloseste expresia "..". Exemplu:
Daca fisierul curent este "index.html", pentru a referii documentul "Carti.html" se foloseste expresia
"Produse/Carti.html".
Daca fisierul curent este "Carti.html", pentru a referi documentul "Muzica.html" de foloseste expresia
"Muzica.html"
Daca fisierul curent este "Carti.html", pentru a referi documentul "index.html" de foloseste expresia
"../index.html"
Daca fisierul curent este "Carti.html", pentru a referi documentul "Preturi.html" de foloseste expresia
"../Informatii/Preturi.html"Folosirea URL-urilor relative este foarte convenabila deoarece, atunci cand
site-ul este publicat, locatia sa pe server poate fi schimbata de catre administratorul calculatorului,
aceasta modificare afectand doar calea catre radacina site-ului, si nicidecum relatiile si legaturile din
interiorul site-ului. Exista posibilitatea de a fixa un URL de baza relativ la care sa se calculeze toate URL-
urile relative intr-un document. Acest lucru este posibil prin folosirea in sectiunea de antet a
documentului a controlului de marcaj <Base>, al carui atribut href fixeaza baza de formare a
documentului. De exemplu, daca in in documentul "Carti.html" se fixeaza
<Base href = "http://www.CalculatorulMeu.com/Radacina/index.html">
inseamna ca toate URL-urile relative se calculeaza fata de documentul "index.html", o referinta catre
documentul "Preturi.html" avind forma:
<A href = "Informatii/Preturi.html">Preturile</A> sunt urmatoarele...
Folosirea acestei optiuni trebuie facuta doar daca dumneavoastra controlati schimbarile
efectuate in amplasarea site-ului pe server. Altfel, documentele referite nu vor mai fi gasite, iar in
fereastra va fi afisata o pagina continand mesajul de eroare corespunzator.
In interiorul documentului, textul elementului referinta (interna sau externa) este scris de
obicei cu culoare albastra si subliniat. Pentru a alege culoarea de prezentare a referintelor intr-o pagina
se folosesc urmatoarele atribute ale elementului Body:
link - pentru culoare textului referintelor nevizitate
vlink - pentru culoarea textului referintelor care au fost deja vizitate
alink - pentru culoarea textului referintei in momentul in care aceasta care este activata.
In momentul in care activam o referinta catre un document HTML, acesta va fi afisat in
fereastra programului de explorare Web, in locul documentului initial.
Daca vrem sa controlam fereastra in care va fi afisat noul document putem sa folosim atributul target a
elementului ancora. Valorile posibile ale acestui atribut sunt:
_self - pentru a afisa documentul destinatie in fereastra documentului sursa (valoare implicita)
_blank - pentru a afisa documentul destinatie intr-o noua fereastra deschisa de programul de explorare
_parent - folosita la cadre de ferestre
_top - folosita, de asemenea, la cadre de frestre.
Referinte interne
Activarea unei referinte catre un documet face ca acel document sa fie afisat in
fereastra programului de explorare. Dar daca apare situatia in care din documentul referit ne
intereseaza un anumit element si vrem ca acesta sa fie afisat incepand cu prima linie a ferestrei? In
acest caz trebuie sa definim in acel document o ancora destinatie numit "tinta".
O tinta se marcheaza cu ajutorul elementului ancora (A) caruia i se atribuie un nume de identificare cu
ajutorul atributului Name sau Id.
Exemplu:
16
<A name = "intro"><H2>Introducere</H2></A>
Pentru a creea in acelasi document o referinta catre tinta definita mai sus nu ramane decat sa
scriem corect atributul de referinta hipertext.
Exemplu:
<A href = "#intro">Partea 1.Introducere </A>
Daca referinta este creata in alt document ea trebuie sa contina URL-ul documentului care
contine tinta si numele de identificare a tintei. Exemplu:
<A href = "www.Calculator.com/Documente/Document1.html#intro">Partea 1.Introducere </A>
Este foarte important ca numele de identificare a unei tinte sa fie unic in cadrul unui
document. In caz contrar destinatia referintei nu mai este valida.
Specificarea unei relatii intre documente
Elementul LINK este folosit in antetul documentului pentru a specifica o relatie

intre documentul curent si alte documente sau programe din Web. Elementul LINK nu are continut si nu
va fi afisat in interiorul documentului, dar el este folosit de catre programele de navigare Web in diverse
scopuri, depinzand de valoarea atributul rel, valoare ce defineste relatia cu documentul referit. Iata
cateva dintre valorile posibile ale acestui atribut:
a. Alternate defineste o alternativa la documentul curent si este folosita de obicei impreuna
cu atributul hreflang pentru a specifica limba in care este scris documentul.
Exemplu:
<HEAD>
<TITLE>The manual in English</TITLE>
<LINK title="Manualul in limba engleza"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://Calculator.com/manual/franceza.html">
b. Stylesheet defineste o legatura cu un document de tip "foaie de stil", despre care vom
vorbi mai tarziu
c.Start defineste primul document dintr-o colectie de documente
d. Next si Previous definesc care sunt urmatorul si, respectiv, precedentul document intr-o
ordonare liniara a colectiei de documente
c. Contents, Index, si Glosary definsesc documente de tipul "Cuprins" , "Index" si "Glosar".
Exemplu:
<HEAD>
<TITLE>Capitolul 4</TITLE>
<LINK rel="Contents" href="../toc.html">
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="Capitolul5.html">
<LINK rel="Prev" href="Capitolul3.html">
</HEAD>
Modul in care informatia oferita de elementul Link este folosita depinde foarte mult de
programul de navigare si motoarele de cautare in Web.
9.Utilizarea imaginilor
In lectia precedenta ati invatat cum sa folositi elementul esential al unui

document HTML: legatura cu alte documente sau programe. Insa va lipseste posibilitatea de a da
documentului un aspect cat mai atractiv pentru cei ce il viziteaza. Pentru a realiza acest lucru va trebui
17
sa "impodobiti" documentul cu imagini, fie ele statice sau dinamice. Trebuie stiut insa faptul ca
incarcarea imaginilor in document este o operatiune care costa timp - fara sa mai vorbim ca exista
programe de explorare Web care nu lucreaza cu imagini! - si de aceea va trebui sa faceti o alegere
echilibrata intre numarul si dimensiunea imaginilor -pe de o parte - si timpul de incarcare a
documentului - pe de-alta parte.
Inserarea unei imagini
Pentru a marca prezenta unei imagini in document se foloseste elementul IMG,

al carui atribut Src este URL-ul fisierului imagine. Tipurile de fisiere-imagine compatibile cu HTML sunt
GIF, JPEG si PNG.
Exemplu:
<IMG src = "Imagini/Peisaj.gif">
Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l
includa. Ar fi bine ca atunci cand inserati o imagine sa folositi si atributul Alt care specifica un text care
va fi afisat in locul imaginii in cazul in care browser-ul nu lucreaza decat in mod text sau in cazul in care
utilizatorul decide sa renunte la incarcarea imaginilor (optiune oferita de programele de navigare Web).
Daca imaginea este afisata, valoarea atributului Alt va fi folosita ca mesaj "tool-tip" .In cazul in care
doriti sa prezentati in cadrul documentului un anumit numar de imagini a caror dimensiune ar afecta
dramatic timpul de incarcare al documentului in fereastra programului de explorare se poate aplica
urmatoarea tehnica:
Se creeaza copii de dimensiuni mici ale acestor imagini. Aceste copii vor fi incarcate in
document si vor avea rolul unor legaturi catre fisierele ce contin imaginile in dimensiunea lor initiala.
Atunci cand utilizatorul va activa una dintre aceste legaturi in fereastra se va incarca fisierul imagine
dorit.
Pentru a aranja imaginea in raport cu textul din vecinatatea sa se foloseste atributul align.
Valorile posibile sunt:
-bottom pentru alinierea textului la baza inferioara a imaginii (valoare implicita)
-middle sau center pentru alinierea textului pe centrul imaginii
-top pentru alinerea textului la baza superioara a imaginii
-left pentru a plasa imaginea in extremitatea stanga a elementului container, iar blocul de text
eventual existent dupa marcajul imaginii respective ocupand spatiul liber din dreapta si de sub ea.
-right pentru a plasa imaginea in extremitatea dreapta a elementului container, iar blocul de
text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din stanga si de sub ea.
In cazul ultimelor doua valori poate aparea situatia in care un bloc de text trebuie "fortat sa coboare" pe
prima linie de sub imagine. In acest caz se foloseste atributul clear al elementului BR care apare
inaintea blocului de text pe care vrem sa il translatam. Valorile acestui atribut pot fi:
-left pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din stanga este
libera
-right pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din dreapta este
libera
-all pentru ca textul sa fie deplasat in jos pana in pozitia in care ambele margini sunt libere
Pentru a controla spatiul vertical sau orizontal din jurul imaginii inserate in document se
folosesc atributele vspace si hspace . Valorile atribuite desemneaza numarul de pixeli care vor distanta
imaginea de elementele adiacente ei in cadrul documentului Atributele width si height stabilesc
dimensiunile suprafetei din document care va fi ocupata de imagine. Precizarea acestor atribute
determina o mai rapida incarcare a documentului in fereastra programului de explorare, dar in cazul
precizarii unor dimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata
pentu a acoperii exact suprafata precizata. Folosirea atributului border determina afisarea unui chenar
care va incadra imaginea. Valoarea acestui atribut va reprezenta grosimea chenarului, o valoare egala
cu 0 (valoare implicita) determinand afisarea imaginii fara chenar.
Folosirea imaginilor ca elemente ancora
18
In documentele HTML se folosesc frecvent imaginile pe post de ancore, adica
legaturi catre alte documente sau programe. Acest lucru se poate realiza foarte usor prin plasarea
imaginii in interiorul unui element ancora (A).
Exemplu:
<a href = "pagina1.html"><img src = "imaginea1.gif" alt = "pagina1"></a>
Observati introducerea textului alternativ care devine obligatoriu in cazul in care imaginea nu
poate fi afisata de catre browser. In momentul incadrarii elementului imagine intre controalele <a> si
</a>, browserele adauga imaginii o bordura. Pentru a evita aparitia ei folositi atributul border cu o
valoare atribuita egala cu 0.
Folosirea clipurilor video
Internet Explorer permite inserarea foarte simpla a fisierelor de tip "imagine dinamica" (clipuri
video) in acelasi mod in care se insereaza o imagine statica. Astfel, pentru elementul IMG se folosesc
atributele:
dynsrc - pentru a determina URL-ul fisierului imagine
loop - pentru a determina de cate ori va fi rulat clipul respectiv. Valoare implicita este "1". O
valoare egala cu 0 sau -1 determina rularea continua a clipului
start - determina momentul de start al clipului. Acesta poate fi "fileopen" ( valoare implicita)
pentru pornirea clipului odata cu incarcarea paginii in browser, sau "mouseover" pentru pornirea lui
atunci cand cursorul mouse-ului este pozitionat deasupra sa.
Pentru a insera in document un clip video sau audio care sa poata fi redat si de alte browsere se poate
folosi elementul embed cu atributele:
src - pentru a preciza sursa fisierului audio sau video folosit
width si height - pentru a preciza dimensiunea ocupata de obiectul respectiv in document.
Reusita inserarii unui astfel de clip depinde ded extensia fisierului folosit si de versiunea
browserului. Pentru fisierele video e preferabil sa folositi extensiile "mpg" sau "mov" , iar pentru cele
audio formatul "mp3".
Exemplu:
folosirea a doua fisiere video
<img border="0" dynsrc="film.avi" loop="-1" start="fileopen" alt="acest videoclip poate fi vizualizat

doar daca folositi Internet Explorer">
<h1>Folosirea elementului <b>OBJECT</b></h1>
<object>
<embed src="film.mpg" width=200, height=200 >
</embed>
</object>
10.Tabele
In capitolul dedicat listelor am prezentat una dintre posibilitatile pe care le aveti de a

prezenta in interiorul documentului informatia structurata. Insa folosirea listelor este utila doar atunci
cand structura informatiei nu prezinta un grad mare de complexitate. De aceea apare necesitatea unui
instrument care sa poata rezolva aceasta problema. Insa, asa cum veti vedea in cadrul acestui capitol,
tabelele au si alte utilizari, jucand un rol foarte important printre instrumentele pe care le au la
indemana relizatorii paginilor Web.
Marcarea unui tabel
Un tabel este marcat in document de perechea de controale <TABLE> si

</TABLE>.
Pentru a specifica principalele proprietati ale tabelului se folosesc urmatoarele atribute:
19
width si height
Stabilesc dimensiunile tabelului si pot fi exprimate in mod absolut sau in mod relativ.
Dimensiunile pe care tabelul le va avea in cadrul documentului vor fi calculate de catre programul de
explorare Web tinand cont de optiunile specificate prin cele doua atribute, dar si de dimensiunile
elementelor din interiorul tabelului in asa fel incat acestea sa fie vizibile.
align
Determina pozitionarea pe orizontala a tabelului in cadrul documentului. Optiunile posibile au
fost prezentate in capitolul al II-lea
border
Stabileste grosimea in pixeli a chenarului care inconjoara tabelul. In cazul in care s-a ales
valoarea 0 tabelul nu va afisa nici chenar, nici linii de demarcare in interiorul sau.
frame
Stabileste care laturi ale chenarului care incadreaza tabelul vor fi vizibile. Optiunile posibile
sunt:
void - nici o latura
above - latura de sus
below - latura de jos
hsides - laturile de sus si de jos
vsides - laturile din stanga si din dreapta
lhs - latura din stanga
rhs - latura din dreapta
box - toate laturile
border - toate laturile
rules
Determina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. Optiunile
posibile sunt:
none - nici o linie
groups - liniile dintre grupurile definite ale tabelului. Cum de defineste un grup vom vedea putin mai
tarziu.
rows - liniile orizontale
cols - liniile vericale
all - toate liniile
cellspacing
Stabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre
marginile tabelului si celulele din apropiere.
cellpading
Stabileste spatiul dintre marginile unei celule si continutul acesteia.
bgcolor
Stabileste culoarea de fond a tabelului.
background
Stabileste imaginea de fond a tabelului.
Elementele care constitue un tabel sunt:
-eticheta de tabel ;
-antetul tabelului ;
-corpul tabelului ;
-subsolul tabelului ;
Corpul tabelului
Corpul tabelului este partea cea mai importanta, el continand informatia

propriu-zisa afisata in tabel. Se marcheaza cu ajutorul controalelor <TBODY> si </TBODY>. Pentru a
avea consistenta, acesta trebuie sa contina cel putin o linie din tabel. Marcarea corpului tabelului nu
este obligatorie, prezenta sa fiind implicita in cadrul tabelului in momentul marcarii primei linii a lui.O
linie in tabel se marcheaza cu ajutorul controalelor <TR> si </TR>. Ea contine una sau mai mule celule
marcate prin controalele <TD> si </TD>. Nu este obligatoriu ca toate liniile sa contina acelasi numar de
20
celule. Numarul de coloane ale unui tabel se considera a fi numarul maxim de celule a liniilor tabelului.
Pe o linie celulule sunt dispuse de la stanga la dreapta in ordinea in care au fost introduse in codul
sursa al documentului, exceptie facand cazul in care directia de scriere in tabel a fost stabilita de la
dreapta la stanga cu ajutorul atributului dir, caz in care dispunerea lor se va face de la dreapta la
stanga. Intr-un tabel pot exista mai multe corpuri de tabel, aceasta optiune putandu-se pune in practica
atunci cand se doreste gruparea liniilor unui tabel conform unor regului stabilite.
Exemplu:
Doua tabele simple
<p>
<table align="center" width="80%" cellspacing="2" cellpadding="2" border="1">
<tr>
<td><b>Nume</b></td>
<td><b>Prenume</b></td>
<td><b>Varsta</b></td>
<td><b>Telefon</b></td>
</tr>
<tr>
<td>Popescu</td>
<td>Ioana</td>
<td>27</td>
<td>176238</td>
</tr>
<tr>
<td>Munteanu</td>
<td>Cornel</td>
<td>42</td>
<td>220022</td>
</tr>
</table>
<p>
<hr>
<p>
<p>
<table cellspacing="10" cellpadding="10" border="0">
<tbody valign="top">
<tr>
<td >Internet</td>
<td>Reprezinta totalitatea calculatoarelor si a retelelor de calculatoare de pe tot cuprinsul globului,care
comunica intre ele prin intermediul protocolului TCP/IP. Se estimeaza ca, in prezent, mai mult de o suta
de milioane de oameni au, intr-un fel sau altul, acces la reteaua Internet si acest numar este in continua
crestere. </td>
</tr>
</tbody>
</table>
</p>
Corpul unui tabel poata sa contina atribute care determina formatarea elementelor pe care
acesta le contine:
Bgcolor: seteaza culoarea de fond a celulelor din interiorul sau. Acest atribut nu este
implementat in varianta 4.7 a lui Netscape Navigator.
Align: determina pozitionarea pe orizontala a continutului in cadrul unei celule
Valign: determina pozitionarea pe vericala a continutului unei celule. Optiunile posibile sunt:
top - alinierea se face la baza superioara a celulei.
middle - pozitionare centrata in celula.
bottom - alinierea se face la baza inferioara a celulei.
21
Elementul TR marcheaza prezenta unei linii de date intr-un tabel si reprezinta elementul
container al celulelor care contin informatia propriu-zisa a tabelului. Lui i se pot atasa, de asemenea,
atributele care se refera la culoarea de fond a celulelor pe care le contine sau la pozitionarea
elementelor in interiorul acestor celule.
Celulele unui tabel pot sa contina in interiorul lor text, imagini, ancore de legaturi, sau chiar
alte tabele. In afara proprietatilor mentionate la liniile tabelului, celulele au doua atribute foarte
importante care permit formatarea si structurarea informatiei in interiorul tabelului:
Colspan: determina numarul de coloane ocupate de celula. Valoarea implicita este "1".
Rowspan: determina numarul de linii ocupate de celula. Valoarea implicita este "1".
Atunci cand intr-un tabel se fac extinderi ale celulelor pe linii si coloane trebuie avut in vedere ca nu
cumva doua celule diferite sa pretinda spatiul unei aceleasi celule.
Width si height: recomanda programului de explorare web dimensiunile celulei. Nu uitati ca
dimensiunile afisate ale celulelor se fac atat in functie de optiunile exprimate prin atributele specifice,
cat si tinand seama de dimensiunile elementelor care constitue continutul acestor celule.
Eticheta de tabel
Eticheta de tabel este folosita pentru a afisa deasupra tabelului un text scurt care - de
obicei - informeaza despre datele continute in tabel. Ea se marcheaza cu ajutorul controalelor
<CAPTION> si </CAPTION>. Ecest element trebuie sa apara imediat dupa controlul de inceput care
marcheaza tabelul. Un tabel nu poate avea decat o singura eticheta.Cel mai important atribut al
etichetei de tabel este align. Acesta determina pozitionarea etichetei fata de tabel si are urmatoarele
valori posibile:
top - determina pozitionarea etichetei in centru, deasupra tabelului (valoare implicita)
bottom - determina pozitionarea etichetei sub tabel
left - determina pozitionarea etichetei deasupra tabelului, aliniata la stanga
right - determina pozitionarea etichetei deasupra tabelului, aliniata la dreapta
Antetul si subsolul tabelului
Antetul si subsolul tabelului sunt componente ale tabelului care contin in

general informatii despre datele prezentate, spre deosebire de corpul tabelului care contine
respectivele date. Antetul si subsolul sunt formate din una sau mai multe linii, linii care, la randul lor,
contin una sau mai multe celule.
Antetul este marcat de controalele <THEAD> si </THEAD>, iar subsolul
tabelului este marcat de controalele <TFOOT> si </TFOOT>. Aceste controale trebuie sa apara inaintea
controlului de inceput care marcheaza corpul tabelului.(In Netscape 4.7 subsoloul tabelului trebuie
pozitionat dupa corpul acelui tabel.)
In mod normal, THEAD, TBODY si TFOOT contin acelasi numar de coloane.
Antetul si subsolul unui tabel trebuie sa contina cel putin o linie de tabel marcata cu ajutorul
elementului TR. Celulele care intra in componenta antetului sau a subsolului tabelului se marcheaza de
obicei cu controalele <TH> si </TH>, dar este posibila si folosirea marcajelor pentru celulele folosite in
corpul tabelului, deoarece, in mare masura, cele doua elemente sunt echivalente.
Atributele cele mai importante ale antetului si subsolului tabelului sunt cele
legate de pozitionare, dimensionare sau fond si au fost prezentate in sectiunea dedicata corpului
tabelului.
Grupuri de coloane
Antetul corpul si subsolul tabelului reprezinta modalitati de a grupa pe

orizontala informatia prezentata intr-un tabel. Exista si posibilitatea de a grupa coloanele unui tabel prin
definirea unuia sau mai multor grupuri de coloane. Un grup de coloane se marcheaza prin controalele
<COLGROUP> si </COLGROUP> , marcajul de inchidere putand sa lipseasca. Pentru a specifica numarul
de coloane incluse in grup se pot folosi doua modalitati:
prin folosirea atributului span a carui valoare determina numarul de coloane continute de grup
22
prin specificarea explicita a coloanelor din grup cu ajutorul elementului COL. astfel, numarul de coloane
al grupului va fi egal cu nmarul de elemente COL care urmeaza unui element COLGROUP.
In cazul in care nici una dintre aceste doua optiuni nu este prezenta se considera ca grupul de coloane
contine o singura coloana.
Grupurile de coloane se introduc in document inaintea antetului sau a corpului
tabelului si ele pot contine atribute referitoare la pozitionarea continutului in interiorul celulelor sau la
dimensiunea coloanelor pe care acestea le contin. Astfel, atributul width recomanda latimea pe care ar
trebui sa o aiba toate coloanele grupului. Valoarea "0*" determina alocarea fiecarei coloane a grupului a
unui spatiu minim pe orizontala astfel incat continutul celulelor sa fie vizibil.
De asemenea, in cazul in care grupul de coloane se construieste prin
specificarea separata a elementului COL pentru fiecare coloana acest element poate sa contina
atributele referitoare la dimensionarea fiecarei coloane in parte sau la pozitionarea continutului in
interiorul celulelor. Trebuie stiut ca, in mod implicit, programul de explorare calculeaza dimensiunile
coloanelor la valori minime necesare pentru ca elementele din interiorul celulelor sa fie vizibile.
11.Pagina de cadre si cadre in pagina
In lectia dedicata referintelor si legaturilor am vazut ca atunci cand se activeaza

o ancora de legatura cu un alt document, acesta din urma (documentul destinatie) este incarcat de
catre programul de explorare Web in fereastra documentului sursa sau intr-o fereastra noua. Ambele
optiuni prezinta neajunsul de a nu putea avea ambele documente deschise simultan in aceeasi
fereastra pentru a putea avea acces cu usurinta la fiecare dintre ele.
Elementele introduse in aceasta lectie rezolva in mod foarte elegant aceasta problema.
Pagina de cadre
O pagina de cadre este un document HTML care va permite sa vizualizati in

ceeasi fereastra mai multe documente, fiecare asezat in propriul cadru, cadru care este de fapt o
fereastra de sine-statatoare si care permite derularea documentului sau incarcarea unui alt document.
Intr-o pagina de cadre lipseste elementul BODY, continutul paginii fiind marcat cu ajutorul controalelor
<FRAMESET> si </FRAMESET>.
Ficare cadru din interiorul documentului este marcat cu ajutorul controalelor <FRAME> si </FRAME>.
Pozitionarea si dimensionarea cadrelor
Pentru a da informatii despre asezarea si dimensiunea cadrelor continute se

folosesc urmatoarele atribute ale elementului FRAMESET:
-rows determina spatiul pe verticala pus la dispozitia fiecarui cadru si are forma
unei liste de valori absolute, relative sau proportionale ale inaltimii fiecarui cadru. Caracterul "*" in
cadrul listei acorda cadrului corespunzator spatiul liber ramas.
De exemplu, formularea <FRAMESET rows = "60%,*"> determina impartirea documentului pe vericala
in doua cadre, primul avind inaltimea de 60% din spatiul vertical disponibil in fereastra, iar al doilea de
40% din acelasi spatiu.
-cols determina spatiul pe orizontala pus la dispozitia fiecarui cadru si are forma
unei liste de valori absolute, relative sau proportionale ale latimii fiecarui cadru.
Numarul valorilor separate de virgula trebuie sa fie acelasi cu numarul cadrelor care impart pe verticala
sau pe orizontala documentul. In cazul in care se specifica valori pentru ambele atribute documentul va
fi impartit atat pe orizontala cat si pe verticala, ordinea in care vor fi asezate cadrele in pagina fiind
determinata de ordinea atributelor rows si cols si de ordinea elementelor FRAME in cadrul elementului
FRAMESET.
Exemplu:
Cadre pe orizontala


<frameset rows="100%,* "cols="30%,*">
<frame name="Stanga" src="IndexStanga.html" marginwidth="10" marginheight="10"
23
scrolling="auto" frameborder="1">
<frame name="Dreapta" src="Pagina3.html" marginwidth="10" marginheight="10" scrolling="auto"
frameborder="1">
</frameset>
<noframes>
Acesta este un document de cadre. Din pacate...
</noframes>
Exemplu:
Cadre pe verticala

<frameset rows="10%,*">
<frame name="Sus" src="IndexSus.html" marginwidth="0" scrolling="auto" frameborder="0">
<frame name="Jos" src="Pagina3.html" marginwidth="0" scrolling="auto" frameborder="0">
</frameset>
<noframes>
Aceasta este o pagina de cadre. Din pacate...
</noframes>
Exemplu:
Cadre pe orizontala si verticala

<frameset rows="50%,*" cols="50%,*">
<frame name="a1" src="IndexSusStanga.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="1">
<frame name="a2" src="Blank.html" marginwidth="10" marginheight="10" scrolling="auto"
frameborder="0">
<frame name="b1" src="Blank.html" marginwidth="10" marginheight="10" scrolling="auto"
frameborder="0">
<frame name="b2" src="Blank.html" marginwidth="10" marginheight="10" scrolling="auto"
frameborder="0">
</frameset>
<noframes> Aceasta este o pagina de cadre. Din pacate...
</noframes>
Exemplu:
Pagina cu cadre imbricate
<frameset rows="64,*">
<frame src="Titlu.html" name="banner" id="banner" scrolling="No" noresize>
<frameset cols="150,*">
<frame src="IndexStangaImbri.html" name="contents" id="contents" scrolling="Auto">
<frame name="main" src="Blank.html">
</frameset>
</frameset>
<noframes>
Acest document contine cadre, dar....
</noframes>
Elementul cadru
Pentru a marca un cadru intr-o pagina de cadre se folosesc controalele

<FRAME> si </FRAME>. Atributele care specifica modul de afisare a unui cadru sunt:
-name : identifica un cadru pentru a putea fi folosit ca valoare a atributului
target a unei ancore sursa. Exista si posibilitatea de a predefini tintele referintelor la nivel de document
cu ajutorul aceluiasi atribut aplicat elementului BASE. Astfel, o formulare de genul: <BASE target =
"cadruA"> face ca toate ancorele prezente in documentul respectiv sa aiba ca tinta cadrul "cadruA", cu
exceptia celor care specifica ele insele o alta tinta. Pentru a afisa un document in fereastra mare,
nedivizata in cadre, folositi valorile "_parent" sau _top pentru atributul target al elementului ancora.
-src : specifica URL-ul documentului care va fi afisat in cadru la incarcarea
paginii de cadre in fereastra.
24
-noresize : reprezinta un atribut e tip boolean care, prin prezenta sa, impune
imposibilitatea de a redimensiona cadrul.
-scrolling : determina afisarea sau nefisarea barelor de defilare pe mariginea
cadrului. Urmatoarele optiuni sunt posibile:
auto : determina aparitia barelor de defilare doar in momentul in care o parte
din document nu este vizibila in cadru (optiune implicita)
yes : determina afisarea cadrului cu bare de defilare, indiferent de dimensiune
documentului continut
no : determina afisarea cadrului fara bare de defilare, indiferent de dimensiune
documentului continut
-frameborder : determina afisrea sau neafisarea unei borduri de demarcare

intre cadre adiacente. Optiunile posibile sunt:
1 : determina afisarea bordurii (valoare implicita).
0 : determina neafisarea bordurii.
-marginwidth si marginheight : stabilesc spatiul pe orizontala si, respectiv,
pe verticala lasat liber intre marginile cadrului si continutul sau.
Cadre in interiorul unui document obisnuit
Exista si posibilitatea de a afisa in interiorul unei pagini HTML uzuale o fereastra care
sa contina un alt document. Acest lucru se realizeaza prin folosirea elementului numit "fereastra
interna" si marcat cu ajutorul controalelor <IFRAME> si </IFRAME>.In afara atributelor prezentate in
paragraful precedent, elementul IFRAME mai dispune de cateva specifice:
-width si height : determina dimensiunile pe orizontala si verticala ale ferestrei.
-align : determina pozitionarea ferestrei in document in raport cu elementele
adiacente . Valorile si modul de pozitionare sunt analoage celor descrise la alinierea
imaginilor.
Ferestrele interne nu pot fi redimensionate si de aceea ele nu poseda atributul
noresize. O alta modalitate de a insera un document HTML sau un alt tip de document, o imagine sau
un applet intr-o pagina Web este folosirea elementului OBJECT.
Atributul data reprezinta URL-ul fisierului de incarcat in cazul documentelor sau
al imaginilor, iar width si height determina dimensiunile alocate obiectului in pagina.
12.Formularele HTML
Sunt sigur ca ati intalnit in Web pagini in care nu vi se ofera ci vi se cere

informatie. Pagini in care ati fost rugati politicos sa va introduceti numele, varsta, adresa sau o parola.
Toate aceste date erau "colectionate" de catre un calculator numit "server" si mai apoi procesate,
utilizatorul primind ca raspuns - in general - o pagina de confirmare sau una care semnaleaza prezenta
erorilor in receptionarea acestor date sau erori legate de valorile introduse de utilizator. Deoarece
folosirea acestui tip de comunicare necesita publicarea documentelor pe un server Web si folosirea
unor tipuri de programe care depasesc scopul acestei documentatii, exemplele prezentate nu sunt
functionale. Ele se pot folosi doar pentru studierea documentului sursa si pentru a avea o imagine
generala asupra folosirii formularelor.
Formulare HTML
Formularele reprezint un "container" in interiorul caruia se gasesc elemente

numite controale, elemente cu ajutorul caruia utilizatorul specifica informatia care urmeaza a fi trimisa
serverulului. Formularele sunt marcate cu ajutorul controalelor <FORM> si </FORM>. Ele prezinta doua
atribute esentiale pentru comunicarea cu serverul:
-action : reprezinta un URL al unui fisier ce urmeaza a procesa informatia
trimisa de utilizator. Acesta poate fi un program de tip CGI (programe care creeaza dinamic pagini
HTML) sau asa numitele programe de script pe server cum sunt fisierele de tip asp sau jsp.
-method : reprezinta metoda HTTP prin care se realizeaza trimiterea datelor
catre programele de procesare. Valorile aproape unanim folosite sunt "get" si "post". Trebuie stiut ca
25
datele introduse in formular sunt "expediate" ca perechi de forma nume=valoare, numarul perechilor
fiind egal cu numarul datelor din formular trimise spre procesare.
Diferenta intre cele doua metode este urmatoarea : metoda get adauga aceste
perechi la sfarsitul URL-ului de destinatie, despartite de acesta prin caracterul "?", pe cand metoda post
lasa URL-ul de destinatie intact, informatia trimisa fiind inglobata in asa numitul "corp al formularului".
Aceste amanunte sunt necesare celor care scriu programele ce urmeaza a primi
datele utilizatorului pentru a sti in ce mod sa extraga din "pachetul" receptionat aceste date.
Alte atribute folosite sunt:

-enctype : specifica metoda de compactare utilizata pentru informatiiile
continute in corpul formularului (daca metoda aleasa e "post"). Valoarea implicita e "application/x-www-
form-urlencoded". In cazul in care informatia trimisa este de tipul "file" valoarea acestui atribut ar trebui
sa fie "multipart/form-data".
-name sau id : identifica formularul in vederea folosirii lui in scripturi. Este de
preferat folosirea celei de-a doua variante, ea prezentand avatajul posibilitatii folosirii formularului in
eventualele scripturi prezente in document.
target, title, style, lang si dir : aceste atribute au fost prezentate mai sus.
Controalele unui formular
Exista mai multe tipuri de controale cu ajutorul carora utilizatorul introduce date
sau alege variante ale unor valori oferite. Iata lista controalelor pe care le puteti folosi in interiorul unui
formular:
a. Butoane
Exista trei tipuri de butoane care pot aparea intr-un formular:
SUBMIT (buton de transmitere) - este butonul a carui activare declansaza
operatiunea de trimitere a datelor catre server
RESET (buton de resetare) - este butonul a carui activare readuce controalele din
formular la valorile lor initiale
BUTTON (buton fara actiune predefinita) - este butonul folosit de catre designer pentru a declansa
operatiuni controlate de catre acesta, de obicei cu ajutorul scripturilor
b. Imagini
Imaginile folosite pe post de controale in formular sunt folosite ca alternativa
mai atragatoare din punct de vedere estetic pentru butonul de tip "SUBMIT".
Campuri de introducere a textului :
Exista trei tipuri de casete de introducere a textului:
TEXT - este caseta care permite introducerea textului pe o singura linie
PASSWORD - este similara controlului TEXT, diferente constand in faptul ca datele
introduse de utilizator vor fi afisate printr-un caracter "masca" (ex: "*") pentru a oferi un anumit grad de
confidentialitate. Este folosit de obicei la introducerea unor parole
TEXTAREA - este caseta de introducere a textului pe linii multiple
Casute de validare
Sunt controalele prin care se confirma sau se infirma o optiune prezentata utilizatorului
Butoane radio
Sunt asemanatoare casutelor de validare, insa sunt grupate in mod logic cu ajutorul
numelui. Toate butoanele radio avand acelasi nume apartin unui aceluiasi grup, iar intr-un asemenea
grup doar un singur buton poate fi selectat la un moment dat.
Meniuri derulante
Reprezinta liste de valori din care utilizatorul poate selecta una sau mai multe valori, in
functie de tipul meniului
Selectoare de fisiere
Sunt controalele care dau posibilitatea utilizatorului sa selecteze un fisier care urmeaza
a fi trimis serverului
Controale ascunse
Reprezinta posibilitatea de a transmite serverului date utile, fara ca utilizatorul sa le
vada pe ecran
26
Elementul INPUT
Cea mai mare parte a controalelor unui formular se poate marca cu ajutorul
unui singur element de marcare HTML: INPUT. De aceea numarul atributelor acestui element este destul
de mare, iar semnificatia lor poate sa varieze de la un control la altul.
Iata cateva dintre ele:

-type : specifica tipul controlului folosit. Valorile posibile sunt:
text
password
checkbox
radio
submit
reset
button
image
hidden
file
-name : specifica numele controlului respectiv. Numele controlului va fi trimis

impreuna cu valoarea introdusa de utilizator catre programul de procesare a datelor de pe server. In
cazul butoanelor radio, fiecare buton al unui grup trebuie sa aiba aceeasi valoare pentru acest atribut.
-value : specifica valoarea initiala a controlului respectiv. Acest atribut este
optional, exceptie facand butoanele radio si casutele de validare pentru care setarea acestui atribut
este obligatorie. In cazul butoanelor ea reprezinta eticheta butonului respectiv.
Valoarea finala a controalelor este valoarea pe care acestea o au in momentul
in care s-a actionat butonul de tip "SUBMIT". Transmisia valorilor catre programul de procesare de pe
server se face conform urmatoarelor reguli:
-campurile de editare de text transmit ca valoare textul continut ;
-butoanele radio si casutele de validare transmit doar valorile controalelor selectate ;
-selectorul de fisiere transmite ca valoare continutul fisierului codificat conform metodei de compactare
specificate de atributul enctypes
-controalele dezactivate nu transmit valori ;
-size : determina numarul de caractere ocupat ca dimensiune pe orizontala de
casetele de introducere a textului. In cazul in care utilizatorul introduce un numar mai mare de
caractere are loc o delpasare a textului spre stanga, oferindu-se vizibilitate pozitiei curente a cursorului.
-maxlength : determina numarul maxim de caractere pe care utilizatorul le
poate introduce intr-o casuta de text.
-checked :determina selectarea implicita a unui control de tip buton radio sau
casuta de validare.
-src : este folosit pentru a localiza fisierul sursa a unei imagini atunci cand
controlul este de tip "image".
-tabindex : determina numarul de ordine al unui control in parcurgerea
controalelor formularului cu ajutorul tastei "tab".
-disabled : atribut de tip "marcaj" a carui aparitie duce la aparitia dezactivata a
controlului in formular, deci utilizatorul nu va avea posibilitatea interactiunii cu controlul respectiv.
-accept : specifica tipul de fisiere acceptate pentru incarcare de catre un
control input de tip file. Valorea acestui atribut este o lista de tipuri MIME separate prin
virgula(Ex:"image/jpg, text/plain"). Mai trebuie specificat faptul ca pentru a utiliza un contrrol de tip file,
formularul container trebuie sa aiba valoarea proprietatii enctype egala cu "multipart/form-date", iar
metoda formularului trebuie sa fie post.
id
class
style
title
Aceste atribute au fost analizate precedent
27
Exemplu:
Folosirea elementului INPUT in formulare
<h1>Formular de inregistrare:</h1>
<form action="script.exe" name="Formular1" id="Formular1" enctype="application/x-www-form-
urlencoded" >
<table cellspacing="2" cellpadding="2" border="0" bgcolor="#8678AB">
<colgroup align="right">
<tr>
<td width = 100>Nume</td>
<td width = 200><input type="text" name="TextNume" size="20"></td>
</tr>
<tr>
<td>Parola</td>
<td><input type="password" name="TextParola" size="10"
maxlength="20"></td>
</tr>
<tr>
<td>Sex:</td>
<td><input type="radio" name="OptionSex" value="fem">Feminin</td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="OptionSex" value="masc">Masculin</td>
</tr>
<tr>
<td>Pensionar</td>
<td><input type="checkbox" name="CheckPensi" value="pensionar"></td>
</tr>
<tr>
<td align = "center"><input type="submit" name="SubButon" value="Terminat"
></td>
<td align = "center"><input type="reset" value="Sterge"></td>
</tr>
</table>
</form>
Elementul BUTTON
Elementul BUTTON este folosit pentru a introduce in formular un buton care

ofera posibilitati de a fi afisat intr-o maniera ceva mai pretentioasa. Si asta deoarece, spre deosebire de
elementul INPUT, acesta are un continut care poate sa cuprinda text sau imagine. E bine ca imaginile sa
fie insotite de un text alternativ pentru ca afisarea butoanelor in fereastra programului de explorare
Web sa poat fi concludenta si in cazul in care imaginile nu vor fi afisate. Marcarea acestui element
necesita atat eticheta de inceput cat si eticheta de sfarsit a controlului corespunzator.
Exemplu:
Folosirea elementului BUTTON
<form action="program2.exe" name="form2" id="form2">

<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Introduceti numele cautat</td>
<td><input type="Text" size= "40"></td>
<td><button name="Cauta" value="cauta" type="submit">Cauta</button></td>
</tr>
28
</table>
</form>
29

Referat HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Referat HTML

Uploaded by

Copyright:

Available Formats

3.

Bazele limbajului HTML

Ce este limbajul HTML ?

HTML nu este un limbaj de programare.HTML s-a dezvoltat ca un subdomeniu al

Elementele de marcare sunt principalele componente ale limbajului HTML. Ele

Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta:

<!-- Acesta este un comentariu

Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat

Valorile atributelor referitoare la culorile textului, fondului sau ale altor

Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei

a.Dimensiunea absoluta este referita in pixeli. De exemplu o exprimare de forma "width =

Formatul pentru scrierea acestor valori este :

4.Structura unui document

Sectiunile unui document HTML

Un document HTML este impartit in trei sectiuni:

a.Sectiunea de informatii HTML

Controalele <HTML> si <HTML> incadreaza antetul si corpul documentului .Ele comunica

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Sectiunea de antet a documentului este incadrata de controalele <HEAD> si

http-equiv= pentru numele informatiei meta

In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza:

Tipul documentului pentru un document HTML este - "text/html".

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<META name="author" content="Superman">

Despre elementul LINK vom vorbi intr-unul din capitolele urmatoare.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In cazul in care in corpul documentului interpretorul HTML gasete o eticheta pe care nu o

5.Despre aspectul unui document

Impartirea documentului in linii si paragrafe

Programele de explorare Web ignora caracterele Enter, taburile si spatiile

In cazul in care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni,

<H1 align="center">Draga cititorule,</H1>

Controalele <DIV> si <SPAN>

Folosirea atributului style

Controale pentru stilul fontului

<b>aceste cuvinte sunt ingrosate</b><br>

Acest control permite specificare atributelor care privesc tipul caracterelor,

Stiluri logice de formatare a textului

Exista cateva stiluri predefinite de punere in evidenta a unui text:

<Strong> pentru evidentiere puternica

<strong>Folosirea elementului STRONG</strong><br>

De multe ori, in redactarea unor documente ajungem in punctul in care trebuie

Listele ordonate se aseamana foarte mult cu cele neordonate, diferenta majora

<h2>Lista ordonata implicita:</h2>

Aspectele prezentate pana acum certifica faptul ca un document HTML prezinta

<A href = "http://www.msn.com/">Legatura cu..</A>

<Base href = "http://www.CalculatorulMeu.com/Radacina/index.html">

<A href = "#intro">Partea 1.Introducere </A>

Specificarea unei relatii intre documente

Elementul LINK este folosit in antetul documentului pentru a specifica o relatie

In lectia precedenta ati invatat cum sa folositi elementul esential al unui

Inserarea unei imagini

Pentru a marca prezenta unei imagini in document se foloseste elementul IMG,

<IMG src = "Imagini/Peisaj.gif">

Folosirea imaginilor ca elemente ancora

<a href = "pagina1.html"><img src = "imaginea1.gif" alt = "pagina1"></a>

Folosirea clipurilor video

<img border="0" dynsrc="film.avi" loop="-1" start="fileopen" alt="acest videoclip poate fi vizualizat

In capitolul dedicat listelor am prezentat una dintre posibilitatile pe care le aveti de a

Marcarea unui tabel

Un tabel este marcat in document de perechea de controale <TABLE> si

Corpul tabelului este partea cea mai importanta, el continand informatia