Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr.

7. Limbajul HTML

7.1 Definirea limbajului.

HTML (Hypertext Markup Language) este un limbaj creat în scopul de a descrie, în mod text,
formatul paginilor Web. Fişierele create în acest limbaj vor fi interpretate de navigatoare, care vor
afişa paginile în forma dorită (cu texte formatate, liste, tabele, formule, imagini, hiperlegături,
obiecte multimedia etc.).
Documentele HTML sunt documente în format ASCII şi prin urmare pot fi create cu orice
editor de texte. Au fost însă dezvoltate editoare specializate care permit editarea intr-un fel de
WYSIWYG (What You See Is What You Get), deşi nu se poate vorbi de WYSIWYG atâta vreme
cât navigatoarele afişează acelaşi document oarecum diferit, în funcţie de platforma pe care rulează.
Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate
(şi formatate) cu alte editoare. Evident, conversiile nu pot păstra decât parţial formatările anterioare,
deoarece limbajul HTML este în permanenţă dezvoltare.
Aşa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale
elementelor incluse prin procedee de marcare. Acestea pot fi asemănate intuitiv cu marcajele
folosite în tipografie pentru a indica scrierea unui text cu un anumit tip de caractere. Fiecare
element va fi introdus între două marcaje ("tags", în limba engleză) - de început şi sfârşit - (uzual)
de forma <marcaj> </marcaj>. Caracterele speciale de delimitare a marcajelor "<", ">" permit
deosebirea acestora de textul propriu-zis. De exemplu, pentru textele aldine (îngroşate), marcajul de
început este <B> iar de sfârşit - </B>.
Referitor la legătura dintre procesoarele de documente uzuale şi limbajul HTML, mai trebuie
menţionat faptul că ultimele versiuni ale editoarelor de documente oferă facilităţi de salvare în
format HTML - de exemplu, Word, începând cu versiunea Microsoft Office '97. Mai mult, toate
produsele incluse în această gamă dedicată biroticii (MS Office) oferă compatibilitate cu formatul
HTML.
Procesele de standardizare şi de includere a comenzilor de marcare în fişierele HTML permit
navigatoarelor să citească şi să formateze paginile Web, lucru foarte important în condiţiile în care
ele conţin nu numai texte alb-negru, ci şi culori, imagini, hiperlegături, diverse obiecte. Practic,
marcajele HTML asigură controlul asupra modului de afişare a obiectelor corespunzătoare în cadrul
programelor de vizualizare a documentelor HTML - navigatoarele.

7.2 Structura elementelor limbajului HTML

Toate obiectele HTML sunt introduse între marcaje (TAG-uri) care le definesc. Majoritatea
acestora sunt de forma <tip_obiect> (la început) şi </tip_obiect> (la sfârşit). Tipul standard al
obiectului poate fi specificat cu majuscule sau minuscule, se recomandă totuşi utilizarea
majusculelor, fiindcă astfel marcajele ies în evidenţă.
Tag-urile între aceste paranteze transmit comenzi către browser pentru a afişa pagina intr-un
anumit mod. Unele blocuri prezintă delimitator de sfârşit de bloc, în timp ce pentru alte blocuri
acest delimitator este opţional sau chiar interzis.
Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursă HTML
(forma pe care o interpretează pentru afişarea paginii). La interpretare, programele de navigare
ignoră spatiile şi <Enter>-urile, aplicând formatarea specificată.
Există însă şi marcaje cu parametri; acestea au forma <tip_obiect param1=valoare1
param2=valoare2>. De exemplu, obiectele de tip imagine sunt introduse cu delimitatorul <IMG>,
care are diverşi parametri. Pentru definirea hiperlegăturilor se foloseşte marcajul <A>, care are de
asemenea parametri proprii.
Codurile de marcare HTML pot fi clasificate în următoarele categorii:
• marcaje de bază - cele care delimitează pagina / documentul HTML, titlul acesteia şi corpul
paginii;

1
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

• marcaje pentru structurarea documentului - care permit introducerea de subtitluri, paragrafe,

linii de delimitare;
• marcaje pentru formatarea textului şi crearea listelor;
• marcaje pentru crearea hiperlegăturilor (hyperlinks);
• marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte multimedia
preluate din fişiere, formulare.

Vom descrie în paragrafele următoare, elementele caracteristice fiecăreia din aceste categorii.
Pentru structurarea şi organizarea informaţiilor din paginile web se pot utiliza frame-uri
(marcajul <FRAME>), prin care la un moment dat se afisează mai multe ferestre conţinând fiecare
câte o pagină. Introducerea şi gestiunea frame-urilor se realizează foarte convenabil folosind
editoarele HTML.
De menţionat faptul că în ultimele versiuni ale limbajului HTML şi ale browser-elor s-a
introdus posibilitatea integrării, respectiv lansării în execuţie prin navigator, a unor aplicaţii.
Acestea sunt scrise de obicei în limbajul Java, un limbaj cu caracteristici distribuite şi obiectuale,
adaptat programării în Web; ele se numesc "applet"-uri şi se introduc în sursele HTML cu marcajul
<APP> sau <APPLET>. Ultimele versiuni de editoare HTML permit introducerea interactivă a
applet-urilor Java.

7.3 Primii Paşi în HTML

Înainte de a trece în revistă categoriile codului HTML, vom considera câteva exemple simple,
pentru a observa structura limbajului şi modul în care se reflectă rezultatul codului din exemple în
fereastra browserului. Pentru a scrie un document HTML nu avem nevoie decât de un editor de
texte (chiar şi Notepad).
Orice document HTML începe cu notaţia <html> şi se termină cu notaţia </html>.
Între cele două marcaje <html> şi </html> vom introduce două secţiuni: secţiunea de antet
<head>...</head> şi corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde
conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra browser-ului.
Titlul unei pagini se obţine inserând în secţiunea <head>...</head> a următoarei linii:

<title> Aceasta este prima mea pagina de Web </title>

În interiorul tag-urilor <body>...</body> vom introduce primul text, forma finală a

documentului HTML arătând de felul acesta:

<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Salut! Bine ai venit în pagina mea de Web!
</body>
</html>

Acest text îl putem scrie cu ajutorul

programului Notepad, pentru început. Fereastra
conţinând fişierul va arăta astfel:

2
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Figura 7.1. Fereastra Notepad de editare

a conţinutului documentului HTML
Dacă salvăm fişierul cu numele de primul.html şi îl deschidem, browserul implicit ne va afişa
următoarea fereastră:

Figura 7.2. Rezultatul documentului HTML, afişat în browser

Observăm, în bara de titlu a browserului, titlul paginii, aşa cum a fost interpretat cu ajutorul
tagului <title>. Dacă acest bloc lipseşte într-o pagină HTML, atunci în bara de titlu a ferestrei
browser-ului va apărea numele fişierului.
Dacă introducem mai multe linii într-o pagină, browser-ul le va afişa într-un singur rând,
întrucât caracterele "CR/LF " sunt ignorate de browser. Trecerea pe o linie nouă se face la o
comandă explicită, care trebuie să apară în pagina html. Această comandă este marcajul <br> (de la
" line break " - întrerupere de linie). Scrierea textului în editorul de texte în acest caz s-a făcut pe
mai multe linii din motive de lizibilitate, browserul având nevoie de caracterul <br> pentru a trece
la o linie nouă, indiferent de câte caractere CR/LF am fi introdus. Bineînţeles, browserul va trece
textul automat pe o linie nouă, atunci când nu mai are spaţiu de afişat în linia curentă.
Să considerăm exemplul următor:

<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Salut! Bine ai venit <br> în pagina mea de Web!
</body>
</html>

Rezultatul este următorul:

3
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Figura 7.3. Folosirea tag-ului <br>

Totuşi, pentru ca browser-ul să interpreteze corect caracterele "spaţiu", "tab" şi "CR/LF" ce
apar în cadrul unui text, acest text trebuie inclus într-un bloc <pre>...</pre> Acesta este un bloc
preformatat. Considerând exemplul următor:

<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>

vom obţine următorul rezultat:

Figura 7.4. Folosirea tag-ului <pre>

7.4 Marcaje de bază HTML

Marcajele de bază HTML cuprind tag-urile <HTML>, <HEAD> şi <BODY>.
HEAD conţine informaţii generale, sau meta-informaţii despre document. Conţinutul
elementului HEAD nu este afişat ca parte a textului documentului, aceasta realizându-se doar cu
ajutorul elementului BODY. Ca urmare, doar anumite elemente de marcare pot face parte din head-
ul documentului:

4
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

BASE - o informaţie a URL-ului original al documentului: în cazul în care documentul îşi

schimbă locaţie, această informaţie permite ca URL-urile relative să fie accesate la vechea lor
locaţie.
ISINDEX - plasat în HEAD de către serverul HTTP sau de către un program specializat
pentru a indica faptul că acest document poate fi căutat.
LINK - defineşte o relaţie între acest document şi alt document (sau alte documente). Un
document poate conţine mai multe elemente LINK.
META - locul în care se pot depune meta-informaţii.
NEXTID - un parametru folosit de editoare HTML automate pentru a crea identificatori unici
ai documentelor.
TITLE - titlul documentului. Orice document ar trebui să posede un titlu.
SCRIPT, STYLE - informaţii care sosesc împreună cu documentul, referitoare la scripturi
JavaScript sau descrierea stilului documentelor.
BASE este utilizat pentru a înregistra URL-ul documentului. Această informaţie se poate
dovedi utilă atunci când un document îşi schimbă locaţia, iar documentele legate de acesta prin
URL-uri relative devin invalide.
Dacă BASE este specificat, construcţia URL-urilor relative se va realiza în funcţie de
argumentul HREF al elementului BASE.
Dacă elementul BASE lipseşte, se presupune că URL-ul de bază folosit pentru a construi
URL-uri relative este cel prin care a fost accesat documentul.
Elementul ISINDEX comunică browserului că documentul care urmează este un document
index şi indică browserului să creeze un câmp de intrare în care utilizatorul poate introduce cuvinte
care fac obiectul unei căutări elementare, ceea ce înseamnă c , în afară de posibilitatea de a-l citi,
„documentul” poate fi examinat şi supus cererilor.
Elementele ISINDEX sunt în general generate automat de către scripturile „server-side”, sau
programe CGI. Trebuie evitată folosirea acestui element în documentele obişnuite HTML.
Elementul LINK face parte din head-ul unui document HTML. Este utilizat pentru a indica
relaţia dintre acest document şi alte documente sau obiecte. Prin urmare, un document poate avea
orice număr de elemente LINK, pentru a indica toate relaţiile posibile dintre acest document şi alte
obiecte sau documente.
Elementul LINK este vid dar poate poseda câteva atribute, comune cu cele ale elementului A
(Anchor). LINK va fi utilizat pentru a indica informaţii diverse despre document sau structura
arborescentă din care face parte documentul curent.
META este un element general pentru a specifica meta-informaţii, adică acele informaţii care
nu pot fi exprimate printr-o altă metodă. Informaţiile utile despre document, cum ar fi datele despre
autor, cuvintele cheie, descrierea documentului şi altele pot fi specificate de asemenea prin
elementul META.
Informaţiile conţinute în interiorul marcajului META pot fi destul de importante, ele putând
conţine elemente ce pot fi extrase de către servere sau clienţi pentru indexare, căutare, identificare
sau catalogare a documentului. Un aspect important al acestui marcaj este acela că, prin intermediul
lui, browserul va şti ce set de caractere va folosi pentru afişarea informaţiei. Iată un asemenea
exemplu:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-2">

În acest caz, construcţia charset=ISO-8859-2 va permite folosirea caracterelor româneşti

Titlul unui document este specificat prin elementul TITLE, care ar trebui să-şi găsească
totdeauna locul în secţiunea HEAD. Orice document poate avea un singur titlu, care va identifica
conţinutul documentului într-o manieră cât mai generală.
Elementul BODY conţine întregul corp al unui document. Pentru corpul documentului însă,
spre deosebire de celelalte etichete, atât eticheta de început cât şi cea de sfârşit pot lipsi. Principalele
atribute folosite împreună cu eticheta BODY sunt: BACKGROUND, BGCOLOR, TEXT, LINK,
ALINK şi VLINK.
5
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

În interiorul corpului unui document se pot regăsi diferite tipuri de elemente:

• Headings ( de la H1 la H6)
• Elementul ADDRESS
• Elemente la nivel de bloc
• Elemente la nivel de text.

7.5 Marcaje pentru structurarea documentului

Programele de navigare asigură afişarea diferenţiată a unor titluri şi subtitluri pentru secţiunile
paginii, după criteriile implementate în acest scop la conceperea sa (litere mai mari sau mai mici,
diverse culori, litere aldine sau simple, unul sau mai multe rânduri libere după titlu etc.).
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o cifră între
1 şi 6 care specifică nivelul titlului (1 este titlul principal iar 6 corespunde celui mai scăzut nivel).
Astfel:
<H1>...</H1> indică un subtitlu de nivelul 1
...
<H6>...</H6> indică un subtitlu de nivelul 6.
Pentru separarea zonelor paginii se pot folosi treceri la:
• linie nouă - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul <HR>;
• paragraf nou - cu marcajul <P> (se inserează o linie nouă şi eventual se face o indentare).
Marcajul </P> desemnează sfârşitul de paragraf, dar este mai rar folosit (se poate omite).

7.6 Marcaje pentru formatarea textului şi crearea listelor

Formatările uzuale de texte permit scrierea cu caractere:
• aldine - în acest scop pentru acel text se aplică marcajele <B>...</B>;
• cursive (italice) - pentru acel text se aplică marcajele <I> ... </I>;
• subliniate - textul se introduce între marcajele <U> ...</U>.
Unele programe mai vechi de navigare nu permiteau reprezentarea acestor formate; în acest
caz, se aplicau alte moduri de evidenţiere a textelor respective (culori, video invers).
Alte tipuri de formatări de caractere care se pot defini se referă la:
• dimensiunea fonturilor şi culori - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> </FONT>, care indică utilizarea unui font de dimensiune x şi
culoare y.
x poate fi un număr între 1 şi 12, indicând mărimea exactă, sau un număr cu semn, indicând
mărimea relativă la dimensiunea curentă.
y poate fi numele unei culori standard, specificată în limba engleză şi între ghilimele, sau,
eventual, descompunerea unei culori în componentele RGB, sub formă hexazecimală (câte două
cifre hexa pentru fiecare componentă).
Sunt disponibile cel puţin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon,
navy, olive, purple, red, silver, teal, white şi yellow.
Altfel, o construcţie de tipul „#rrggbb”, unde r=red, g=green, b=blue pot lua valorile
hexazecimale: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F, putând crea astfel un
impresionant număr de 65536 culori.
Suplimentar, se pot crea pagini de stiluri, în care să se definească stiluri logice, modificabile
ulterior; în acest scop, se folosesc marcajele <DN> - definiţie, <EM> - punere în evidenţă,
<STRONG> - accentuare puternică.
Pentru tastaturile care suportă numai codurile ASCII, caracterele speciale se pot crea folosind
formatul &nume_caracter - de exemplu, &engrave; pentru e. Având în vedere semnificaţia specială
a caracterelor <, > şi &, apariţia lor în documente trebuie specificată sub forma caracterelor
speciale: &lt;, &gt;, respectiv &amp; .
Alternativ, în loc de numele caracterului poate fi introdus numărul caracterului corespunzător
din tabela ASCII, într-o construcţie de forma: „&#169;”, ceea ce echivalează cu caracterul „©”. În
cazul acestui caracter standardizat, echivalentul era „&copy;”.
6
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Pentru a insera secvenţe de text aliniate ca indice (sub-script) sau ca exponent (super-script),
aceste fragmente trebuie delimitate de etichetele _..., respectiv ^.... Pentru a
insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u vine de la "underline").
Pentru a insera un bloc de caractere subliniate se utilizează etichetele <strike>...</strike> sau
<s>...</s>.
Următorul exemplu, alături de figura rezultatului în browser, ne este prezentat de următorul
bloc de cod HTML:

<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b>
<br> <big>Text cu caractere marite cu o unitate <big>mai mare<big> şi mai mare<big>
şi mai mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micsorate cu o unitate <small>mai
mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> În aceasta linie ^sus este superscript iar _jos este
subscirpt.<br>
<strike>Aceasta linie este în
intregime sectionata de o linie
orizontala.</strike> <br>
În aceasta linie urmatorul cuvant
este <u>subliniat</u>, iar
cuvantul <s>strike</s> sectoinat.
</body>
</html>

Figura 7.5 Stiluri de formatare a textului

Aceste stiluri de scriere a
caracterelor din interiorul unui
bloc se numesc stiluri fizice,
pentru că nu ţin cont de informaţia
conţinută de blocul de text.
În continuare sunt prezentate stilurile utilizate la formatarea unui bloc. Aceste stiluri ţin cont
de semnificaţia pe care o are blocul în cadrul paginii Web.
Pentru a pune în evidenţă (prin silul cursiv) fragmente de text se utilizează etichetele:
• <cite>...</cite> ( "cite" înseamnă citat);
• <em>...</em> (em vine de la "emphasize" = a evidenţia).
În locul lor se poate utiliza eticheta echivalentă <i>...</i>.
Următoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere
monospaţiate (de tipul celor folosite de o maşină de scris):
• <code>...</code> ("code" înseamnă cod sau sursă);
• <kbd>...</kbd> (kbd vine de la "keyboard" = tastatura);
• <tt>...</tt> (tt vine de la " teletype " = teleprinter).
Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare. Aceasta
etichetă funcţionează numai în browserul Netscape Comunicator.
Să considerăm următorul exemplu:

7
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

<html>
<head>
<title>Blocuri de caractere monospatiate şi clipitoare </title>
</head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd> copy c:\windows\* c:\temp<kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste <blink>Blink</blink>
</body>
</html>

Salvarea sa ca document HTML ne va da următorul rezultat în browser:

Figura 7.6. Formatarea blocurilor de caractere

Etichetele pot fi imbricate, adică se pot aplica în acelaşi timp unui element, de obicei sub
forma :

<TAG1><TAG2>Element</TAG1></TAG2>

Să considerăm următorul exemplu şi să observăm rezultatul:

<html>
<head>
<title>Imbricarea etichetelor </title>
</head>
<body> Aceasta linie este formata din text normal.<br>
Normal <b>ingrosat <i> ingrosat şi italic </i> ingrosat </b>.
<br> Normal <u>subliniat <b> subliniat şi ingrosat <big>subliniat, ingrosat şi marit.<br>
<i>Subliniat, ingrosat, marit şi
italic.</i> </big></b></u>
</body>
</html>

Figura 7.7 Imbricarea tag-urilor

8
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Formatarea titlurilor (Blocuri de titlu)

Într-un text, titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>. Toate aceste etichete se referă la un bloc de text şi trebuie însoţite de o
etichetă de încheiere similară. Aceste etichete acceptă atributul align pentru alinierea titlului
blocului de text la stânga (în mod prestabilit), în centru şi la dreapta. Tag-ul <h1> permite scrierea
unui titlu cu caractere mai mari şi aldine, pe când <h6> foloseşte caracterele cele mai mici.

Figura 7.8 Utilizarea tagurilor <Hn> pentru scrierea titlurilor

Inserarea liniilor orizontale
Într-o pagină Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei
<hr>. Pentru a configura o linie orizontală se utilizează următoarele atribute ale etichetei <hr>:

• align permite alinierea liniei pe orizontală. Valorile posibile sunt "left","center" şi "right";
• width permite alegerea lungimii liniei;
• size permite alegerea grosimii liniei;
• noshade când este prezent defineşte o linie fără umbră;
• color permite definirea culorii liniei.

Considerăm următorul exemplu, după care vom observa în browser şi efectul codului:
<html><head>
<title> Linii orizontale</title></head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stanga, latime
100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata în centru, de latime 50%, grosime 5 pixeli, fara umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta, de latime
150 de pixeli, grosime 12 pixeli, de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>

Figura 7.9 Tipuri de linii orizontale

9
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Blocuri <NOBR>
Blocul de text cuprins între etichetele <nobr>...</nobr> va fi afişat pe o singură linie.

Blocuri <div>
Modalitatea cea mai eficientă de delimitare şi de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc
<div> (diviziune) este align (aliniere). Valorile posibile ale acestui parametru sunt:

• "left" (aliniere la stânga);

• "center" (aliniere centrată);
• "right" (aliniere la dreapta).

Un bloc <div>...</div> poate include alte subblocuri. În acest caz, alinierea precizată de atributul
align al blocului are efect asupra tuturor subblocurilor incluse în blocul <div>. Un bloc
<div>...</div> admite atributul "nowrap" care interzice întreruperea rândurilor de către browser.

Marcaje tip Listă

Limbajul HTML permite definirea mai multor tipuri de liste şi imbricarea lor (includerea unor
liste în altele), caz în care trebuie verificată cu atenţie corespondenţa dintre marcajele de început şi
sfârşit pentru fiecare listă. Formatarea listelor la afişarea paginii (introducerea bulinelor,
numerotării etc.) se face de către programul de navigare.
Elementele listelor se introduc între marcajele <LI>...</LI> ("list item"). Modul de apariţie al
elementelor depinde de tipul de listă în care sunt incluse (cu buline, numerotate etc.), determinat de
marcajul specific.
Astfel, listele pot fi:
• neordonate (cu buline) - delimitate de marcajele <UL>...</UL> ("unordered list"); elementele
lor se afisează cu buline;
• ordonate (numerotate) - delimitate de marcajele <OL>...</OL> ("ordered list"); elementele lor
se vor numerota;
• de tip meniu - delimitate de marcajele <MENU>...</MENU>; elementele acestor liste apar într-
o reprezentare compactă pe ecran (multicoloană);
• glosare (liste de definiţii) delimitate de marcajele <DL>...</DL> ("definition list"); elementele
acestora au câte două componente, introduse respectiv cu marcajele <DT> (pentru nume) şi
<DD> (pentru semnificaţia asociată);
• tabele scurte - create cu marcajul <DIR>.
Listele utilizate cel mai frecvent sunt cele
ordonate şi neordonate. Prezentăm în continuare un
exemplu simplu de pagină HTML care conţine
aceste tipuri de liste.

<html>
<head>
<title>Pagina cu liste</title></head>
<body>
<p>Aceasta pagina exemplifica crearea
listelor</p>
<p>Cele mai uzual folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O lista ordonata este o lista numerotata:
<ol>
10
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>
Figura 7.10 Ilustrarea folosirii listelor

7.8 Marcaje pentru crearea hiperlegăturilor

Hiperlegăturile ("hyperlinks") se introduc cu marcajele <A>...</A> ("anchor") aplicate asupra
unui text sau a unei imagini. Ele se pot crea către:
• adrese URL - astfel se asigură accesul în cadrul procesului de navigare (prin protocoale
specifice), nu numai la paginile web, ci şi la diverse servicii Internet;
• fişiere / resurse locale, adică aflate pe acelaşi calculator cu pagina creată - link-uri locale;
acestea ar putea fi accesate şi printr-un URL cu protocolul "file", dar pentru mai multă
simplitate, este suficientă specificarea numelui şi căii fişierului local;
• zonă din documentul HTML curent - link-uri interne.
Zona activă care devine sensibila la apăsarea butonului stâng al mouse-ului este formată din
textul cuprins între etichetele <a>...</a>.
Prezenţa etichetei de sfârşit </a> este obligatorie.

În fiecare din aceste cazuri, un click pe textul sau imaginea respectivă va determina activarea
legăturii şi afişarea prin intermediul navigatorului a resursei asociate link-ului.
Resursa asociată unei legături este descrisă prin parametrii marcajului <A>:
• HREF - permite asocierea unei adresei URL, crearea unei legături locale prin specificarea
numelui şi căii fişierului corespunzător sau a unei legături interne documentului; este cel mai
important parametru pentru construirea de hiperlegături;
• NAME - numele hiperlegăturii sau al zonei dintr-o pagină către care se face referirea, în cazul
unui link intern;
• METHODS - metodele de acces (acest parametru se utilizează doar în prelucrări speciale). Astfel,
un link local sau către o adresă URL se poate defini pe un text cu: <A HREF="resursa"> text
</A>.
O legătură internă către o zonă a documentului curent se indică folosind marcajul <A
NAME="nume-zona">.
Pentru a insera o legătură către "nume_zona" definită în aceeaşi pagină se utilizează eticheta
<a> având atributul href de valoare "# nume_zona".
Pentru a introduce o legătură către o ancoră definită în alt document (altă pagină) aflat în
acelaşi director, atributul href primeşte o valoare de forma "nume_fisier.html#nume_ancora".
Ancorele pot fi definite şi prin atributul „id”, care este un atribut universal, adică poate fi ataşat
oricărui element al unei pagini Web. Acest atribut va înlocui complet atributul name, care putea fi
ataşat numai anumitor elemente. Atributul id primeşte ca valoare un nume (de exemplu "id1") care
identifică în mod unic un element. Atributul id poate fi utilizat pe post de ancoră într-o pagină Web
conform sintaxei:

<eticheta id = "id1"> ... </eticheta>

<a href = "#id1" >Link catre elementul "id1" </a>

unde "eticheta" poate fi orice element .

Dacă pagina referită se află pe acelaşi disc local, dar intr-un alt director atunci, pentru a
preciza poziţia ei în structura de directoare se poate folosi adresarea relativă.

<a href="../../laboratoare/lista/index1.html">
11
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Legăturile către un site extern, particular, se fac folosind adresarea absolută. De exemplu, în
exemplul următor, legătura va duce utilizatorul la site-ul www.microsoft.com:

<a href="http://www.microsoft.com">

După cum ştim, o legătură (link) trebuie să se distingă faţă de restul textului. De cele mai
multe ori este colorată diferit faţă de textul obişnuit, de obicei textul afişat fiind subliniat.
În mod prestabilit se utilizează trei culori pentru legături:
• culoare pentru legăturile nevizitate (nu s-a efectuat nici un clic pe ele)
• culoare pentru legăturile vizitate (s-a efectuat cel puţin un clic pe ele)
• culoare pentru legăturile active (deasupra cărora se afla mouse-ul la un moment dat).
Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>:
• link pentru legăturile nevizitate;
• vlink pentru legăturile vizitate;
• alink pentru legăturile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform
standardului RGB.

<html>
<head>
<title> Culori pentru lagaturi</title>
</head>
<body link="blue" vlink="green" alink="red">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde pentru legaturi
vizitate şi albastru pentru legaturi nevizitate </h3>
<a href=pag1.html>
Link catre pagina 1 <br>
<a href=pag2.html>
Link catre pagina 2 <br>
<a href=pag3.html>
Link catre pagina 3 </a>
</body>
</html>

Pe lângă legăturile la alte documente HTML, într-o pagină Web se pot afla legături care
permit lansarea în execuţie a aplicaţiei de expediere a mesajelor electronice. Pentru aceasta se
utilizează în construcţia adresei URL serviciul Internet mailto: urmat de o adresă e-mail validă.
Pentru ca exemplul următor să funcţioneze trebuie ca:
• pe calculator să fie instalată o aplicaţie de expediere a mesajelor electronice (Outlook
Express pe calculatoarele Windows, Pine pe calculatoarele Unix, de exemplu);
• adresa să fie validă şi calculatorul să fie conectat la Internet.

<html>
<head>
<title> Expediere de mesaje electronice</title>
</head>
<body>
<h4>Expediere de mesaje electronice</h4>
<a href="mailto:admin@ucv.ro">
Mesaj catre administrator
</body>
</html>

12
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Figura 7.11 Link-ul către adresa de e-mail: admin@ucv.ro

Un click pe legătura „Mesaj către administrator” va determina deschiderea programului de e-
mail implicit, care va avea completat în dreptul câmpului destinatar, adresa destinatarului, în cazul
nostru admin@ucv.ro.

7.9 Marcaje pentru introducerea de obiecte

Introducerea Tabelelor
Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a informaţiilor formatate.
Asemenea obiecte trebuiau create formatat şi introduse ca obiect deja formatat, cu marcajele
<PRE>, </PRE>. Aceste marcaje indicau navigatorului că textul inclus trebuia afişat caracter cu
caracter, fără vreo intervenţie de formatare. În versiunile ulterioare ale limbajului HTML s-au
introdus însă facilităţi elegante de formatare, de includere a tabelelor şi a altor obiecte.
În HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale şi coloane
verticale la a căror intersecţie se formează celulele. Acestea pot conţine intrări diverse: texte, figuri
sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu, pentru titluri mai lungi).
Atributele de formatare a tabelului (aliniere, stilul chenarului şi marginilor etc.) se definesc în
proiectarea paginii, dar modul lor de afişare va depinde şi de programul de navigare.
Tabelele se introduc între marcajele <TABLE>…</TABLE>, cărora li se pot ataşa (opţional)
parametrii BORDER şi RULES. Un titlu pentru tabel se poate introduce cu marcajul <CAPTION>.
Fiecare coloană se defineşte cu marcajul <COL>, având ca parametru ALIGN - modul de aliniere a
informaţiilor din acea coloană (LEFT, CENTER, RIGHT).
Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table Header"), pentru
trecerea la o linie nouă se utilizează marcajul <TR> ("Table Row") iar celulele individuale se
marchează cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se mai pot specifica alinieri
orizontale sau verticale ale celulelor, grupări de celule etc. Aceste marcaje permit navigatorului să
afişeze diferenţiat informaţiile din tabel.
Prezentăm în continuare un exemplu simplu de tabel.

<html>
<head><title>tabel</title></head>
<body><h5 align=center>Un tabel format din 4 linii şi 2 coloane</h5><hr>
<table>
<tr> <td>cell 11</td> <td>cell 12</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
<tr> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td>cell 42</td></tr>
</table>
</body>
</html>

Rezultatul este arătat în figura următoare:

13
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Figura 7.12 Un tabel simplu

În mod prestabilit, un tabel nu are chenar. pentru a adaugă un chenar unui tabel, se utilizează
un atribut al etichetei <table> numit border.
Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea în
pixeli a chenarului tabelului.
Daca atributul border nu este urmata de o valoare, atunci tabelul va avea o grosime prestabilită
egala cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absenţa chenarului. Când atributul border
are o valoare nenulă, chenarul unui tabel are un aspect tridimensional.

<html>
<head><title>tabel</title></head>
<body><h4 align=center>Un tabel cu chenar</h4><hr>
<table border="4">
<tr> <td>cell 11</td> <td>cell 12</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
<tr> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td>cell 42</td></tr>
</table>
</body>
</html>

Rezultatul va arăta astfel:

Figura 7.13. Tabel cu chenar

14
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Alinierea tabelului intr-o pagina Web se face folosind atributul align al etichetei <table>, cu
următoarele valori posibile: "left" (valoarea prestabilită), "center " şi "right". Alinierea este
importantă pentru textul ce înconjoară tabelul. Astfel :
• dacă tabelul este aliniat stânga (<table align="left">), atunci textul care urmează după punctul
de inserare al tabelului va fi dispus în partea dreaptă a tabelului.
• dacă tabelul este aliniat dreapta (<table align="right">), atunci textul care urmează după
punctul de inserare al tabelului va fi dispus în partea stângă a tabelului.
• daca tabelul este aliniat pe centru (<table align="center">), atunci textul care urmează după
punctul de inserare al tabelului va fi afişat pe toata lăţimea paginii, imediat sub tabel.

Distanţa dintre tabel şi celelalte elemente din pagina Web poate fi stabilită cu ajutorul
atributelor hspace şi vspace ale etichetei <table>. Valoarea atributului hspace poate fi orice număr
pozitiv, inclusiv 0 şi reprezintă distanţa pe orizontală dintre tabel şi celelalte elemente ale paginii
Web. Valoarea atributului vspace poate fi orice număr pozitiv, inclusiv 0 şi reprezintă distanţa pe
verticală dintre tabel şi celelalte elemente ale paginii Web.
Notă: Aceste atribute funcţionează numai cu Netscape Navigator.
Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi ataşat întregului tabel
prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>.
Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.
Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>,
<tr>, <table> (cu prioritate cea mai mică).
Culoarea textului din fiecare celulă se poate stabili cu ajutorul expresiei:

<font color="valoare">...</font>.

Distanţa dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei
<table>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în
pixeli dintre două celule vecine. Valoarea prestabilită a atributului cellspacing este 2.
Distanţa dintre marginea unei celule şi conţinutul ei poate fi definită cu ajutorul atributului
cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, şi reprezintă
distanţa în pixeli dintre celule şi conţinutul ei. Valoarea prestabilită a atributului cellpadding este 1.
Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul a doua
atribute, width şi height, ale etichetei <table>.
Valorile acestor atribute pot fi:
• numere întregi pozitive reprezentând lăţimea, respectiv înălţimea în pixeli a tabelului;
• numere întregi intre 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi
înălţimea totală a paginii.

Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> (de la "table caption" = titlu
tabel). Această etichetă trebuie plasată în interiorul etichetelor <table>...</table>, dar nu în
interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi aliniat cu ajutorul atributului align al
etichetei <caption>, care poate lua una dintre valorile:
• "bottom" ( sub tabel );
• "top" ( deasupra tabelului );
• "left" ( la stanga tabelului );
• "right" ( la dreapta tabelului ).

<html>
<head><title>tabelex_9</title></head>
<body><h4 align=center>Un tabel cu titlu</h4>
<table border><caption align="right">Masini
<tr><td>Mercedes</td><td>Citroen </td><td>Daewoo </td></tr>
<tr><td>BMW </td><td>Volvo </td><td>Renault </td></tr>
15
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

</table>
</body>
</html>

Iată şi rezultatul:

Figura 7.14. Afişarea titlului unui tabel

7.10 Formulare HTML

Formularele conţin obiecte de control care permit utilizatorilor introducerea de informaţii prin
completarea unor câmpuri specifice (casete de text), prin selectarea sau activarea unor opţiuni
(comutatoare, grupuri sau liste de opţiuni). Aceste informaţii vor fi transmise, după activarea
butonului SUBMIT (echivalentă cu tastarea lui <Enter>) proprietarului paginii, introduse în baze de
date dedicate şi prelucrate cu aplicaţii specifice.
HTML 1.0 permitea uzual doar transferarea informaţiilor de la furnizori către utilizatori,
transferul în sens invers fiind foarte dificil. Odată cu dezvoltarea Web-ului şi mai ales cu utilizarea
sa în scopuri comerciale şi în diverse alte domenii, s-a făcut simţită necesitatea comunicării în dublu
sens pentru preluări de comenzi, completarea unor fişe de înregistrare, distribuirea de produse soft,
administrarea de chestionare, transmiterea unor informaţii personale etc. Acestea au fost motivaţiile
introducerii formularelor în HTML 2.0.
Formularele se introduc prin marcajele <FORM>...</FORM>, cărora li se ataşează parametri
specifici care definesc metodele de transmitere şi tratare a datelor. Un formular poate conţine
obiecte de control de diverse tipuri, definite cu marcajul <INPUT> şi o varietate de parametri care
stabilesc, pentru obiectul definit, tipul, dimensiunea şi modul lui de afişare. Astfel, se pot crea
câmpuri de text (care vor fi completate cu texte de către utilizator), liste de alternative, comutatoare,
grupuri de opţiuni, butoane, hărţi active etc.
Datele preluate prin intermediul formularelor se tratează conform standardului CGI (Common
Gateway Interface) prin intermediul unor programe sau script-uri CGI. În plus, un asemenea script
poate interacţiona cu baza de date creată pentru realizarea unor acţiuni specifice (de exemplu,
hărţile active folosesc script-uri CGI pentru a executa diferite acţiuni, în funcţie de zona selectată de
utilizator).
Script-urile CGI pot executa şi alte operaţii decât prelucrarea formularelor, producând ieşiri
convenabile. Dacă o hiperlegătură indică spre un script CGI, la selectarea legăturii se va executa
script-ul (cu anumite variabile de context care reţin diverse informaţii de stare). Script-ul va
produce un fişier, de exemplu o pagină web, care va fi interpretat(ă) de navigator. Acest mecanism
permite script-urilor să genereze, aproape instantaneu, pagini web care să satisfacă diverse cerinţe
ale utilizatorilor, furnizând anumite răspunsuri aşteptate în urma unor acţiuni.
Crearea interactivă a formularelor, folosind produse soft specializate în realizarea de pagini
Web este relativ accesibilă pentru utilizatorii familiarizaţi cu caracteristicile obiectelor de control

16
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

specifice aplicaţiilor soft, dar tratarea ulterioară a informaţiilor transmise necesită cunoştinţe de
specialitate.
Numele, simbolurile şi procedura de introducere interactivă dintr-un editor HTML (de
exemplu Microsoft Front Page) a obiectelor de control sunt extrem de apropiate de cele asociate
obiectelor similare din formularele sau rapoartele Microsoft Access. Pentru utilizatorii mai puţin
avizaţi însă, crearea, chiar interactivă, a formularelor este mai dificilă.
Aşadar, un formular este un ansamblu de zone active alcătuit din butoane, casete de selecţie,
câmpuri de editare etc.
Formularele asigură construirea unor pagini Web care permit utilizatorilor să introducă efectiv
informaţii şi să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru
introducerea unui şir de caractere pe post de cheie de căutare - element caracteristic tuturor
motoarelor de căutare din Web - până la o structură complexă, cu multiple secţiuni, care oferă
facilităţi puternice de transmisie a datelor. O sesiune cu o pagina web ce conţine un formular
cuprinde următoarele etape:

1. Utilizatorul completează formularul şi îl expediază unui server.

2. O aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar)
stochează datele intr-o baza de date.
3. Dacă este necesar, serverul expediază un răspuns utilizatorului.

Există doua atribute esenţiale ale elementului <form>.

1. Atributul action precizează ce se va întâmpla cu datele formularului odată ce acestea ajung
la destinaţie. De regulă, valoarea atributului action este adresa URL a unui script aflat pe un
server WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediază
către utilizator un răspuns.

<form action="http://www.usr.com/cgi-bin/update.cgi">.

Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.

2. Atributul method precizează metoda utilizata de browser pentru expedierea datelor
formularului. Sunt posibile următoarele valori:
• get (valoarea implicita).În acest caz,datele din formular sunt adăugate la adresa URL
precizata de atributul action;
− nu sunt permise cantităţi mari de date (maxim 1 Kb)
− între adresa URL şi date este inserat un "?".
Datele sunt adăugate conform sintaxei: nume_câmp = valoare_câmp. Între diferite seturi de
date este introdus un "&".
Exemplu: "http://www.usr.com/cgi-bin/nume_fis.cgi?nume1= valoare1&nume2 = valoare2";
• post. În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de date (ordinul
MB)

Pentru ca un formular să fie funcţional, trebuie precizat ce se va întâmpla cu el după

completare şi expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia
prin poşta electronică (e-mail). Pentru aceasta se foloseşte un atribut al etichetei <form>: şi anume
action care primeşte ca valoare "mailto:" concatenat cu o adresă validă de e-mail către care se va
expedia formularul completat.
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a
preciza tipul elementului se foloseşte atributul type al etichetei <input>. Pentru un câmp de editare,
acest atribut primeşte valoarea "text". Alte atribute pentru un element <input> sunt:
• atributul name, permite ataşarea unui nume fiecărui element al formularului.
• atributul value, care permite atribuirea unei valori iniţiale unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, în care
atributul type este configurat la valoarea "submit". Acest element poate primi un nume prin
17
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value, dacă această
valoare a fost stabilită.
Pentru elementul <input> de tipul câmp de editare (type = "text"), alte două atribute pot fi
utile:
• atributul size - specifică lăţimea câmpului de editare. Dacă se depăşeşte această lăţime,
atunci se execută automat o derulare a acestui câmp;
• atributul maxlength specifica numărul maxim de caractere pe care le poate primi un câmp de
editare; caracterele tastate peste numărul maxim sunt ignorate.

Observaţii:
• daca atributul type lipseşte într-un element <input>, atunci câmpul respectiv este considerat
în mod prestabilit ca fiind de tip "text".
• formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere, datele
sunt expediate automat după completarea şi apăsarea tastei ENTER.

Dacă un element de tip <input> are atributul type configurat la valoarea "reset", atunci în
formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton, toate elementele
din formular primesc valorile prestabilite (definite odată cu formularul), chiar dacă aceste valori au
fost modificate de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name şi o
valoare printr-un atribut value. Un asemenea buton afişează textul "Reset" daca atributul value
lipseşte, respectiv valoarea acestui atribut în caz contrar.

<html>
<head><title>Formular</title></head>
<body><h4>Un formular </h4>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Introduceti numele:<input type="text" name="nume" value="Numele"><br>
Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br>
<input type="reset" value="sterge"> <input type="submit">
</form></body>
</html>

Figura 7.15. Formular cu butoane Reset şi Submit

Daca se utilizează eticheta <input> având atributul type configurat la valoarea "password",
atunci în formular se introduce un element asemănător cu un câmp de editare obişnuit (introdus prin
type="text").
Toate atributele unui câmp de editare rămân valabile, singura deosebire constând în faptul că
acest câmp de editare nu afişează caracterele în clar, ci numai caractere *, care ascund de privirile

18
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

altui utilizator aflat în apropiere valoarea introdusa intr-un asemenea câmp. La expedierea
formularului însă, valoarea tastată într-un câmp de tip "password" se transmite în clar.

<html>
<head><title>Password</title></head>
<body><h4>Formular de inregistrare</h4>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Nume:<input type="text" name="nume" value="Numele"><br>
Prenume:<input type="text" name="prenume" value="Prenumele"><br>
Password:<input type="password" name="parola" ><br>
<input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body>
</html>

Figura 7.16 Formular cu un câmp de tip „password”

Alte elemente ale unui formular
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe
posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type având valoarea "radio".
<html>
<head><title>exemplu</title></head>
<body><h4>Un formular cu butoane radio</h4>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Alegeti sexul:<input type="radio" name="sex"
value="b"><br>
Femeiesc:<input type="radio" name="sex"
value="f"><br>
<input type="reset"> <input type="submit">
</form></body>
</html>
La expedierea formularului se va transmite una
dintre perechile "sex=b" sau "sex=f", în funcţie de
alegerea făcută de utilizator:

Figura 7.17 Formular cu butoane radio

Caseta de validare (checkbox) permite selectarea sau

deselectarea unei opţiuni. Pentru inserarea unei casete de

19
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

validare se utilizează eticheta <input> cu atributul type configurat la valoarea "checkbox".

Observaţii:
− fiecare casetă poate avea un nume definit prin atributul name.
fiecare casetă poate avea valoarea prestabilită "selectat" definită prin atributul checked.

<html>
<head><title>Checkbox</title></head>
<body><h4>Meniu</h4>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Alegeti meniul:<br>
Pizza <input type="checkbox" name="pizza" value="o portie">
Prigat <input type="checkbox" name="nectar" value="un pahar">
Bere <input type="checkbox" name="bere" value="o sticla">
Cafea <input type="checkbox" name="cafea" value="o ceasca"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>

Figura 7.18 Casete de validare

Casete de fişiere
Într-o pereche "name = value" a unui formular se
poate folosi întregul conţinut al unui fişier pe post de
valoare. Pentru aceasta se inserează un element <input>
într-un formular, cu atributul <> având valoarea "file"
(fişier). Atributele pentru un element de tip casetă de
fişiere:
• atributul name permite ataşarea unui nume
• atributul value primeşte ca valoare adresa URL a
fişierului care va fi expediat o dată cu
formularul. Aceasta valoare poate fi atribuită
direct atributului value, ce poate fi tastată într-un
camp de editare ce apare o data cu formularul sau poate fi selectată prin intermediul unei
casete de tip File Upload sau Choose File, care apare la apăsarea butonului Browse... din
formular;
• atributul enctype precizează metoda utilizată la criptarea fişierului de expediat. Valoarea
acestui atribut este "multipart/form-data".

<html>
<head><title>Upload</title></head>
<body><h4>Upload fisier</41>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Alegeti fisierul:<input type="file" name="fisier"
enctype="multipart/form-data"><br>
<input type="reset"> <input type="submit">
</form></body>
</html>

Figura 7.17. Formular cu casetă de fişier

20
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Liste de selecţie
O listă de selecţie permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă
finită. Lista de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <select> şi
</select>.
O listă de selecţie poate avea următoarele atribute:
• atributul name, care ataşează listei un nume (utilizat în perechile "name=value" expediate
serverului);
• atributul size, care precizează (printr-un număr întreg pozitiv, valoarea prestabilită fiind 1)
câte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile
prin acţionarea barei de derulare ataşate automat listei).
Elementele unei liste de selecţie sunt incluse în listă cu ajutorul etichetei <option>. Două
atribute ale etichetei option se dovedesc utile:
• atributul value primeşte ca valoare un text care va fi expediat server-ului în perechea
"name=value"; daca acest atribut lipseşte, atunci către server va fi expediat textul ce
urmează după <option>;
• atributul selected (fără alte valori) permite selectarea prestabilită a unui element al listei.

<html>
<head><title>Orase</title></head>
<body><h4>Formular cu o lista de selectie</h4>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Alege orasul resedinta:<br>
<select name="oras" size="3"> <option value="B"> Bucuresti
<option value="C" selected> Craiova
<option value="S"> Slatina
<option value="T"> Tg. Jiu
</select><br>
<input type="reset"> <input type="submit">
</form></body>
</html>

Figura 7.20 Liste de selecţie

Lista de selecţie cu selecţii multiple

O listă de selecţie ce permite selecţii multiple se
creează întocmai ca o lista de selecţie obişnuită. În
plus, eticheta <select> are un atribut multiple (fără alte
valori). Când formularul este expediat către server,
pentru fiecare element selectat al listei se inserează
cate o pereche "name=value" unde name este numele
listei.

<html>
<head><title>Limbi straine</title></head>
<body>
<hr>
<form action="mailto:admin@ucv.ro" method="post">
Limbi straine cunoscute:<br><br>
<select name="limbi straine" size="5" multiple> <option value="e"> Engleza
<option value="f" selected> Franceza
<option value="s"> Spaniola
<option value="i"> Italiana
<option value="r"> Rusa
21
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

<option value="g"> Germana

</select><br><br>
<input type="reset"> <input type="submit">
</form></body>
</html>

Figura 7.21 Listă cu selecţii multiple

Câmpuri de editare pe mai multe linii

Într-un formular câmpuri de editare pe mai multe linii (multilinie) pot fi incluse cu ajutorul
etichetei <textarea>. Eticheta are următoarele atribute:
• atributul cols, care specifica numărul de caractere afişate intr-o linie;
• atributul rows, care specifică numărul de linii afişate simultan;
• atributul name, care permite ataşarea unui nume câmpului de editare multilinie;
• atributul wrap, (de la "word wrap"= trecerea cuvintelor pe rândul următor, care determina
comportamentul câmpului de editare faţă de sfârşitul de linie.

Acest atribut poate primi următoarele valori:

a) "off"; în acest caz:
• întreruperea cuvintelor (trecerea la linie nouă) la marginea din dreapta a editorului se
produce numai când doreşte utilizatorul;
• caracterul de sfârşit de linie este inclus în textul transmis serverului o dată cu formularul;
b) "hard"; în acest caz:
• se produce întreruperea cuvintelor la marginea din dreapta a editorului;
• caracterul de sfârşit de linie este inclus în textul transmis serverului o dată cu formularul
c) "soft"; în acest caz:
• se produce întreruperea cuvintelor la marginea din dreapta a editorului ;
• nu se include caracterul de sfârşit de linie în textul transmis serverului o dată cu formularul;

<html>
<head><title>Formular</title></head>
<body><h1>Formular cu un camp de editare multilinie</h1> <hr>
<form action="mailto:admin@ucv.ro" method="post">
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din text.
A doua linie din text. </textarea>
<input type="reset"> <input type="submit">
</form></body>
</html>

22
Anul I, Seria VI, Disciplina: Informatică Economică – Platforma de laborator nr. 7

Figura 7.22 Formular cu un câmp multilinie

Am prezentat în această parte a capitolului principalele elemente ale limbajului HTML.

Acesta este primul pas pentru realizarea de pagini Web.
Programarea în Web este însă mult mai vastă, incluzând o serie de aspecte ce implică limbaje
evoluate, cum ar fi Java, Javascript, ASP, PERL, PHP, VBScript, C++, Flash şi multe altele.
Pentru orice programator Web, buna cunoaştere a unor asemenea limbaje determină adaptarea
la rigorile lucrului în mod profesionist în domeniul Internet.
HTML este doar începutul.

23