Carte HTML

1. Ce este HTML?
Unul din primele elemente fundamentale ale WWW (World Wide Web) este
HTML (Hypertext Markup Language), care descrie formatul primar în care
documentele sunt distribuite şi văzute pe Web. Multe din trăsăturile lui, cum ar fi
independenta faţă de platformă, structurarea formatării şi legăturile hipertext, fac din el un
foarte bun format pentru documentele Internet şi Web.
Primele specificaţii de baza ale Web-ului au fost HTML, HTTP şi URL. HTML a
fost dezvoltat iniţial de Tim Berners-Lee la CERN în 1989. HTML a fost văzut ca o
posibilitate pentru fizicienii care utilizează computere diferite şi schimbă între ei
informaţie utilizînd Internetul. Erau prin urmare necesare cîteva trăsături: independenţa de
platforma, posibilităţi hypertext şi structurarea documentelor. Independenţa de platformă
înseamnă ca un document poate fi afişat în mod asemănător de computere diferite (deci cu
fonte, grafică şi culori diferite), lucru vital pentru o audienţă atît de variata.
Hipertext înseamnă ca orice cuvînt, frază, imagine sau alt element al documentului
văzut de un utilizator (client) poate face referinţă la un alt document, ceea ce uşurează
mult navigarea între multiple documente sau chiar în interiorul unui aceluiaşi document.
Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format în altul
precum şi interogarea unor baze de date formate din aceste documente.
SGML şi HTML
Tim Berners-Lee a utilizat ca model SGML (Standard Generalized Markup

Language), un standard internaţional în plină dezvoltare. SGML avea avantajul unei
structurări avansate şi al independenţei de platformă, dar proiectarea lui a avut în vedere
mai mult structura semantică a documentului decît modul de formatare. Flexibil, SGML
putea fi descris ca o specificare pentru descrierea altor formate. Utilizatorii puteau crea noi
formate (DTD, Document Type Definitions) care puteau fi înţelese de orice produs soft
SGML pur şi simplu prin citirea mai întîi a definiţiilor noilor formate.
HTML este pur şi simplu un DTD, deci o aplicaţie a SGML. În primii ani de
evoluţie HTML a crescut lent, în principal pentru ca îi lipseau posibilităţile de a descrie
publicaţii electronice profesionale; limbajul permitea orice control asupra fontelor dar nu
permitea inserarea graficii. În 1933, NCSA a îmbogăţit limbajul pentru a permite inserarea
graficii şi au construit primul navigator grafic, Mosaic. Au urmat apoi contribuţii ad hoc
ale diverselor firme care au adus adăugări limbajului HTML (adăugări şi nu îmbogăţiri
pentru ca unele taguri nu erau în conformitate cu principiile generale ale SGML) astfel
încît, prin 1994 limbajul părea scăpat de sub control. Ca urmarea la prima conferinţa
WWW din Geneva (Elvetia) s-a constituit un grup (HTML Working Group) a cărui
prima misiune a fost formalizarea HTML într-un DTD al SGML, lucru care s-a concretizat
în HTML Level 2 (sau HTML 2.0; Nivelul 1, deci HTML 1.0, a fost proiectat de Tim
Berners-Lee). Importanţa acţiunii acestui grup consta în faptul ca, odată standardizat,
limbajul poate fi apoi extins într-un mod mai controlat la alte nivele.
Standardul oficial HTML este World Wide Consortium (W3C), care este afiliat la
Internet Engineering Task Force (IETF). W3C a enunţat cîteva versiuni ale specificaţiei
HTML, printre care şi HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 şi cel mai recent,
HTML 4.01. În acelaşi timp, autorii de browsere, cum ar fi Netscape şi Microsoft, au
dezvoltat adesea propriile ”extensii” HTML în afara procesului standard şi le-au
incorporat în browserele lor. În unele cazuri, cum ar fi tagul Netscape, aceste extensii au
devenit standarde de facto adoptate de autorii de browsere.
HTML 2.0, elaborat în iunie 1994, este standardul pe care ar trebui să-l suporte
toate browserele curente – inclusiv cele mod text. HTML 2.0 reflectă concepţia originală a
HTML ca un limbaj de marcare independent de obiectele existente pentru aşezarea lor în
pagină, în loc de a specfica exact cum ar trebui să arate acestea. Daca doriţi să fiţi siguri că
toţi vizitatorii vor vedea paginile aşa cum trebuie, folosiţi tagurile HTML 2.0.
Specificaţia HTML 3.0, Enunţată în 1995, a încercat să dezvolte HTML 2.0 prin
adăugarea unor facilităţi precum tabelele şi un mai mare control asupra textului din jurul
imaginilor. Deşi unele din noutăţile HTML 3.0 erau deja folosite de autorii de browsere,
multe nu erau încă. În unele cazuri, taguri asemănătoare implementate de autorii de
browsere au devenit mai răspândite decît tagurile ”oficiale”. Specificaţia HTML 3.0 acum
a expirat, deci nu mai este un standard oficial.
În mai 1996, W3C a scos pe piaţă, specificaţia HTML 3.2 care era proiectată să
reflecte şi să standardizeze practicile acceptate la scară largă. Deci, HTML 3.2 include
tagurile HTML 3.0, ce erau adoptate de autorii de browsere ca Netscape şi Microsoft plus
extensii HTML răspîndite. În, Bilanţul asupra HTML W3C recomanda ca providerii de
informaţii să utilizeze specificaţia HTML 3.2. Versiunile curente ale majorităţii
browserelor ar trebui să suporte toate, sau aproape toate aceste taguri.
De asemenea exista extensii Netscape şi Microsoft care nu fac parte din specificaţia
HTML 3.2, ori pentru că sunt mai puţin utilizate, ori au fost omologate după apariţia
HTML 3.2. Pentru că navigatorul Netscape a fost printre primele browsere care suporta
anumite taguri HTML 3.0, iar Netscape deţine în jur de 70% din piaţa de browsere, mulţi
au crezut eronat ca toate extensiile Netscape (incluzînd taguri ca şi facilităţi cu ferestrele)
fac parte din HTML 3.0 sau HTML 3.2.
La momentul apariţiei acestui tutorial, HTML 4.0 este larg utilizat şi au fost deja
publicate specificaţiile HTML 4.01.
Documentele HTML sînt documente în format ASCII şi prin urmare pot fi create cu
orice editor de texte. Au fost insa dezvoltate editoare specializate care permit editarea într-
un fel de WYSIWYG deşi nu se poate vorbi de WYSIWYG atîtă 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 patra decît parţial
formatările anterioare deoarece limbajul HTML este încă incomplet.
2
2. Primii paşi
Orice document HTML începe cu notaţia <html> şi se termină cu notaţia </html>.

Aceste ”chestii” se numesc în literatura de specialitate ”TAG-uri”. Prin convenţie, toate
informaţiile HTML încep cu o paranteză unghiulară deschisă ”<” şi se termină cu o
paranteză unghiulară închisă ”>”. Tag-urile între aceste paranteze transmit comenzi către
browser pentru a afişa pagina într-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.
Î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.
O etichetă poate fi scrisă atît cu litere mici, cît şi cu litere mari. Adică <HTML> =
<HtmL> = <html>. Caracterele ”spaţiu” şi ”CR/LF” ce apar între etichete sunt ignorate
de către browser. Deci un prim document HTML ar fi ceva de genul acesta:
<html>
<head> </head>
<body>
</body>
</html>
Aşa arată primul document HTML. Copiaţi-l folosind Copy / Paste într-un fişier
nou şi salvaţi-l ca PRIM.HTM sau PRIM.HTML. Apoi porniţi Netscape Navigator sau
Internet Explorer, daţi CTRL-O şi introduceţi calea spre fişier. Daţi OK şi ... nimic. Să
nu disperam ... vom adăuga primele elemente la pagina noastră. În primul rînd, 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 plus, în secţiunea <body>...</body> putem scrie texte cît dorim. Daca nu

întîlnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple şi le va
afişa pe ecran. Sa vedem o noua versiune a paginii noastre:
<html>
<head>
<title> Aceasta este prima mea pagina de Web
</title>
</head>
<body>
Bine ati venit în pagina mea de Web!
3
</body>
</html>
Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-

ului. 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 intr-o pagină browser-ul va afişa într-un singur
rînd, întrucît caracterele ”CR/LF” sunt ignorate de browser. Trecerea pe o linie noua se
face la o comandă explicita, care trebuie să apară în pagina html. Această comanda este
marcajul <br> (de la ”line break” - întrerupere de linie).
Folosind aceleaşi operaţii ca mai sus, vizualizaţi noua pagina! Veţi vedea textul ce
apare în fereastra navigatorului. În plus, pagina dvs. va avea un titlu nou, cel introdus de
dvs.
<html>
<head>
<title> Titlul paginii </title>
</head>
<body>
Bine ati venit în <br> pagina mea de Web!
</body>
</html>
Blocuri preformatate
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>.
<html>
<head>
<title> Bloc preformatat </title>
</head>
<body> <pre>
Prima linie
A doua linie
A treia linie
</pre> </body>
</html>
Culoarea de fond
O culoare poate fi precizata în două moduri:
4
• Printr-un nume de culoare. 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.
• Prin construcţia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre
hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E,
f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizează prin intermediul unui atribut al etichetei

<body>. Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei
<body>, de exemplu: <body bgcolor = culoare>. Următorul exemplu realizează o pagina
cu fondul de culoare gri.
<html>
<head>
<title> Culoare de fond </title>
</head>
<body bgcolor = gray>
O pagina Web cu fondul GRI!
</body>
</html>
Culoarea textului
Acest lucru se face prin intermediul atributului text al etichetei <body> după
sintaxa <body text = culoare>. În următorul exemplu textul are culoarea roşie.
<html>
<head>
<title> Culoare textului </title>
</head>
<body text = red>
Un text de culoare rosie.
</body>
</html>
O eticheta poate avea mai multe atribute. De exemplu, o eticheta cu trei atribute
arata astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.
Următorul exemplu prezintă o pagină cu fondul de culoare albastră şi textul de culoare
galbenă.
<html>
<head>
<title> Atribute multiple </title>
</head>
<body bgcolor = blue text = yellow>
Fond de culoare albastra şi text de culoare galbena.
5
</body>
</html>
Textul afişat este caracterizat de următoarele atribute: Mărime (size), Culoare

(color), Font (style). Acestea sunt atribute ale etichetei <basefont>. Este o eticheta
singulară (fără delimitator de sfîrşit de bloc).
<basefont size = număr color = culoare style = font>
unde:
• număr – poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic şi 7 pentru fontul
cel mai mare);
• culoare – este o culoare precizată prin nume sau printr-o construcţie RGB;
• font – poate fi un font generic ca ”serif”, ”san serif”, ”cursive”, ”monospace”,
”fantasy” sau un font specific instalat pe calculatorului clientului, ca ”Times New
Roman”, ”Helvetica” sau ”Arial”. Se acceptă ca valoare şi o lista de fonturi separate
prin virgula, de exemplu: ”Times New Roman, serif, monospace”.
Domeniul de valabilitate al caracteristicelor precizate de această etichetă se întinde

de la locul în care apare eticheta pînă la sfîrşitul paginii sau pana la următoarea eticheta
<basefont>.
Daca acest atribut lipseşte atunci textul din pagina Web are atribute prestabilite sau
atribute precizate de browserul utilizat. Atributele prestabilite sunt: size = 3, color =
black, style = ”Times New Roman”.
Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se

poate face cu ajutorul a două atribute ale etichetei <body>:
• leftmargin (stabileşte distanţa dintre marginea stîngă a ferestrei browserului şi

marginea stîngă a conţinutului paginii);
• topmargin (stabileşte distanta dintre marginea de sus a ferestrei browserului şi
marginea de sus a conţinutului paginii );
<html>
<head>
<title> Configurarea textului şi stabilirea marginii
</title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br> <basefont style
= "Arial" color = "Blue" size = "6">
Textul este scris cu fontul "Arial", culoare
albastru şi marime 6. </body>
</html>
6
Stiluri pentru blocurile de text
Pentru ca un bloc de text să apară în pagină evidenţiat (cu caractere aldine), trebuie
inclus intre delimitatorii <b>...</b> (b vine de la ”bold” = îndrăzneţ). Pentru ca un text să
fie scris cu caractere mai mari cu o unitate decît cele curente acesta trebuie inclus într-un
bloc delimitat de etichetele <big>...</big>. Pentru ca un text sa fie scris cu caractere mai
mici cu o unitate decît cele curente acesta trebuie inclus într-un bloc delimitat de etichetele
<small>...</small>. Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus
într-un bloc delimitat de etichetele <i>...</i> (i vine de la ”italic”).
Pentru a insera secvenţe de text aliniate ca indice (sub-script) sau ca exponent

(super-script), aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv
<sup>...</sup>.
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>.
În exemplul următor vom utiliza toate etichetele menţionate anterior.
<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 <sup> sus </sup> este
superscript iar <sub> jos </sub> este subscirpt.
<br>
<strike> Aceasta linie este în intregime sectionata
de o linie orizontala. </strike> <br>
In aceasta linie urmatorul cuvant este <u> subliniat
</u>, iar cuvantul <s> strike </s> sectoinat.
</body>
</html>
Stiluri fizice şi logice
7
Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite şi
stiluri fizice întrucît nu s-a acordat nici o atenţie semnificaţiei informaţiei conţinute de
aceste blocuri. Î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 evidenta ( prin silul cursiv ) fragmente de text se utilizeaza

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şina de scris):
• <code>...</code> ( ”code” înseamnă cod sau sursa);

• <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 eticheta funcţionează numai în browserul Netscape Communicator.
<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 DOS:
<kbd> copy c:\windows\* c:\temp <kbd> <br>
<tt> Asa scrie un teleprinter </tt> <br>
Acest cuvant clipeste <blink> Blink </blink>
</body>
</html>
Exemplul următor ilustrează că etichetele pot fi imbricate.
• un fragment de text poate fi scris cu aldine şi cursive în acelaşi timp;

• pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mărit
şi cursiv.
8
Blocul <q>...</q> permite inserarea in-line a citatelor. Aceste citate sunt afişate de
către browser cu caractere cursive. ”q” vine de la ”in-line quotation” (citate inserate in-
line). Şi blocurile ”q” pot fi imbricate.
<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>
9
3. Fonturi
Un font este caracterizat de următoarele atribute:
• culoare (stabilită prin atributul color);

• tipul sau stilul (stabilit prin atributul face);
• mărimea (definită prin atributul size);
• mărimea în puncte tipografice (stabilită prin atributul point-size);
• grosime (definită prin atributul weight).
Toate aceste atribute aparţin etichetei, care permite inserarea de blocuri de texte
personalizate.
Culori
O culoare poate fi precizată în două moduri:
1. Printr-un nume de culoare.

2. Printr-o constanta conform standardului de culoare RGB (Red, Green, Blue). O
astfel de constanta se formează astfel: #rrggbb, unde r, g şi b sunt cifre
hexazecimale.
Culoarea fontului
Pentru a scrie un fragment de text cu caractere de o anumita culoare se încadrează

acest fragment intre delimitatorii ... avînd stabilit atributul color la valoarea necesara. De
exemplu:
fragment de text de culoare roşie
Familia fontului
Pentru a scrie un text într-o pagina pot fi folosite mai multe fonturi (stiluri de
caractere). Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate
calculatoarele utilizatorilor: serif, sans serif, cursive, monospace şi fantasy. Tipul de font
necesar poate fi stabilit prin atributul face al etichetei. Pot fi introduse mai multe fonturi
separate prin virgula.
În acest caz browserul va utiliza primul font pe care îl cunoaşte.
<html>
<head>
<title> Culoarea şi familia fontului </title>
</head>
<body>
Aceste linie este scrisa cu caractere normale.
10
<br> <font color = "red"> Aceasta linie este rosie.
</font>
<br> Aici <font color = "green"> fiecare </font>
<font color = "blue"> cuvant </font>
<font color = "yellow"> are </font>
<font color = "cyan"> alta </font>
<font color="#3478fa">culoare.</font>
<font face = "monospace"> Linie scrisa cu caractere
monospatiate. </font>
<br> <font face = "arial"> Linie scrisa cu caractere
arial. </font>
</body>
</html>
Mărimea fontului
Pentru a stabili mărimea unui font se utilizează atributul size al etichetei. Valorile
acestui atribut pot fi:
• 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font şi 7 pentru cel mai mare);

• +1, +2, etc. pentru a mări dimensiunea fontului cu 1, 2, etc. faţă de valoarea curentă;
• -1, -2, etc. pentru a micşora dimensiunea fontului cu 1, 2, etc. fata de valoarea
curenta.
Mărimea unui font poate fi stabilită exact cu ajutorul atributului point-size. Valorile
acceptate de acest atribut pot fi orice numere naturale pozitive. Numărul astfel precizat
reprezintă mărimea fontului în puncte tipografice. Acest atribut funcţionează numai cu
Netscape Communicator.
<html>
<head>
<title> Marimea fontului
</title>
</head>
<body>
<font size = "5"> Fonturi de marime 5. </font>
<basefont size = "4"> Fonturi de marime 4. </font>
<font size = "-3"> Fonturi de marime 1. </font>
<font size = "+2"> Fonturi de marime 6. </font>
<font point-size = "30"> Fonturi de marime 30 pt
(numai cu Netcape Communicator). </font>
<font point-size = "50"> Fonturi de marime 50 pt
(numai cu Netcape Communicator).
11
</font>
</body>
</html>
Grosimea unui font
Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei.

Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 şi 900
(100 pentru fontul cel mai subţire şi 900 pentru cel mai gros).
<html>
<head>
<title> Grosimea fontului </title>
</head>
<body>
<font weight = "100"> Fonturi de grosime 100.</font>
</body>
</html>
12
4. Blocuri de text
Aceste etichete nu se referă la particularităţile caracterelor ce compun textul, ci la

funcţiile pe care le poate avea un bloc de text în cadrul paginii Web. Toate aceste etichete
produc automat trecerea la un rînd nou şi adăugarea unui spaţiu suplimentar.
Inserarea unei adrese
Daca într-o pagina web trebuie inclusă o adresa, atunci putem utiliza facilităţile
oferite de o eticheta dedicata: <address>...</address>.
<html>
<head>
<title> Adresa </title>
</head>
<body>
Adresa institutiei noastre este :<address> Colegiul
Universitar <br>
Str: Victor Babes, Nr:62/A <br>
Baia Mare Romania </address>
</body>
</html>
Indentarea unui bloc
Pentru ca un bloc de text sa fie indentat (marginea din stînga a textului sa fie
deplasată la dreapta la o anumită distanţă faţă de marginea paginii), acesta trebuie inclus
între etichetele <blockquote>...</blockquote>.
<html>
<head>
<title> Indentarea unui bloc
</title>
</head>
<body>
Textul ce urmeaza este indentat:
<blockquote>
Aceste etichete nu se refera la particularitatiile
caracterelor ce compun textul, ci la functiile pe
care le poate avea un bloc de text în cadrul paginii
Web. Toate aceste etichete produc automat trecerea
la un rand nou şi adaugarea unui spatiu suplimentar.
</blockquote>
</body>
</html>
13
Blocul preformatat
Într-un bloc <pre>...</pre>, semnificaţia marcajelor HTML se păstrează. Blocul

<pre>...</pre> este indicat pentru a insera rînduri vide (spaţiu între rîndurile succesive).
Caracterul ”spaţiu” poate fi luat în considerare de browser daca este inserat explicit prin
.
<html>
<head>
<title> Bloc preformatat </title>
</head>
<body>
Orar: <pre>
Ora/Ziua Luni Marti Miercuri
8:00 Romana Matematica Sport

9:00 Geografie Istorie Fizica
</pre>
</body>
</html>
Într-un fişier HTML, caracterele ”<” şi ”>” au o semnificaţie specială pentru

browser. Ele încadrează comenzile şi atributele de afişare a elementelor într-o pagină.
Dacă dorim ca un fragment de text sa conţină astfel de caractere, acest fragment trebuie
încadrat de una dintre perechile de etichete:
• <xmp>...</xmp> (80 de caractere pe rînd);

• <listing>...</listing> (120 de caractere pe rînd ).
Aceste marcaje interpretează corect caracterele ”spaţiu”, ”eticheta” şi ”CR/LF”.

Textul afişat în pagina este monospaţiat.
<html>
<head>
<title> xmp şi listing </title>
</head>
<body>
Un fisier html standard arata astfel: <xmp> <html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
14
</html> </xmp> </body>
</html>
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nouă şi permite:
• inserarea unui spaţiu suplimentar înainte de blocul paragraf;

• inserarea unui spaţiu suplimentar după blocul paragraf, daca se foloseşte
delimitatorul </p> (acesta fiind opţional);
• alinierea textului cu ajutorul atributului align, avînd valorile posibile ”left”, ”center”
sau ”right”.
<html>
<head>
<title> Blocuri paragraf </title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit
paragraful este aliniat la stanga).
<p align = "right"> Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta. Paragraf aliniat la dreapta. Paragraf
aliniat la dreapta. Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta.
<p align = "center"> Paragraf aliniat în centru.
Paragraf aliniat în centru. Paragraf aliniat în
centru. Paragraf aliniat în centru. Paragraf aliniat
în centru. Paragraf aliniat în centru. Paragraf
aliniat în centru.
</body>
</html>
Blocuri de titlu
Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se referă la un bloc de text şi
trebuie însoţite de o eticheta de încheiere similara. Aceste etichete accepta 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.
<html>
<head>
<title> Blocuri de titlu </title>
15
</head>
<body>
<h1 align = "center"> Titlu de marime 1 aliniat în
centru
</h1>
<h2 align = "right"> Titlu de marime 2 aliniat la
dreapta.
</h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit)
</h4>
</body>
</html>
Linii orizontale
Într-o pagină Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul
etichetei <hr>. Pentru a configura o linie orizontala se utilizează următoarele atribute ale
etichetei <hr>:
• align permite alinierea liniei orizontale. 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.
<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>
16
Blocuri <center>
Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele

pe care le conţine.
<html>
<head>
<title> Linii orizontale </title>
</head>
<body>
<center> <hr width = 10%> <hr width = 40%> <hr width
= 70%> <hr width = 100%> <hr width = 70%> <hr width
= 40%> <hr width = 10%> </center>
</body>
</html>
Blocuri <nobr>
Blocul de text cuprins intre etichetele <nobr>...</nobr> va fi afişat pe o singura

linie.
<html>
<head>
<title> Blocul <nobr> </title>
</head>
<body>
<nobr> O singura linie. O singura linie. O singura
linie. O singura linie. O singura linie. O singura
linie.
</nobr>
</body>
</html>
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 centrala);
• ”right” (aliniere la dreapta).
17
Un bloc <div>...</div> poate include alte subblocuri. În acest caz, alinierea
precizata 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.
<html>
<head>
<title> Blocul <div> </title>
</head>
<body>
Aceasta linie este o linie normala. Urmatorul bloc
este aliniat la dreapta.
<div align = "right">
O singura linie. O singura linie. O singura linie. O
singura linie. <br>
singura linie. <br>
singura linie. <br>
</div>
<div align = "center">
Bloc aliniat pe centru. Bloc aliniat pe centru. <br>
</div>
</body>
</html>
18
5. Imagini
Imaginile sunt stocate în fişiere cu diverse formate. Formatele acceptate de

browsere pentru fişierele imagine sunt:
• GIF (Graphics Interchange Format) cu extensia .gif;

• JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
• XPM (X PixMap) cu extensia .xmp;
• XBM (X BitMap) cu extensia .xbm;
• BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
• TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai răspîndite formate sunt GIF (8biti pentru o culoare, 256 culori posibile) şi
JPEG (24biti pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini
URL (”Uniform Resourse Locator” = identificator unic al resursei) este un standard

folosit în identificarea unică a unei resurse în Internet. Toate imaginile cu care vom lucra
vor avea adresa URL exprimată în funcţie de directorul ce conţine documentul HTML
care face referire la imagine.
Pentru a insera o imagine intr-o pagină, se utilizează eticheta <img> (de la ”image”
= imagine). Pentru a putea fi identifica imaginea care va fi inserata, se utilizează un atribut
al etichetei şi anume src (de la ”source” = sursă). Daca imaginea se află în acelaşi director
cu fişierul HTML care face referire la imagine, atunci adresa URL a imaginii este formată
numai din numele imaginii, inclusiv extensia.
<html>
<head>
<title> O pagina cu imagine </title>
</head>
<body>
O pagina care contine o imagine.
<img src = "imagine.jpg"> Text dupa imagine.
</body>
</html>
Chenarul şi dimensionarea unei imagini
Dacă doriţi sa adăugaţi un chenar în jurul imaginii, folosiţi atributul border al

etichetei <img>. Valorile acestor atribute sunt numere întregi pozitive.
O imagine are anumite dimensiuni pe orizontală şi verticală, stabilite în momentul

creării ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate în momentul afişării ei
în pagina Web.
19
Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul
atributelor width şi height.
<html>
<head>
<title> Imagine cu chenar şi marit </title>
</head>
<body> O imagine cu chenar şi de 200 pixeli X 15 %
<img src = "imagine.jpg" border = "5" width = "350"
height = "25%"> Text dupa imagine.
</body>
</html>
Alinierea unei imagini
Alinierea unei imagini se poate face prin intermediul atributului align care poate lua
următoarele valori:
• ”left” – aliniere la stînga; celelalte componente sunt dispuse în partea dreapta;

• ”right” – aliniere la dreapta; celelalte componente sunt dispuse în partea stînga;
• ”top” – aliniere deasupra; partea de sus a imaginii se aliniază cu partea de sus a
textului ce precede imaginea;
• ”middle” – aliniere la mijloc; mijlocul imaginii se aliniază cu linia de baza a textului
ce precede imaginea;
• ”bottom” – aliniere la baza; partea de jos a imaginii se aliniază cu linia de baza a
textului.
<html>
<head>
<title> Alinierea unei imagini </title>
</head>
<body> Alinieri: <br> Pe verticala:
<img src = "imagine.jpg" align = "top">
La mijloc: <img src = "imagine.jpg" align ="middle">
Jos: <img src = "imagine.jpg" align = "bottom"> Text
dupa imagine.
</body>
</html>
Alinierea textului în jurul imaginii
Atributele hspace şi vspace precizează distanţa în pixeli pe orizontală, respectiv pe

verticală, dintre imagine şi restul elementelor din pagină.
Atributul alt admite ca valoare un text care va fi afişat în locul imaginii.
20
<html>
<head>
<title> Alinierea unei imagini </title>
</head>
<body> Imagine aliniat la stanga inconjurata de text
la distanta de 30 de pixeli.
<br><br> Text inainte de imagine. Text inainte de
imagine. Text inainte de imagine. Text inainte de
imagine. <br>
<img src = "imagine.jpg" align = "left" hspace ="30"
vspace = "30" alt = "Universitatea de Stat din
Tiraspol"> Text dupa imagine. Text dupa imagine.
Text dupa imagine. Text dupa imagine. Text dupa
imagine. Text dupa imagine. Text dupa imagine. Text
dupa imagine. Text dupa imagine. Text dupa imagine.
</body>
</html>
Imagini pentru fondul unei pagini
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. În acest scop se
foloseşte atributul background al etichetei, avînd ca valoare adresa URL a imaginii.
Imaginea se multiplică pe orizontala şi pe verticala pînă umple întregul ecran.
O legatura (link) întroduce în pagina Web o zonă activă. Efectuînd click cu butonul
mouse-ului pe aceasta zonă în browser se va încarcă o alta pagina. Pentru a utiliza
imaginea ”imagine.jpg” drept legatură catre pagina index.html utilizam sintaxa:
<a href = "index.html"> <img src="imagine.jpg"> </a>
În mod prestabilit imaginea utilizată pe post de zona activa este înconjurata de un

chenar avînd culoarea unei legături. Daca stabilim pentru atributul border al etichetei
<img> 0 acest chenar dispare.
<html>
<head>
<title> Imagini folosite ca legaturi </title>
</head>
<body> Imagini folosite ca legaturi. <br>
Text inainte de imagine.
<a href = "index.html"> <img src = "imagine.jpg"
border = "0"> </a>
Text dupa imagine.
21
</body>
</html>
Utilizări speciale ale imaginilor
Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagina web. Printre
aceste utilizări speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor.

2. Simboluri speciale pentru elementele unei liste neordonate.
22
6. Legături
Legăturile (link-urile) reprezintă partea cea mai importantă a unei pagini Web. Ele
transformă un text obişnuit în hipertext sau hiperlegatură, care permite trecerea rapida de
la o informaţie aflată pe un anumit server la alta informaţie memorata pe un alt server aflat
oriunde în lume. Legăturile sunt zone active într-o pagina Web, adică zone de pe ecran
sensibile la apăsarea butonului stîng al mouse-ului.
O legătura către o pagina aflată în acelaşi director
O legătura către o pagină aflată în acelaşi director se formează cu ajutorul etichetei

<a> (de la ”anchor” = ancoră). Pentru a preciza pagina indicată de legătură se utilizează
un atribut al etichetei <a> numit href, care ia valoare numele fişierului HTML aflat în
acelaşi director. Zona activa care devine sensibila la apăsarea butonului stîng al mouse-
ului este formată din textul cuprins intre etichetele <a>...</a>. Prezenţa etichetei de sfîrşit
</a> este obligatorie.
<html>
<head>
<title> Comutarea intre doua pagini </title>
</head>
<body>
<h3> Pagina 1 </h3>
<a href = "Pagina2.html">
Link catre pagina 2 </a>
</body>
</html>
<html>
<head>
<title> Comutarea intre doua pagini </title>
</head>
<body>
<h3>Pagina 2 </h3>
<a href="Pagina1.html">
Link catre pagina 1 </a>
</body>
</html>
O legătura către o pagină aflată pe acelaşi disc local
Daca pagina referită se afla pe acelaşi disc local, dar într-un alt director atunci
pentru a preciza poziţia ei în structura de directoare se poate folosi adresarea relativa.
<html>
<head>
23
<title> Comutarea intre doua pagini aflate pe
acelasi disc local </title>
</head>
<body>
<h3> Pagina 3 </h3>
<a href="../../exemple/list/Pagina2.html">
Link catre o pagina cu liste </a>
</body>
</html>
O legătura către un site particular
În exemplul următor se utilizează adresa URL www.netscape.com care încarcă

pagina de start din site-ul firmei Netscape Corporation.
<html>
<head>
<title> Link catre site-ul firmei Netscape </title>
</head>
<body>
<h3> Link catre site-ul firmei Netscape </h3>
<a href = "http://www.netscape.com">
Netscape Corporation </a>
</body>
</html>
Ancore
Într-o pagina foarte lungă pot exista puncte de reper către care se definesc legături.
O ancoră se defineşte de asemenea prin eticheta <a>. Pentru a defini ancora se utilizează
atributul name care primeşte ca valoare un nume atribuit ancorei (de exemplu ”leg1”).
Pentru a insera o legătura către ”leg1” definită în aceeaşi pagină se utilizează

eticheta <a> avînd atributul href de valoare ”#leg1”. Pentru a introduce o legătură către o
ancoră definita în alt document (altă pagină) aflat în acelaşi director, atributul href
primeşte o valoare de forma ”nume_fisier.html#nume_ancora”.
<html>
<head>
<title> Ancore definite în acelasi document şi în
alt document </title>
</head>
<body>
<h3> Ancore definite în acelasi document şi în alt
document </h3>
<a href = "#Ancora1">
24
Link catre ancora 1 <br>
<a href="Pagina2.html#Ancora2">
Link catre o ancora din alt document </a>
<br> 1 <br> 2 <br> 3 <br> 4 <br> <br> 6 <br> 7 <br>
8 <br> 9 <br> 10 <br> 11 <br> 12 <br> 13 <br> 14
<br> 15 <br> 16 <br> 17 <br> 18 <br> 19 <br> 20 <br>
21 <br> 22 <br> 23 <br> 24 <br>
<a name="Ancora1"> Ancora 1
</body>
</html>
Ancore definite prin atributul id
Atributul id 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 .
Exemplul anterior arata astfel cu eticheta id:
<html>
<head>
<title> Ancore definite în acelasi document şi în
alt doocument </title>
</head>
<body>
<h3>Ancore definite în acelasi document şi în alt
document </h3>
<a href="#Ancora1">
Link catre ancora 1 </a> (numai cu IE 5.0 sau NN
4.7)<br>
<a href="Pagina2.html#Ancora2">
Link catre o ancora din alt document </a>
<br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7
<br> 8 <br> 9 <br> 10 <br> 11 <br> 12 <br> 13 <br>
14 <br> 15 <br> 16 <br> 17 <br> 18 <br> 19 <br> 20
<br> 21 <br> 22 <br> 23 <br> 24 <br>
<a id="Ancora1"> Ancora 1
25
</body>
</html>
Alegerea culorilor pentru legături
În mod prestabilit se utilizează trei culori pentru legături:
• o culoare pentru legăturile nevizitate (nu s-a efectuat nici un clic pe ele);
• o culoare pentru legăturile vizitate (s-a efectuat cel puţin un clic pe ele);
• o 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 = Pagina1.html> Link catre pagina 1 <br>
<a href = Pagina2.html> Link catre pagina 2 <br>
<a href = Pagina3.html> Link catre pagina 11 </a>
</body>
</html>
Utilizarea poştei electronice
Într-o pagina 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 adresa e-mail valida.
Pentru ca exemplul următor sa funcţioneze trebuie ca:

• la calculator sa fie instalată o aplicaţie de expediere a mesajelor electronice
(Outlook Express pentru Windows, Pine pentru Unix);
• adresa sa fie valida şi calculatorul sa fie conectat la Internet.
26
<html>
<head>
<title> Expediere de mesaje electronice </title>
</head>
<body>
<h3> Expediere de mesaje electronice </h3> <br>
<a href = "mailto:Cornel@nm.ru">
Mesaje catre autorul paginii
</body>
</html>
Legături către fişiere oarecare
O pagina Web poate conţine legături către orice tip de fişiere aflate pe orice servere
din Internet. Pentru aceasta se utilizează eticheta <a> avînd valoarea atributului href egală
cu adresa URL a fişierului destinaţie.
Atunci cînd se efectuează clic pe legătura din exemplul următor browserul se

deschide o caseta de dialog – File download – care va permite:
• sa salvaţi pe discul local fişierul;

• sa lansaţi în execuţie aplicaţia capabila sa interpreteze corect fişierele de tipul
respectiv
<html>
<head>
<title> Legaturi catre fisiere oarecare </title>
</head>
<body>
<h3> Legaturi catre fisiere oarecare </h3> <br>
<a href = "fisier.zip">
Link catre fisierul fisier.zip
</body>
</html>
Atributul title
Atributul title aparţine etichetei <a> şi comanda apariţia unei mici ferestre în pagina
Web cînd mouse-ul se află pe o legătura, fereastră în care este afişata valoarea data acestui
atribut. Acest atribut are astfel menirea de a furniza informaţii suplimentare despre
semnificaţia unei legături.
<html>
<head>
<title> Atributul title </title>
27
</head>
<body>
<h3> Atributul title </h3> <br>
<a href = "mailto:Cornel@nm.ru" title = "Adresa mea
de e-mail">
Mesaje catre autorul paginii
</body>
</html>
Legături către fişiere de sunet
Sunetele pot fi stocate în fişiere în diverse formate:
• AU/m-law cu extensia .au;

• AIFF/AIFC cu extensiile .aiff, .aif;
• WAVE/WAV cu extensia .wav;
• MPEG Audio cu extensia .mpeg2, sau .mp2;
• MIDI cu extensia .mid sau .midi;
O legătura către un fişier de sunet se realizează folosind eticheta <a> destinata

legăturilor către orice tip de fişiere, unde atributul href va avea valoarea egala cu adresa
URL a fişierului de sunet. De exemplu:
<a href = "numefisier.au"> Link catre sunet </a>
Legături către fişiere videoclipuri
Videoclipurile sunt stocate în fişiere de diverse formate. Formatele şi extensiile

corespunzătoare pentru fişierele utilizabile în paginile Web sunt următoarele:
• MPEG cu extensia .mpeg sau .mpg;

• QuickTime cu extensia .mov;
• AVI cu extensia .avi.
O legătura către un fişier de sunet se realizează folosind eticheta <a> destinată

legăturilor către orice tip de fişiere, unde atributul href va avea valoarea egala cu adresa
URL a fişierului videoclip. De exemplu:
<a href = "numefisier.avi"> Link catre videoclip</a>
28
7. Liste
Unul din cele mai obişnuite elemente din documentele cu mai multe pagini este un
set de definiţii, referinţe sau indexuri. Glosarele sunt exemple clasice în acest sens;
cuvintele sunt listate în ordine alfabetică, urmate de definiţii ale termenilor respectivi. În
HTML, întreaga secţiune a unui glosar va fi gestionată printr-o listă de definiţii, care este
inclusă într-o pereche de marcaje de listă de definiţii: <dl>...</dl> (de la ”definition list” =
listă de definiţii).
Observaţii:
- Un termen al listei este iniţiat de eticheta <dt> (de la ”definition term” =

termen definit);
- Definiţia unui termen este iniţiata de eticheta <dd> (de la ”definition
description” = descrierea definiţiei);
- Definiţia unui termen începe pe o linie nouă şi este indentată;
<html>
<head> <title> listex_1 </title> </head>
<body> <h1 align = center> O lista de definitii
</h1> <hr>
<dl>
Glosar de termeni de World Wide Web
<dt> <b> hypertext </b>
<dd>- o interconectare Web de informatii de tip
text, în care orice cuvant sau fraza poate face
legatura catre un alt punct din document sau catre
un alt document
<dt> <b> date </b>
<dd>- fluxul nesfarsit de materiale care apar pe
Internet, spre deosebire de informatii care sunt
date cu un anumit inteles sau valoare
<dt> <b> informatie </b>
<dd>- sub-setul de date care are efectiv
semnificatie şi care este util la momentul curent
</dl>
</body>
</html>
Liste neordonate
O listă neordonată este un bloc de text delimitat de etichetele corespondente

<ul>...</ul> (”ul” vine de la ”unordered list” = lista neordonată). Fiecare element al listei
este iniţiat de eticheta <li> (list item).
29
Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei începe pe
un rînd nou.
<html>
<body> <h1 align = center> O lista neordonata </h1>
<hr>
<ul> Culori uzuale disponibile prin nume
<li> Black <li> White <li> Red <li> Green <li> Blue
<li> Yellow <li> Purple <li> Aqua
</ul>
</body>
</html>
Tag-urile <ul> şi <li> pot avea un atribut type care stabileşte caracterul afişat în
faţă fiecărui element al listei. Valorile posibile al acestui atribut sunt:
o ”circle” (cerc)
• ”disc” (disc plin) (valoarea prestabilită);
 ”square” (pătrat).
Listele neordonate pot fi imbricate pe mai multe niveluri.
<html>
<body> <h1 align = center> O lista neordonata de
liste neordonate </h1> <hr>
<ul> Elemente şi atribute a unei pagini HTML
<li> Frameset <ul> Atribute: <li> cols <li> rows
<li> border </ul>
<li> Frame <ul> Atribute: <li> src <li> name <li>
scrolling </ul>
</ul>
</body>
</html>
Liste ordonate
O listă ordonată de elemente este un bloc de text delimitat de etichetele

corespondente <ol>...</ol> (”ol” vine de la ”ordered list” = listă ordonată). Fiecare
element al listei este iniţiat de eticheta <li> (list item).
Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei începe pe
un rînd nou.
30
<html>
<body> <h1 align = center> O lista ordonata </h1>
<hr>
<ol> Culori uzuale disponibile prin nume
</ol>
</body>
</html>
Tag-urile <ol> şi <li> pot avea un atribut type care stabileşte tipul de caractere
utilizate pentru ordonarea listei.
Valorile posibile sunt:
• ”A” pentru ordonare de tipul A, B, C, D etc. (litere mari);

• ”a” pentru ordonare de tipul a, b, c, d etc. (litere mici);
• ”I” pentru ordonare de tipul I, II, III, IV etc. (cifre romane mari);
• ”i” pentru ordonare de tipul i, ii, iii, iv etc. (cifre romane mici);
• ”1” pentru ordonare de tipul 1, 2, 3, 4 etc. (cifre arabe - opţiune
prestabilita );
Următorul exemplu este o listă ordonată cu cifre romane:
<html>
<body> <h1 align = center> O lista ordonata cu cifre
romane </h1> <hr>
<ol type = "I"> Culori uzuale disponibile prin nume
</ol>
</body>
</html>
Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţiala a secvenţei
de ordonare. Valoarea acestui atribut trebuie sa fie un număr întreg pozitiv.
Următorul exemplu este o listă ordonată cu litere mari, începînd de la valoarea C.
<html>
<body> <h1 align = center> O lista ordonata cu
litere mari, incepand de la valoarea C </h1> <hr>
<ol type = "A" start = "3"> Culori uzuale
31
disponibile prin nume
<li> Red <li> Green <li> Blue <li> Yellow <li>
Purple <li> Aqua
</ol>
</body>
</html>
Tag-ul <li> poate avea un atribut value care stabileşte valoare pentru elementul
respectiv al listei. Valoarea acestui atribut trebuie sa fie un număr întreg pozitiv (vezi
următorul exemplu).
<html>
<body> <h1 align = center> O lista ordonata avand
itemi setati individual </h1> <hr>
<ol start = "3"> Repetati urmatorii pasi ai
algoritmului
<li> salvati fisierul;
<li value = "6"> incarcati fisierul în browser;
<li> schimbati browserul utilizat
<li> incarcati din nou fisierul
</ol>
</body>
</html>
Listele ordonate pot fi imbricate între ele sau cu liste neordonate, ca în exemplul
următor.
<html>
<body> <h1 align = center> O lista ordonata de liste
ordonate şi neordonate </h1> <hr>
<ol> Un sistem informatic include:
<li> Hardware:
<ol>
<li> placa de baza
<li> procesor
<li> memorie
<li> harddisk
</ol>
<li> Software:
<ul>
<li> Linux
<li> Windows
<li> OS/2
<li> Unix
32
</ul>
<li> Software de aplicatie:
<ul type = "disc">
<li> VisualC++
<li> Java
<li> SQL
<li> CorelDraw
</ul>
</ol>
</body>
</html>
O listă de meniuri este un bloc delimitat de etichete corespondente <menu> ...

</menu>. Fiecare element al listei este iniţiat de eticheta <li> (list item). Cele mai multe
browsere afişează lista de meniuri ca pe o listă neordonată.
O listă de directoare este un bloc delimitat de etichete corespondente <dir>...</dir>

(de la ”director”). Fiecare element al listei este iniţiat de eticheta <li> (list item). Cele mai
multe browsere afişează lista de directoare ca pe o listă neordonată.
(Nu se recomandă utilizarea acestor tipuri de liste).
Utilizări speciale ale listelor
Daca într-o listă, în loc de elementele acesteia introduse prin <li>, se inserează un
bloc de text, aceasta va fi indentat (întocmai ca elementele unei liste).
<html>
<body> <h1> Un bloc de text indentat </h1> <hr>
<ol>
Un bloc de text indentat. Un bloc de text indentat.
Un bloc de text indentat.
</ol>
</body>
</html>
În exemplul următor lista de definiţii are itemii <dt> şi <dd> multipli.
<html>
<body> <h1 align = center> O lista de definitii
speciala </h1> <hr>
33
<dl> Program
<dt> <b> Luni </b>
<dt> <b> Marti </b>
<dt> <b> Miercuri </b>
<dd> <i> Ora 9.00. </i>Insciere
<dd> <i> Ora 11.00. </i>Audieri
<dd> <i> Ora 13.30. </i>Raspunsuri
</dl>
</body>
</html>
Ultimul exemplu este o listă neordonată personalizată care utilizează pe post de

elemente imagini şi texte.
<html>
<body> <h1> O lista personalizata </h1> <hr>
<ul> Tipuri de masini Volkswagen sunt: <br>
<img src = "images/reddot.gif"> Golf <br>
<img src = "images/reddot.gif"> Jetta <br>
<img src = "images/reddot.gif"> Passat <br>
<img src = "images/reddot.gif"> Bora <br>
<img src = "images/reddot.gif"> Corrado <br>
<img src = "images/reddot.gif"> Transporter <br>
</body>
</html>
34
8. Tabele
Tabelele ne permit să cream o reţea dreptunghiulara de domenii, fiecare domeniu

avînd propriile opţiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un

tabel este format din rînduri. Pentru a insera un rînd într-un tabel se folosesc etichetele
<tr>...</tr> (de la ”table row” = rînd de tabel). Folosirea etichetei de sfîrşit </tr> este
opţională.
Un rînd este format din mai multe celule ce conţin date. O celula de date se
introduce cu eticheta <td> ..</td>.
<html>
<head> <title> tabelex_1 </title> </head>
<body> <h1 align = center> Un tabel simplu format
din 4 linii şi 2 coloane </h1> <hr>
<table>
<tr> <td> cell 11 <td> cell 11
</table>
</body>
</html>
În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se
utilizează un atribut al etichetei <tabel> 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
prestabilita egala cu 1 pixel, o valoare egala cu 0 a grosimii semnifica absenta chenarului.
Cînd atributul border are o valoare nenulă chenarul unui tabel are un aspect
tridimensional.
<html>
<body> <h1 align = center> Un tabel simplu cu chenar
</h1> <hr>
<table border = "4">
35
</table>
</body>
</html>
Alinierea tabelului
Pentru a alinia un tabel într-o pagină Web se utilizează atributul align al etichetei
<table>, cu următoarele valori posibile: ”left” (valoarea prestabilita), ”center” şi ”right”.
Alinierea este importantă pentru textul ce înconjoară tabelul. Astfel :
• daca 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.
• daca 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.
<html>
<body> <h1 align = center> Un tabel aliniat la
dreapta </h1><hr> Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text
inainte de tabel.
<table border align = "right">
</table>
Text dupa tabel. Text dupa tabel. Text dupa tabel.
36
</body>
</html>
Distanţa dintre tabel şi celelalte elemente din pagina Web poate fi stabilită cu
ajutorul atributelor hspace şi vspace al etichetei <table>. Valoarea atributului hspace
poate fi orice număr pozitiv, inclusiv 0, şi reprezintă distanţa pe orizontala 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.
Aceste atribute funcţionează numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel
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.
Daca în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea:
<td>, <tr>, <table> (cu prioritate cea mai mica).
<html>
<body> <h1 align = center> Un tabel simplu colorat
</h1> <hr>
<table border = "3" bgcolor = "green">
<tr> <td> verde 11 <td bgcolor = "red"> rosu 11
<tr bgcolor = "blue"> <td> albastru 21 <td bgcolor =
"yellow"> galben 22
<tr bgcolor = "cyan"> <td> cell 31 <td> cell 32
<tr> <td> cell 41 <td bgcolor = "white"> cell 42
</table>
</body>
</html>
37
Culoarea textului din fiecare celulă se poate stabili cu ajutorul expresiei: <font color
= ”valoare”>...</font>.
Dimensionarea celulei unui tabel
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.
<html>
<body> <h1 align = center> Un tabel fara chenar de
celule alipite </h1> <hr>
<table cellspacing = "0">
<tr> <td bgcolor = "gray"> gri 11 <td bgcolor =
"red"> rosu 12
<tr bgcolor = "blue"> <td> albastru 21 <td bgcolor =
"yellow"> galben 22
</table>
</body>
</html>
Distanţa dintre marginea unei celule şi conţinutul ei poate fi definita 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.
<html>
<body> <h1 align = center> Un tabel de celule mari
</h1> <hr>
<table border cellpadding = "20">
<tr> <td> gri 11 <td> rosu 12
<tr> <td> albastru 21 <td> galben 22
</table>
</body>
</html>
Dimensionarea unui tabel
Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul
a două atribute, width şi height, ale etichetei <table>.
38
Valorile acestor atribute pot fi:
• numere întregi pozitive reprezentînd lăţimea respectiv înălţimea în pixeli a

tabelului;
• numere întregi între 1 şi 100, urmate de semnul %, reprezentînd fracţiunea din
lăţimea şi înălţimea totala a paginii.
<html>
<body> <h1 align = center> Un tabel de 200 pixeli X
50 % </h1> <hr>
<table border width = "200" height = "50%">
</table>
</body>
</html>
În exemplul următor se utilizează un truc care permite afişarea într-o pagina Web a
unui text poziţionat în centrul paginii.
<html>
<body> <h1 align = center> Un text centrat intr-o
pagina </h1>
<table width = "100%" height = "100%">
<tr> <td align = "center">
<h2> Text centrat. </h2>
</table>
</body>
</html>
Titlul unui tabel
Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> (de la ”table
caption” = titlu tabel).
Aceasta eticheta 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 stînga tabelului);
• ”right” (la dreapta tabelului).
39
<html>
<body> <h1 align = center> Un tabel cu titlu </h1>
<table border> <caption align = "top"> Masini
<tr> <td> Mercedes <td> Citroen <td> Jaguar
<tr> <td> BMW <td> Volvo <td> Renault
</table>
</body>
</html>
Cap de tabel
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt
introduse de eticheta <th> (de la ”tabel header” = cap de tabel) în loc de <td>.
Toate atribute care pot fi ataşate etichetei <td> pot fi de asemenea ataşate etichetei <th>.
Conţinutul celulelor definite cu <th> este scris cu caractere aldine şi centrat.
<html>
<body> <h1 align = center> Un tabel cu titlu şi cap
de tabel </h1>
<table border> <caption align = "bottom"> Preturile
masinii
<tr> <th> Pret <th> Citroen <th> Jaguar <th> BMW
<th> Volvo <tr>
<th> In dolari <td> 5000 <td> 100000 <td> 50000 <td>
80000 <tr>
<th> In lei <td> 2000000 <td> 2000000000 <td>
2000000 <td> 16000000
</table>
</body>
</html>
Alinierea conţinutului unei celule
Alinierea pe orizontala a conţinutului unei celule se face cu ajutorul atributului

align care poate lua valorile:
• ”left” (la stînga);

• ”center” (centrat, valoarea prestabilita);
• ”right” (la dreapta);
• ”char” (alinierea se face faţă de un caracter).
Alinierea pe verticala a conţinutului unei celule se face cu ajutorul atributului valign

care poate lua valorile:
40
• ”baseline” (la baza);
• ”bottom” (jos);
• ”middle” (la mijloc, valoarea prestabilita);
• ”top” (sus).
Aceste atribute pot fi ataşate atît etichetei <tr> pentru definirea tuturor elementelor
celulelor unui rînd, cît şi etichetelor <td> şi <th> pentru a stabili alinierea textului într-o
singură celulă.
<html>
<body> <h1 align = center> Un tabel avand continutul
celulelor aliniate </h1>
<table border width = "50%" height = "50%">
<tr align = "right"> <td> Aici <td> alinierea <td>
este centru <td> dreapta
<tr> <td align = "left"> stanga <td align =
"center"> centru <td valign = "top"> sus <td valign
= "bottom"> jos
<tr align = "left"> <td> aici <td> alinierea <td>
este centru <td> stanga (implicita) </table>
</body>
</html>
Dimensionarea exactă a celulelor unui tabel
Dimensiunile unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu
ajutorul a două atribute ale acestor etichete: width pentru lăţime şi height pentru înălţime.
Valorile posibile ale acestor atribute sunt:
• numere întregi pozitive (inclusiv 0) reprezentînd dimensiunea în pixeli a lăţimii,

respectiv a înălţimii unei celule;
• procente din lăţimea, respectiv înălţimea tabelului.
<html>
<body> <h1 align = center> Un tabel cu celule de
100x150 de pixeli </h1> <hr>
<table border>
<tr> <td width = "100" height = "150"> cell 11 <td
width = "100" height = "150"> cell 11
<tr> <td width = "100" height = "150"> cell 21 <td
width = "100" height = "150"> cell 22
</table>
41
</body>
</html>
Tabele de forme oarecare
Un tabel trebuie privit ca o reţea dreptunghiulară de celule. Cu ajutorul a două

atribute ale etichetelor <td> şi <th>, o celula se poate extinde peste celule vecine.
Astfel:
• extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului
colspan, a cărui valoare determina numărul de celule care se unifica.
• extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului
rowspan, a cărui valoare determina numărul de celule care se unifica.
Sunt posibile extinderi simultane ale unei celule pe orizontală şi pe verticală. În

acest caz, în etichetele <td> şi <th> vor fi prezente ambele atribute colspan şi rowspan.
<html>
<body> <h1 align = center> Un tabel simplu cu chenar
</h1> <hr>
<table border>
<tr> <td rowspan = "3"> cell 11 <br> cell 21 <br>
cell 31
<td> cell 12 <td colspan = "2" rowspan = "3"> cell
13, cell 14 <br> cell 23, cell 24 <br> cell 33, cell
34
<tr> <td> cell 22
<tr> <td> cell 32
<tr> <td> cell 41 <td colspan = "3"> cell 42, cell
43, cell 44
</table>
</body>
</html>
Atributul ”nowrap”
Atributul nowrap aparţine elementelor <td> şi <th>; el interzice întreruperea unei

linii de text. Astfel, în tabel pot apărea coloane cu o lăţime oricît de mare.
<html>
42
<body> <h1 align = center> Un tabel cu celule de
latime mare </h1> <hr>
<table border>
<tr> <td nowrap> cell 21 <td> cell 22 este foarte
lata, aceasta celula este foarte lata.
</table> </body>
</html>
Celule vide ale unui tabel
Dacă un tabel are celule vide, atunci aceste celule vor apărea în tabel fără un chenar
de delimitare.
În scopul de a afişa un chenar pentru celule vide se utilizează următoarele trucuri:
• după <td> se pune ;

• după <td> se pune <br>.
Caracterul (no break space) este de fapt caracterul spaţiu. Un spaţiu
introdus prin intermediul acestui caracter nu va fi ignorat de browser.
<html>
<body> <h1 align = center> Un tabel cu celule vide
</h1> <hr>
<table border>
<tr> <td> cell 11 <td> cell 12 <td> cell 13
<tr> <td> <td> <td>
</table>
</body>
</html>
Atribute Internet Explorer pentru tabele
Următoarele atribute ale etichetei <table> funcţionează începînd cu Internet

Explorer 4.0, dar nu cu Netscape Communicator 4.5:
• background permite stabilirea unei imagini pentru fondul unui tabel. Primeşte ca
valoare adresa URL a imaginii folosite pentru fond;
• bordercolor permite stabilirea culorii pentru chenarul unui tabel;
• bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
• bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;
<html>
43
<body> <h1 align = center> Atribute "Internet
Explorer" </h1> <hr>
<table border = "5" background = ".../img/ubm1.jpg"
cellspacing = 15 bordercolor = "maroon"
bordercolodark = "red">
<tr bgcolor = "yellow"> <td> cell 11 <td> cell 12
<td> cell 13
<tr bgcolor = "yellow"> <td> <td> <td>
</table>
</body>
</html>
Grupuri de coloane
Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane.

Atributele acceptate de <colgroup> sunt:
• span determină numărul de coloane dintr-un grup;

• width determina o lăţime unică pentru coloanele din grup;
• align determina un tip unic de aliniere pentru coloanele din grup.
•
Exemplu:
<colgroup span = ”3” width = ”100”> </colgroup>
Într-un bloc <colgroup>, coloanele pot avea configurări diferite daca se utilizează
elementul <col>, care admite atributele:
• span identifica acea coloana din grup pentru care se face configurarea. Dacă
lipseşte, atunci coloanele sunt configurate în ordine;
• width determina o lăţime pentru coloana identificata prin span;
• align determina o aliniere pentru coloana identificata prin span.
<html>
<body> <h1 align = center> Grupuri de coloane </h1>
<hr>
<table width = "400" cellspacing = 10>
<colgroup> <col width = "100" align = right> <col
width = "100" align = center> <col width = "200"
align = right> </colgroup>
<tr> <td valign = top> Text in prima coloana. Text
in prima coloana. Text in prima coloana. Text in
prima coloana. <td valign = top> Text in coloana
doua. Text in coloana doua. Text in coloana doua.
Text in coloana doua. <td valign = top> Text in
44
coloana a treia. Text in coloana a treia. Text in
coloana a treia. Text in coloana a treia.
</table>
</body>
</html>
Atributele frame şi rules
Atributul frame al etichetei <table> permite specificarea părţilor din chenarul unui
tabel care vor fi afişate.
Valorile posibile ale acestui atribut sunt:
• ”void” - elimină toate muchiile exterioare ale tabelului;

• ”above” - afişează o muchie în partea superioară a cadrului tabelului;
• ”below” - afişează o muchie în partea inferioară a cadrului tabelului;
• ”hsides” - afişează cîte o muchie în partea superioară şi inferioară cadrului tabelului;
• ”lhs” - afişează o muchie în partea din stîngă a cadrului tabelului;
• ”rhs” - afişează o muchie în partea din dreapta a cadrului tabelului;
• ”vsides” - afişează o muchie în partea din stînga şi din dreapta a cadrului tabelului;
• ”box” - afişează o muchie pe toate laturile cadrului tabelului;
• ”border” - afişează o muchie pe toate laturile cadrului tabelului;
Atributul rules al etichetei <table> permite alegerea unor delimitatori pentru

celulele unui tabel. Valorile posibile sunt:
• ”none” - elimină toate muchiile interioare ale tabelului;
• ”groups” - afişează muchii orizontale între toate grupurile din tabel. Grupurile sunt
specificate prin elementele <thead>, <tbody>, <tfoot> şi <colgroup>.
• ”rows” - afişează muchii orizontale între toate liniile tabelului;
• ”cols” - afişează muchii verticale între toate coloanele tabelului;
• ”all” - afişează muchii între toate liniile şi coloanele;
<html>
<body> <h1 align = center> Atributele frames şi
rules </h1>
<table width = "400" frame = box rules = rows
cellspacing = 10>
<tr> <td> cell 11 <td> cell 12<td>cell 13
<tr> <td> cell 21 <td> cell 22<td>cell 23
</table>
</body>
</html>
45
Subblocurile unui tabel
În specificaţiile HTML 4.0, conţinutul unui tabel poate fi împărţit în subblocuri prin
elementele:
• <thead> <tr> <td> ... </thead> (un singur rînd);
• <tfoot> <tr> <td> ... </tfoot> (un singur rînd);
• <tbody> <tr> <td> ... </tbody> (oricîte rînduri);
Într-un tabel există un singur subbloc de tipul <thead> şi un singur subbloc de tipul
<tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.
46
9. Ferestre în HTML
Ferestrele sau (cadrele) ne permit să definim în fereastra browserului subferestre în

care sa fie încărcate documente HTML diferite.
Ferestrele sunt definite într-un fişier HTML special, în care blocul <body> ...
</body> este înlocuit de blocul <frameset> ... </frameset>.
În interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primeşte ca valoare adresa
URL a documentului HTML care va fi încărcat în acel frame. Definirea cadrelor se face
prin împărţirea ferestrelor (şi a subferestrelor) în linii şi coloane:
• împărţirea unei ferestre într-un număr de subferestre de tip coloana se face cu

ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastră;
• împărţirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul
atributului rows al etichetei <frameset> ce descrie acea fereastră;
• valoare atributelor cols şi rows este o listă de elemente separate prin virgulă, care
descriu modul în care se face împărţirea.
Elementele listei pot fi:
1. un număr întreg de pixeli;

2. procente din dimensiunea ferestrei (număr între 1 şi 99 urmat de %);
3. n* care înseamnă n părţi din spaţiul rămas;
Exemplu 1: cols = 200, *, 50%, * înseamnă o împărţire în 4 subferestre, dintre

care prima are 200 pixeli, a treia ocupă jumătate din spaţiul total disponibil, iar a doua şi a
patra ocupa în mod egal restul de spaţiu rămas disponibil.
Exemplu 2: cols = 200, 1*, 50%, 2* înseamnă o împărţire în 4 subferestre, dintre

care prima are 200 pixeli, a treia ocupă jumătate din spaţiul total disponibil iar a doua şi a
patra ocupă în mod egal restul de spaţiu rămas disponibil, care se împarte în trei parţi
egale, a doua fereastră ocupînd o parte, iar a patra ocupînd 2 părţi.
Observaţii:
- dacă mai multe elemente din listă sun configurate cu *, atunci spaţiul disponibil
rămas pentru ele se va împărţi în mod egal.
- o subfereastra poate fi un cadru (folosind <frame>) în care se va încărca un
document HTML sau poate fi împărţită la rîndul ei la alte subfereste (folosind
<frameset>).
<html>
<head> <title> ferex_1 </title> </head>
<frameset cols = "*,*">
47
<frame src = "p1.html">
</frameset>
</html>
În exemplul următor este creata o pagină Web cu trei cadre orizontale. Pentru al
doilea cadru valoarea atributului src este adresa URL a unei imagini.
<html>
<frameset rows = "100,*,10%">
<frame src = "x.jpg">
</frameset>
</html>
În exemplul următor este creată o matrice de 4 cadre (2 x 2). Pentru a realiza acest
lucru, se folosesc simultan cele două atribute cols şi rows.
<html>
<frameset rows = "*,*" cols="*,*">
</frameset>
</html>
În exemplul următor este creată o pagină Web cu trei cadre mixte. Pentru a o crea se
procedează astfel. Mai întîi, pagina este împărţită în două subferestre de tip coloana, după
care a doua subfereastra este împărţită în două subferestre de tip linie.
<html>
<frameset cols = "20%,*">
<frameset rows = "*,*">
</frameset>
</frameset>
</html>
48
Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru
Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor.

Acest atribut primeşte ca valoare un nume de culoare sau o culoare definită în
conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataşat atît
etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, cît şi
etichetei pentru a stabili culoarea chenarului pentru un cadru individual.
Atributul border al etichetei <frameset> permite configurarea lăţimii chenarelor

tuturor cadrelor la un număr dorit de pixeli. Valoarea prestabilită a atributului border este
de 5 pixeli.
O valoare de 0 pixeli va defini un cadru fără chenar.
<html>
<frameset cols = "20%,*" bordercolor = "green"
border = "15">
<frame src = "p2.html" bordercolor = "blue">
</frameset>
</html>
Pentru a obţine cadre fără chenar se utilizează border = ”0”.
În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional.
Afişarea chenarului unui cadru se poate dezactiva daca se utilizează atributul
frameborder cu valoare ”no”.
Acest atribut poate fi ataşat atît etichetei <frameset> (dezactivarea fiind valabilă
pentru toate cadrele incluse) cat şi etichetei <frame> (dezactivarea fiind valabilă numai
pentru un singur cadru).
Valorile posibile ale atributului frameborder sunt:

”yes” - echivalent cu 1;
”no” - echivalent cu 0;
<html>
<head> <title> ferex_5_1 </title> </head>
<frameset cols = "20%,*" border = "0">
49
</frameset>
</html>
<html>
<head> <title> ferex_5_2 </title> </head>
<frameset cols = "20%,*" frameborder = "no">
</frameset>
</html>
Bare de defilare
Atributul scrolling al etichetei <frame> este utilizat pentru a adăuga unui cadru o
bară de derulare care permite navigarea în interiorul documentului afişat în interiorul
cadrului.
Valorile posibile sunt:

• ”yes” - barele de derulare sunt adăugate întotdeauna;
• ”no” - barele de derulare nu sunt utilizabile;
• ”auto” - barele de derulare sunt vizibile atunci cînd este necesar
<html>
<frameset cols = "*,*,*">
<frame src = "p.html" scrolling = "yes" noresize>
<frame src = "p.html" scrolling = "no" noresize>
<frame src = "p.html" scrolling = "auto" noresize>
</frameset>
</html>
Atributul noresize al etichetei <frame> (fără nici o valoare suplimentară) dacă este
prezent, inhiba posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu
ajutorul mouse-ului.
Poziţionarea documentului într-un cadru
Atributele marginheight şi marginwidth ale etichetei <frame> permit stabilirea

distanţei în pixeli dintre conţinutul unui cadru şi marginile verticale, respectiv orizontale
ale cadrului.
Valori posibile:
- număr de pixeli;
- procent din lăţimea, respectiv din înălţimea cadrului;
50
<html>
<frameset cols = "*,*,*">
<frame src = "p.html">
<frame src = "p.html" marginheight = 20>
<frame src = "p.html" marginwidth = 20>
</frameset>
</html>
Exista browsere care nu suporta cadre pentru aceasta se utilizează în interiorul

blocului <frameset> eticheta <noframes>.
Dacă programul de navigare ştie să interpreteze cadre, va ignora ce se găseşte în

aceasta porţiune, iar daca nu, materialul cuprins în zona <noframes> ... </noframes> va fi
singurul care va fi înţeles şi afişat.
De precizat este faptul ca între <noframes> ... </noframes> se pot introduce orice
alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).
Cadre interne
Un cadru intern este specificat prin intermediul blocului <iframe> ... </iframe>.
Un cadru intern se inserează într-o pagină Web în mod asemănător cu o imagine sau în
modul în care se specifica marcajul <frame>, aşa cum rezulta din următorul exemplu:
<iframe src = "ferex_8.html" height =40% width =50%>

</iframe>
În acest caz, am specificat că dorim o fereastră de cadru intern care are 40% din
înălţimea şi 50% din lăţimea paginii curente.
Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele

<frame> şi <frameset>, cum ar fi: src, border, frameborder, bordercolor,
marginheight, marginwidth, scrolling, name, noresize; sau de la eticheta <img>
vspace, hspace, align, width, height;
<html>
<body>
<a href = "p1.html" target = "icad">
Fisierul1 </a> <br> <a href = "p2.html" target =
"icad">
"icad">
Fisierul3 </a> <br> <a href = "p.html" target =
51
"icad">
Home </a> <br> <center> <iframe width = "60%" height
= "50%" border = 2 bordercolor = red name = "icad"
src = "p.html"> Daca vedeti acest text inseamna ca
browserul dumnevoastranu suporta cadre interne. Ar
fi preferabil sa reveniti, folosind Netscape
Navigator versiune 4.0 (/ulterioara) sau I. Explorer
4.0. (/ulterioara)
<a href = "p0.html"> Pagina fara cadre interne </a>
</iframe> </center>
</body>
</html>
Ţinte pentru legături
În mod prestabilit, la efectuarea unui clic pe o legătura nouă pagina (către care
indică legătura) o înlocuieşte pe cea curenta în aceeaşi fereastra (acelaşi cadru). Acest
comportament se poate schimba in doua moduri:
• prin plasarea în blocul <head> ... </head> a unui element <base> care precizează,
prin atributul target numele ferestrei (cadrului) în care se vor încărca toate paginile
noi referite de legăturile din pagina curenta conform sintaxei:
<base target = ”nume_fereastra / frame_de_baza”>
• prin plasarea în eticheta <a> a atributului target, care precizează numele ferestrei
(cadrului) în care se va încărca pagina nou referita de legătura, conform sintaxei:
<a href = ”legătura” target = "nume_fereastra / frame">...</a>
Observaţie:
- dacă este prezent atît un atribut target în <base> cît şi un atribut target în <a>,
atunci cele precizate de atributul target din <a> sunt prioritare.
Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform
sintaxei: <frame name = ”nume_frame”>
În exemplul următor este prezentată o pagină Web cu două cadre. Toate legăturile
din cadrul 1 încarcă paginile în cadrul 2.
<html>
<head> <title> ferex_9_frames </title> </head>
<frameset cols = "20%,*">
<frame src = "left.html" name = "left">
<frame src = "p.html" name = "main">
</frameset>
</html>
52
<html>
<head> <title> ferex_9_left </title> </head>
<body>
<a href = "p1.html" target = "main">
"main">
"main">
Fisierul3 </a> <br> <br> <a href = "p1.html" target
= "_blank">
Fis1 intr-o fereastra noua </a> <br> <br> <a href =
"p1.html" target = "_self">
Fis1 in fereastra curenta </a> <br> <br> <a href =
"p.html" target = "main">
Home </a> <br>
</body>
</html>
Valori pentru atributul target
Atributul target al etichetei <frame> acceptă anumite valori predefinite de o

valoare deosebită pentru creatorii de pagini Web. Aceste valori sunt:
• ”_self” (încărcarea noii pagini are loc în cadrul curent);

• ”_blank” (încărcarea noii pagini are loc într-o fereastra nouă anonimă);
• ”_parent” (încărcarea noii pagini are loc în cadrul părinte al cadrului curent dacă
acesta exista, altfel are loc în fereastra browserului curent);
• ”_top” (încărcarea noii pagini are loc în fereastra browserului ce conţine cadrul
curent);
53
10. Formulare
Un formular este un ansamblu de zone active alcătuit din butoane, casete de

selecţie, cîmpuri de editare etc.
Formularele vă asigură construirea unor pagini Web care permit utilizatorilor să

introducă efectiv informaţii şi sa 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ă facilitaţi puternice de transmisie a datelor. O
sesiune cu o pagină 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 daca este
necesar) stochează datele într-o baza de date.
3. Daca este necesar serverul expediază un răspuns utilizatorului.
Un formular este definit într-un bloc delimitat de etichetele corespondente <form>

şi </form>.
Atribute esenţiale ale elementului <form>
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.yahoo.com/cgi-bin/nume_fis.cgi”>.
Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.
2. Atributul method precizează metodă utilizată de browser pentru expedierea

datelor formularului. Sunt posibile următoarele valori:
• get (valoarea implicită). În acest caz, datele din formular sunt adăugate la adresa
URL precizată 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_camp = valoare_camp. Între diferite

seturi de date este introdus un ”&”.
Exemplu:
”http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2”;
54
• post. În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de date
(ordinul MB)
Pentru ca un formular sa fie funcţional, trebuie precizat ce se va întîmpla cu el după

completarea şi expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta
electronica (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.
Un formular cu un cîmp de editare şi un buton de expediere
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 atributul name. Pe buton apare scris ”Submit Query” sau valoarea atributului
value, daca această valoare a fost stabilită.
<html>
<head> <title> FormEx_1 </title> </head>
<body> <h1> Un formular cu un camp de editare şi un
buton de expediere </h1> <hr>
<form action = "mailto:xxxxx@xxx.com" method="post">
Numele: <input type = "text" name = "numele" value =

"Numele şi prenumele"> <br>
<input type = "submit" value = "expedieaza"> </form>
</body>
</html>
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ă el depăşeşte aceasta lăţime,
atunci se executa automat o derulare acestui cîmp;
55
• atributul maxlength specifică 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.
Butonul Reset
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 (definita 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> formex_2 </title> </head>
<body> <h1> Un formular cu un buton reset </h1> <hr>
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>
Cîmp de editare de tip ”password”
Dacă 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.
56
Singura deosebire constă în faptul ca acest cîmp de editare nu afişează caracterele
culese, ci numai caractere *, care ascund de privirile altui utilizator aflat în apropiere
valoarea introdusă într-un asemenea cîmp.
La expedierea formularului însă, valoarea tastată într-un cîmp de tip ”password” se

transmite în clar.
<html>
<body> <h1> Un formular cu un buton reset </h1> <hr>
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>
Butoane radio
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>
<body> <h1> Un formular cu butoane radio </h1> <hr>
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.
57
Casete de validare
O casetă de validare (checkbox) permite selectarea sau deselctarea unei opţiuni.

Pentru inserarea unei casete de 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>
<body> <h1> Un formular cu casete checkbox </h1>
<hr>
Alegeti meniul: <br>

Pizza <input type = "checkbox" name = "pizza" value
= "o portie">
Nectar <input type = "checkbox" name = "nectar"
value = "un pahar">
Bere <input type = "checkbox" name = "bere" value =
"o sticla">
Cafea <input type = "checkbox" name = "cafea" value
= "o ceasca"> <br>
</form> </body>
</html>
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 caseta 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. Această valoare poate fi atribuită direct atributului value, poate fi
tastată într-un cîmp de editare ce apare o dată cu formularul sau poate fi selectată
58
prin intermediul unei casete de tip File Upload sau Choose File care apare la
apăsarea butonului Browse... din formular;
• atributul enctype precizează metoda utilizata la criptarea fişierului de expediat.
Valoarea acestui atribut este ”multipart/form-data”.
<html>
<body> <h1> Un formular cu caseta de fisiere </h1>
<hr>
Alegeti fisierul: <input type = "file" name =

"fisier" value = "c:\temp\proba.html" enctype =
"multipart/form-data"> <br>
</form> </body>
</html>
Liste de selecţie
O listă de selecţie permite utilizatorului sa 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 lista de selecţie poate avea următoarele atribute:
• atributul name, care ataşează listei un nume (utilizat în perechile ”name=value”

expediat serverului);
• atributul size, care precizează (printr-un număr întreg pozitiv, valoarea prestabilita
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”; dacă acest atribut lipseşte, atunci către server va fi expediat
textul ce urmează după <option>;
• atributul selected (fără alte valori) permite selectarea prestabilita a unui element al
listei.
<html>
<body> <h1> Un formular cu o lista de selectie </h1>
<hr>
59
Universitatea absolvita: <br> <br>
<select name = "universitate" size = "3"> <option
value = "B"> Universitatea din Cluj
<option value = "UNBM" selected> Universitatea de
Nord Baia Mare
<option value = "UTT"> Universitatea Technica din
Timisoara
<option value = "UTB"> Universitatea Technica din
Brasov
</select> <br> <br>
</form> </body>
</html>
Listă 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 care este se
inserează cîte o pereche ”name=value” unde name este numele listei.
<html>
<body> <h1> Un formular cu o lista de selectie ce
accepta selectii multiple </h1>
<hr>
Limbi straine cunoscute: <br> <br>

<select name = "limbi straine" size = "5"> <option
value = "e"> Engleza
<option value = "f" selected> Franceza
<option value = "s"> Spaniola
<option value = "i"> Italiana
<option value = "r"> Rusa
<option value = "g"> Germana
</select> <br> <br>
</form> </body>
</html>
Cîmpuri de editare multilinie
60
Într-un formular cîmpuri de editare multilinie pot fi incluse cu ajutorul etichetei
<textarea>. Eticheta are următoarele atribute:
• atributul cols, care specifica numărul de caractere afişate într-o linie;

• atributul rows, care specifica 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
determină comportamentul cîmpului de editare faţă de sfîrşitul de linie.
Acest atribut poate primi următoarele valori:
a) ”off”; în acest caz:

o întreruperea cuvintelor la marginea dreaptă a editorului se produce numai
cînd doreşte utilizatorul;
o caracterul de sfîrşit de linie este inclus în textul transmis serverului o dată cu
formularul;
b) ”hard”; în acest caz:
o se produce întreruperea cuvintelor la marginea dreaptă a editorului ;
o caracterul de sfîrşit de linie este inclus în textul transmis serverului o dată cu
formularul;
c) ”soft”; în acest caz:
o se produce întreruperea cuvintelor la marginea dreaptă a editorului ;
o nu se include caracterul de sfîrşit de linie în textul transmis serverului o dată
cu formularul;
<html>
<body> <h1> Un formular cu un camp de editare
multilinie </h1> <hr>
<textarea name = "text multilinie" cols = "30" rows
= "5" wrap = "off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
</form> </body>
</html>
Un formular complex
În exemplul următor este prezentat un formular conţinînd elemente prezentate

anterior. Cîmpurile formularului sunt incluse în celule unui tabel pentru a obţine o aliniere
dorită.
<html>
61
<body> <h1> Un formular complex </h1> <hr>
<center> <table bgcolor = "orange"> <form action =
"mailto:xxxxx@xxx.com" method = "post">
<caption align = "top"> MENIU </caption>
<tr align = left> <th> Numele:
<td> <input type = "text" name = "numele">
<tr align = left> <th> Preumele:
<td> <input type = "text" name = "prenumele"> <tr
align = left> <th> Telefonul:
<td> <input type = "text" name = "telefonul"> <tr
align = left> <th> Alegeti pizza:
<td> <input type = "checkbox" name = "ciuperci"> cu
ciuperci
<input type = "checkbox" name = "mexicana"> mexicana
<input type = "checkbox" name = "europeana">
europeana
<tr align = left> <th> Alegeti plata: <td>
<ul style = "background-color:lightblue;"> <li>
<input type = "radio" name = "plata"> cash <li>
<input type = "radio" name = "plata"> card </ul> <tr
align = left> <th> Comentarii:
<td> <textarea name = "comentarii" cols = "30" rows
= "5" wrap = "off">
Inserati aici aprecierile dumneavoastra legate de
calitatea serviciilor noastre </textarea>
<tr align = left valign = top> <td>
<input type = "reset" value = "sterge"> <td> <input
type = "submit" value = "expedieaza">
</form> </table>
</body>
</html>
Butoane
Într-un formular pot fi afişate butoane. Cînd utilizatorul apasă un buton, se lansează
în execuţie o funcţie de tratare a acestui eveniment.
Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil
daca se utilizează limbajele Javascript sau Java).
Pentru a insera un buton într-un formular, se utilizează eticheta <input> avînd

atributul type configurat la valoarea ”button”.
Alte doua atribute ale elementului ”button” sunt:
• atributul name, care permite ataşarea unui nume butonului;
62
• atributul value, care primeşte ca valoare textul ce va fi afişat pe buton.
Un buton pentru lansarea în execuţie a unei acţiuni poate fi introdus într-un

formular prin elementul <input> avînd atributul type configurat la valoarea ”button”, aşa
cum s-a văzut mai înainte.
Există o a doua modalitate de a introduce într-o pagină Web un buton de apăsat, şi

anume prin intermediul blocului <button>...</button>.
Un astfel de buton poate fi inserat într-un formular, în acest caz declanţîand acţiuni
legate de acel formular, sau poate fi introdus oriunde în pagina pentru iniţierea unor
acţiuni independente de formulare.
Atributele posibile ale elementului ”button” sunt:
• name acorda elementului un nume;

• value precizează textul care va fi afişat pe buton;
• type precizează acţiunea ce se va execută la apăsarea butonului daca acesta este
inclus într-un formular. Valorile posibile pentru acest atribut sunt: ”button”,
”submit”, ”reset”.
În corpul blocului <button>...</button> se poate afla un text sau un marcaj de
inserare a unei imagini.
Observaţii finale:
- elementul <form> poate avea un atribut target, care primeşte ca valoare numele
unei ferestre a browserului în care va fi încărcat răspunsul trimis serverului WWW la
expedierea unui formular.
- toate elementele cuprinse într-un formular pot avea un atribut disabled, care
permite dezactivarea respectivului element.
- toate elementele de tip text cuprinse într-un formular pot avea un atribut readonly,
care interzice modificarea conţinutului acestor elemente.
63
11. Stiluri
Stilurile pun la dispoziţia creatorilor de site-uri noi posibilităţi de personalizare a

paginilor Web. Un stil reprezintă un mod de a scrie un bloc de text (adică anumite valori
pentru font, mărime culoare, aliniere, distanţe faţă de margini etc).
Există două modalităţi de a defini un stil:
• sintaxa CSS (Cascading Style Sheets);

• sintaxa Javascript.
Cascading Style Sheets înseamnă ”foi în stilul cascadă”.
Stiluri dedicate
Aceste stiluri se aplică blocurilor de text pentru care sunt definite. De exemplu:
<style>
h1 {text-align : center; color : red;}
</style>
Toate titlurile care apar în fişier ca fiind de mărime 1 vor fi de culoare roşie şi
centrate.
Dacă dorim ca acelaşi stil sa fie utilizat de către mai multe elemente (de ex. ”h1”,
”h2” şi ”p”) atunci se utilizează o listă a acestor elemente, separate prin virgulă:
<style>
h1, h2, p {text-align : center; color : red;}
</style>
Clase de stiluri
Aceste stiluri permit definirea unui stil general şi folosirea lui oriunde este necesar.
Exemplu:
Definim o clasă de stiluri ”ac” (albastru şi centrat) în interiorul blocului

<style>...</style>, aflat la rîndul lui în blocul <head>...</head>:
<style>
all.ac {text-align : center; color : blue;}
</style>
Dacă dorim ca un titlu de mărimea 2 sa folosească clasa de stiluri ”ac” atunci

scriem:
64
<h2 class = ac> Acesta este un header de marime 2
albastru si centrat </h2>
”all” aflat în faţa clasei de stiluri ”ac” indică faptul că această clasă este aplicabilă
tuturor blocurilor de text, atunci cînd acest lucru este necesar.
La utilizarea clasei de stiluri în cadrul unui element se foloseşte atributul class avînd
ca valoare numele clasei de stil. Acesta este un atribut universal, adică este aplicabilă
tuturor elementelor.
Observaţii:
În interiorul unui bloc <style>...</style>, comentariile sunt blocuri delimitate de /*

şi */ ( ca în C, C++, Java şi Javascript).
Dacă dorim ca o clasă de stiluri sa fie aplicabilă numai pentru anumite elemente ale
documentului (de exemplu ”p”) atunci în construcţie va apărea acest element (de exemplu
”p.rc”).
<html>
<head> <title> clasa de stiluri dedicata </title>
<style> p.ac {text-align : center; color : blue;}
</style>
</head>
<body> <p> Acesta este un paragraf normal
<br> <p class = ac> Acesta este un paragraf albastru
si centrat
</body>
</html>
Stiluri ”identificate”
Toate elementele unui document admit un atribut universal numit id. Atributul id
poate identifica stilul utilizat de un element.
Pentru a utiliza un stil ”identificat” procedaţi astfel:
• în blocul <style>...</style> introduceţi definiţia stilului conform sintaxei:
<style>
#rosu {color: red}
</style>
• în elementul în care se doreşte utilizarea locală a acestui stil, folosiţi atributul id

care primeşte ca valoare numele stilului definit anterior.
65
• Dacă dorim ca un stil ”identificat” să fie aplicabil numai pentru anumite elemente
ale documentului (de exemplu ”h2”) atunci în construcţia selectorului va apărea
acest element (de exemplu ”h2#ac”).
Stiluri in-line
Stilurile in-line sunt definite chiar în eticheta ce iniţiază blocul în care dorim să se
aplice aceste stiluri.
Pentru aceasta se utilizează atributul universal style (comun practic tuturor

etichetelor ce apar într-un document HTML).
Valoarea dată atributului style este tocmai descrierea stilului, cuprinsă nu între
acolade {..} ci între ghilimele ”...”.
De exemplu:
<h2 style = " color : red; text-align : center;">

Acest header de marimea 2 este de culoare rosie si
este centrat. </h2>
Dacă dorim utilizarea unui anumit style pentru un fragment de text, atunci includem
acest text într-un bloc cu ajutorul delimitatorilor <span>...</span>, după care utilizăm
atributul style pentru eticheta <span>.
Stiluri definite în fişiere externe
Stilurile definite în interiorul unui bloc <style>...</style> pot fi transferate într-un

fişier extern existînd astfel posibilitatea utilizării lor în mai multe fişiere HTML.
Pentru a utiliza un stil definit într-un fişier extern se procedează astfel:
1. Se creează un fişier care să conţină numai descrierea stilurilor şi se salvează cu

extensia .css sau .html. Conţinutul acestui fişier coincide cu conţinutul unui bloc
<style>...</style>, fără ca aceşti delimitatori să fie incluşi.
2. În fişierul HTML care utilizează stilurile definite în fişierul creat la punctul 1, se
include în blocul <head>...</head> o etichetă <link> avînd trei atribute.
o atributul rel cu valoarea ”stylesheet”
o atributul href avînd ca valoare adresa URL a fişierului creat la punctul 1 ;
o atributul type cu valoarea ”text/css”.
Se utilizează titlurile definite în fişierul extern ca şi cum ar fi definite în fişierul

HTML curent într-un bloc <style>...</style>.
66
Pseudoclase
Pseudoclasele se utilizează pentru personalizarea legăturilor. Ele se definesc în

blocul <style>...</style> sau într-un fişier extern, conform sintaxei:
a: link {color: black; font-size: 20pt}

a: activate {color: blue; font-style: italic}
a: visited {color: cyan; text-decoration: none}
Pentru ca numai anumite legături să utilizeze un stil se pot folosi următoarele două
metode:
• a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>

• a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
Atenţie!!! acest exemplu lucrează doar cu browsere Internet Explorer 4.x sau 5!
În browsere cursorul mouse-ului are în general o formă simplă, luînd pe parcursul

vizionării paginii respective maximum două înfăţişări diferite:
1. Mîna - atunci cînd este poziţionat pe o legătură

2. Bara verticală - atunci cînd este poziţionat pe alt obiect decît o legătură.
Acestea însă sunt formele implicite. Desigur există cazuri în care am dori ca
browser-ul să aibă o altă formă decît una dintre acestea. La fel ca multe alte probleme care
privesc modul în care o pagină arată şi aceasta îşi găseşte rezolvarea în folosirea CSS, ca
limbaj de descriere a formei unui document.
Proprietatea care gestionează forma cursorului se numeşte simplu: cursor şi poate fi

introdusă în orice element style al unui tag html.
De exemplu pentru obţinerea unei imagini a cursorului de tipul unei săgeţi orientată
Est – Vest la trecerea mouse-ului peste un link iată codul ce va trebui folosit:
<a href = "fisier.html" style = "cursor : e-resize"

Legatura </a>
Nu este, însă singurul exemplu, în continuare aveţi toate codurile pentru formele de
cursor pe care le puteţi folosi:
auto utilizează setările implicite ale utilizatorului

crosshair creează o cruce
default setările implicite ale browserului
e-resize săgeata Est – Vest
hand mîna
67
help semnul întrebării
move cruce cu săgeţi la capete
n-resize săgeata Sud – Nord
ne-resize săgeata SudVest – NordEst
nw-resize săgeata SudEst – NordVest
pointer Mîna
s-resize săgeata Nord – Sud
se-resize săgeata NordVest – SudEst
sw-resize săgeata NordEst – SudVest
text bara verticală din cîmpurile de introducere a datelor
w-resize săgeata Est – Vest
wait Clepsidra
68
12. Javascript
Javascript este un limbaj de programare simplu, de tip script, pentru definirea

comportamentului elementelor dintr-o pagină Web. Nu este acelaşi lucru cu mult mai
complexul limbaj de programare Java.
Javascript poate specifica, în mod obişnuit în doar cîteva rînduri, răspunsurile la

acţiuni sau evenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului într-un
anumit punct sau ştergerea unui anumit cîmp dintr-un formular.
Cea mai simplă aplicaţie Javscript este aceea care determina apariţia şi derularea
unui mesaj:
<html>
<head> <script language = "Javascript">

</script> </head>
<body> O fereastra cu mesaj !!! </body>
</html>
Scriptul este încadrat de marcajele <script>...</script> şi totul este înglobat într-un

comentariu astfel încît programele de navigare care nu interpretează Javascript nu sunt
derutate de scriptul în sine.
Multe evenimente pot fi gestionate cu Javascript.
Handler de
Eveniment Se desfăşoară atunci cînd
eveniment
utilizatorul elimină controlul de pe un element al unui
blur onBlur
formular
utilizatorul execută un click pe un element al unui
click onClick
formular sau pe o legătură
utilizatorul modifică valoarea unui text, zonă de text sau
change onChange
element de selecţie
utilizatorul atribuie unui element de formular control de
focus onFocus
intrare
load utilizatorul încarcă pagina în programul de navigare onLoad
utilizatorul deplasează indicatorul mouse-ului deasupra
mouseover onMouseover
unei legături sau a unei ancore
utilizatorul selectează cîmpul de intrare al unui element de
select onSelect
formular
submit utilizatorul transmite un formular onSubmit
69
unload utilizatorul abandonează pagina onUnload
În următorul exemplu folosim evenimentul click.
<form> <input type = "button" value = "Apasa!"

onClick = "alert('Hello!')"> </form>
Acest exemplu citeşte numele şi îl salută.
<html>
<head>
<script language = "javascript">

</script>
</head>
<body>
<br><br><br>
<p align=center>
<form name = "form">
numele: <input type = "text" name = "nume">
<input type = "button" value = "Scrie numele si
apasa! "onclick=" udvozol()">
</form>
</body>
</html>
Un alt exemplu ce modifică culoarea de fond a paginii.
<html>
<head>
<script language = "javascript">

</script>
</head>
<body>
<center> <p>
<form>
70
<input type = "button" value = "fond galben" onclick
= "galben()">
<input type = "button" value = "fond albastru"
onclick = "albastru()">
<input type = "button" value = "fond initial" onclick
= "initial()">
</form>
</p> </center>
</body>
</html>
Următoarele exemple sunt puţin mai complicate.
Primul este un ceas digital.
<html>
<head> <title> Un ceas digital </title> </head>
<body onload=show5()>
<h4> Un ceas digital...</h4>
<P> <FONT face = Verdana size = 2>
<SPAN id = liveclock style = "LEFT : 150px; POSITION
: absolute; TOP : 17px; color : blue">
</SPAN>
<SCRIPT language = JavaScript>

</SCRIPT>
</body>
</html>
Al doilea exemplu este un fişier cu meniuri.
<html>
<html>
<head>
<title> Javascript Popups </title>
</head>
<body onLoad= "window.defaultStatus ='';">
<table width="80%">
<tr>
<td>
<div ID="topdeck" style="position:absolute;
visibility:hide;">
</div>
<script language="JavaScript">
var count = 0;
var hand = 0;
nav = (document.layers) ? true : false;
ie = (document.all) ? true : false;
if (nav)
skin = document.topdeck;
if (ie)
skin = topdeck.style;
document.onmousemove = sustain;
if (nav) document.captureEvents(Event.MOUSEMOVE);
function pop(orientation,msg) {
content="<table width=130 border=0 cellpadding=2
cellspacing=0 bgcolor=#ff9900><tr><td>"
+ "<table width=100% border=0 cellpadding=0
cellspacing=0><tr><td><center><font color="
+ "beige
size=3><b>Menu</b></font></center></td></tr></table>
<table width="
72
+ "100% border=0 cellpadding=2 cellspacing=0
bgcolor=navy><tr><td><font color=#ffffff"
+ "size=1><center>" + msg +
"</center></font></td></tr></table></td></tr></table>
";
if (nav) {
var canvas = document.topdeck.document;
canvas.write(content);
canvas.close();
skin.visibility = "show";
}
else if (ie) {
document.all("topdeck").innerHTML = content;
skin.visibility = "visible";}
hand = orientation;
}
function sustain(e) {
var x = (nav) ? e.pageX : event.x;
var y = (nav) ? e.pageY : event.y;
switch(hand) {
case 0 :
kill();
break;
case 1 :
skin.left = x+10, skin.top = y+10;
window.status = "Left Popup";
break;
case 2 :
skin.left = x-60, skin.top = y+20;
window.status = "Center Popup";
break;
case 3 :
skin.left = x-135, skin.top = y+10;
window.status = "Right Popup";
break;
default:
skin.left = x+10, skin.top = y+10;
break;
}
}
function kill() {
if (count >= 1 )
var always=true;
if (always == true) {
hand = 0;
skin.visibility = (nav) ? "hide" : "hidden";
}
73
else
count++;
}
</script>
<table width="75%" border=0 align=right><tr>
<td width="33%" align="left" nowrap>
<a href="#" onMouseOver="pop(1,'On Left');"
OnMouseOut="kill();">Left</a></td>
<td width="34%" align="center" nowrap>
<a href="#" onMouseOver="pop(2,'Central ');"
OnMouseOut="kill();">Center</a></td>
<td width="33%" align="right" nowrap>
<a href="#" onMouseOver="pop(3,'On Right');"
OnMouseOut="kill();">Right</a></td>
</td></tr></table>
<body bgcolor=#ffffff>
<a href="#" onMouseOver="pop(1,'Primul meniu care
este un meniu principal');" onMouseOut="kill();">Menu
1</a><p>
<a href="#" onMouseOver="pop(1,'Menu 2');"
onMouseOut="kill();">Menu 2</a><p>
</body>
</html>
74
Anexă
Marcaje de baza
<HTML> </HTML> Defineşte un fişier in format Web

<HEAD> </HEAD> Antetul documentului
<TITLE> </TITLE> Tilul documentului
<BODY> </BODY> Corpul paginii HTML
BGCOLOR = culoare Culoarea de fond a paginii
TEXT = culoare Culoarea textului pe paginii
LINK = culoare Culoarea legăturiilor nevizitate din paginii
VLINK = culoare Culoarea legaturiilor vizitate din paginii
ALINK = culoare Culoarea legăturiilor pe durata clicului executat
de utilizator
BACKGROUND = url Imaginea de fond pentru pagină
<P> Paragraf
<Hn> <Hn> Nivel de subtitlu al documentului
(n = 1-6)
<FONT> </FONT> Specifica atribute ale textului încadrat
SIZE = n Dimensiunea textului este 1-7
FACE = "a, b" Specifica fontul: a, daca este disponibil,
sau b
COLOR = s Culoarea textului: fie un nume de culoare, fie o
valoare RGB
<BR> Linie noua
<PRE> </PRE> Informaţie preformatată
 Comentariu HTML
<CENTER> </CENTER> Centrează materialul în pagină
<HR> Riglă orizontală
SIZE = x Înălţimea riglei în pixeli
WIDTH = x Lăţimea riglei în pixeli sau în procente
NOSHADE Dezactivează afişarea umbrei pentru rigla
orizontala
ALIGN = x Alinierea riglei orizontala in pagina (left, center,
right)
COLOR = x Culoarea riglei orizontale (numai pentru IE)
<A> </A> Marcaj de tip ancora
HREF = url Referinţă hipertext
HREF = #nume Referinţă către o ancora interna
Name = nume Definiţia unei ancore interne
75
Marcaje pentru liste
<DD> Descriere definiţie

<DL> <DL> Listă de tip definiţie
<DT> Termen de definiţie
<LI> Element de listă
<OL> Listă ordonată (numerotată)
TYPE = tip Tipul numerotării. Valori posibile: A, a I, i, 1
START = x Numărul de inceput al listei ordonate
<UL> Listă neordonată (marcată)
TYPE = forma Forma marcajului. Valori posibile: circle, square,
disc
Formatarea caracterelor
<B> </B> Afişează text cu caractere aldine

<I> </I> Afişează text cu caractere cursive
<U> </U> Afişează text subliniat
<TT> </TT> Text cu font monospaţiu
<CITE> </CITE> Citare bibliografică
<CODE> </CODE> Listing de program
<EM> </EM> Stil logic de evidenţiere
<KBD> </KBD> Text de la tastatură
<STRONG> </STRONG> Evidenţiere logică puternică
<VAR> </VAR> Program sau variabilă
<BASEFONT SIZE = n> Specifică dimensiunea implicită a fontului din
pagină
Marcaje pentru cadre
<FRAMSET> </FRAMSET> Definirea redactării paginii

COLS = x Numărul şi mărimea relativă a coloanelor
ROWS = x Numărul şi mărimea relativă a liniilor
Specifică starea ”ON” (activă) sau ”OFF”
BORDER = x (inactivă) pentru chenarul cadrului FRAMSET (1
sau 0)
FRAMEBORDER = x Specifică mărimea chenarului
FRAMESPACING = x Mărimea spaţiului dintre două cadre adiacente
<FRAME> Definiţia unui anumit cadru
SCR = url URL-ul sursă pentru cadru
Numele cadrului (utilizat împreună cu TARGET
NAME = nume = Nume ca parte componentă a marcajului de tip
ancoră <A>)
SCROLLING = scrl Defineşte opţiunea barei de derulare.Valori
76
posibile: on(activa), off(inactiva), auto(automat)
FRAMEBORDER = x Mărimea chenarului din jurul cadrului
MARGINHEIGHT = x Spaţiul suplimentar de deasupra şi dedesubtul
unui anumit cadru
MARGINWIDTH = x Spaţiu suplimetar la stînga şi la dreapta unui
anumit cadru
<NOFRAMES> </NOFRAMES> Secţiunea de pagină afişată pentru utilizatorii
care nu pot vedea un cadru
<IFRAME> Cadru intern (numai pentru IE)
SCR = url Sursa cadrului
NAME = s Numele ferestrei (util pentru TARGET)
HEIGHT = x Înăţmea cadrului înglobat
WIDTH = x Lăţimea cadrului înglobat
Marcaje pentru tabele
<TABLE> </TABLE> Tabel HTML

BORDER = x Chenarul tabelului
CELLPADDING = x Spaţiul suplimentar în cadrul celulelor tabelului
CELLSPACING = x Spaţiul suplimentar între celulele tabelului
WIDTH = x Lăţimia impusă tabelului
FRAME = valoare Ajustarea fină a tabelului
RULES = valoare Ajustarea fină a rigelor tabelului
BORDERCOLOR = culoare Specifică culoarea chenarului tabelului
BORDERCOLORLIGHT = Cea mai deschisă culoare din cele două culori
culoare specificate
BORDERCOLORDARK = culoare Cea mai închisă culoare din cele două culori
specificate
ALIGN = left Analiza tabelului la marginea din stînga a paginii,
iar textul curge in partea dreaptă
ALIGN = right Analiza tabelului la marginea din dreapta a
paginii, iar textul curge in partea stîngă
HSPACE = x Spaţiul suplimentar pe orizontală în jurul
tabelului
VSPACE = x Spaţiul suplimentar pe verticală în jurul tabelului
COLS = x Specifică numărul de coloane ale unui tabel
<COLGROUP> </COLGROUP> Defineşte un set de definiţii de coloane cu
ajutorul marcajului <col>
COL WIDTH = x Defineşte lăţimea unei coloane exprimată în
pixeli
<THEAD> </THEAD> Defineşte titlul tabelului
<BODY> </TBODY> Defineşte corpul tabelului
<TR> </TR> Linie de tabel
BGCOLOR = culoare Specifică culoarea de fond pentru întreaga linie
ALIGN = aliniere Alinierea celulelor de pe linia curentă (left,
77
center, right)
<TD> </TD> Celula de date a tabelului/font>
BGCOLOR = culoare Specifică culoarea de fond pentru celula de date
COLSPAN = x Numărul de coloane pe care se întinde celula
curentă de date
ROWSPAN = x Numărul de linii pe care se întinde celula curentă
de date
ALIGN = aliniere Alinierea materialului din cadrul celulei de date.
Valori posibile: (left, right, center)
Alinierea pe verticală a materialului din cadrul
VALIGN = aliniere celulei de date. Valori posibile: (top,
bottom, middle)
BACKGROUND = url Specifică imaginea de fond pentru celula
tabelului
NOWRAP Nu permite despărţirea textului pe linii în cadrul
unei celule
ALIGN = baseline Aliniază celulele de date cu linia de bază a
textului adiacent
ALIGN = caracter Aliniază o coloană faţă de un anumit caracter
(caracterul prestabilit este ".")
ALIGN = justify Aliniază atît marginea stîngă cît şi marginea
dreaptă a unui text
Adăugarea imaginilor
<IMG> Marcajul de introducere a imaginilor

SRC = url Sursa fişierului grafic
ALT = text Textul alternativ de afişat, dacă este necesar
Alinierea imaginilor în pagină. Valori posibile:
ALIGN = aliniere top (sus), middle (în mijloc), right (la
dreapta)
HEIGHT = x Înălţimea imaginii în pixeli
WIDTH = x Lăţimea imaginii
BORDER = x Chenarul din jurul imaginii, atunci cînd acesta
este utilizat de hiperlegătură
HSPACE = x Spaţiul suplimentar pe orizontală din jurul
imaginii (în pixeli)
VSPACE = x Spaţiul suplimentar pe verticală din jurul imaginii
(în pixeli)
Marcaje pentru formulare
<FORM> </FORM> Formular HTML activ

ACTION = url Programul CGI de pe serverul care recepţionează
datele
Method = metoda Modul în care datele sunt transmise serverului
78
(GET sau POST)
<INPUT> Cîmp de text sau alte date de intrare
Tipul cîmpului de intrare <INPUT>. Valori
TYPE = optiune posibile : text, password, checkbox,
hidden, file, radio, submit, reset, image.
NAME = nume Numele simbolic al valorii cîmpului
VALUE = valoare Conţinutul prestabilit al cîmpului de text
CHECKED = optiune Buton / Casetă marcată în mod prestabilit
SIZE = x Numărul de caractere al unui cîmp de texte
SIZE = x Numărul maxim caractere acceptate
<SELECT> </SELECT> Grup de casete de validare
SIZE =x Numarul de articole de meniu care se afişează
odată (prestabilit =1)
MULTIPLE = x Permite selecţia unor articole de meniu multiple
<OPTION> Alegerea particulară într-un domeniu <SELECT>
VALUE = valoare Valoarea rezultantă a acestei selecţii din meniu
<TEXTAREA> </TEXTAREA> Cîmp de intrare de tip text pe linii multiple
ROWS = x Numarul de linii al casetei de text
COLS = x Numărul de coloane (caractere) pe linie al casetei
de text
<FIELDSET> </FIELDSET> Împarte formula în părţi logice
<LEGEND> </LEGEND> Numele asociat setului de cîmpuri (fieldset)
AIGN = s Specifică alinierea legendei (explicaţiei) afişate
(Top, Bottom, Left, Right)
TABINDEX = x Specifică ordinea elementelor atunci cînd
utilizatorul apasă tasta TAB
ACCESKEY = c Specifică tasta care asigură comanda răpidă de şa
tastatură asociată unui anumit element
DISABLED Elementul este inactiv, dar este afişat pe ecran
READONLY Elementul este afişat pe ecran, dar nu poate fi
editat
Caractere speciale
& & ampersand

~ tilda
< mai mic (less than)
> mai mare (greater than)
© simbolul de copyright
® simbolul pentru marca înregistrată
á a mic cu accent ascuţit (acute)
â a mic cu accent circumflex
ñ n mic cu tilda
79
ø o mic barat (slash)
Html avansat
<STYLE> </STYLE> Specifică informaţii referitoare la modelul de

stiluri
TYPE = val Tipul modelului de stiluri. De regulă ”text/css”
<SCRIPT> </SRIPT> Include un script, de regulă Javascript, în pagina
Web
LANGUAGE = limbaj Limbajul utilizat
EVENT = eveniment Eveniment care declanşează execuţia unor
scripturi speciale
FOR = numeobiect Numele obiectului din pagina asupra căruia
acţionează scriptul
80

Carte HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Carte HTML

Încărcat de

Drepturi de autor:

Formate disponibile

1. Ce este HTML?

Tim Berners-Lee a utilizat ca model SGML (Standard Generalized Markup

Orice document HTML începe cu notaţia <html> şi se termină cu notaţia </html>.

<title> Aceasta este prima mea pagina de Web

În plus, în secţiunea <body>...</body> putem scrie texte cît dorim. Daca nu

Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-

Pentru ca browser-ul să interpreteze corect caracterele ”spaţiu”, ”tab” şi ”CR/LF” ce

O culoare poate fi precizata în două moduri:

Culoarea unei pagini se precizează prin intermediul unui atribut al etichetei

Textul afişat este caracterizat de următoarele atribute: Mărime (size), Culoare

<basefont size = număr color = culoare style = font>

Domeniul de valabilitate al caracteristicelor precizate de această etichetă se întinde

Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se

• leftmargin (stabileşte distanţa dintre marginea stîngă a ferestrei browserului şi

Pentru a insera secvenţe de text aliniate ca indice (sub-script) sau ca exponent

Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u

În exemplul următor vom utiliza toate etichetele menţionate anterior.

Stiluri fizice şi logice

Pentru a pune în evidenta ( prin silul cursiv ) fragmente de text se utilizeaza

• <cite>...</cite> ( ”cite” înseamnă citat);

Următoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu

• <code>...</code> ( ”code” înseamnă cod sau sursa);

Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare.

Exemplul următor ilustrează că etichetele pot fi imbricate.

• un fragment de text poate fi scris cu aldine şi cursive în acelaşi timp;

Un font este caracterizat de următoarele atribute:

• culoare (stabilită prin atributul color);

O culoare poate fi precizată în două moduri:

1. Printr-un nume de culoare.

Pentru a scrie un fragment de text cu caractere de o anumita culoare se încadrează

fragment de text de culoare roşie

În acest caz browserul va utiliza primul font pe care îl cunoaşte.

• 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font şi 7 pentru cel mai mare);

Grosimea unui font

Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei.

<font weight = "500"> Fonturi de grosime 500.</font>

<font weight = "900"> Fonturi de grosime 900.</font>

Aceste etichete nu se referă la particularităţile caracterelor ce compun textul, ci la

Inserarea unei adrese

Indentarea unui bloc

Într-un bloc <pre>...</pre>, semnificaţia marcajelor HTML se păstrează. Blocul

8:00 Romana Matematica Sport

Într-un fişier HTML, caracterele ”<” şi ”>” au o semnificaţie specială pentru

• <xmp>...</xmp> (80 de caractere pe rînd);

Aceste marcaje interpretează corect caracterele ”spaţiu”, ”eticheta” şi ”CR/LF”.

• inserarea unui spaţiu suplimentar înainte de blocul paragraf;

Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor

Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele

Blocul de text cuprins intre etichetele <nobr>...</nobr> va fi afişat pe o singura

• ”left” (aliniere la stînga);

Imaginile sunt stocate în fişiere cu diverse formate. Formatele acceptate de

• GIF (Graphics Interchange Format) cu extensia .gif;

Adresa URL a unei imagini

URL (”Uniform Resourse Locator” = identificator unic al resursei) este un standard

Chenarul şi dimensionarea unei imagini

Dacă doriţi sa adăugaţi un chenar în jurul imaginii, folosiţi atributul border al

O imagine are anumite dimensiuni pe orizontală şi verticală, stabilite în momentul

Alinierea unei imagini

• ”left” – aliniere la stînga; celelalte componente sunt dispuse în partea dreapta;

Alinierea textului în jurul imaginii

Atributele hspace şi vspace precizează distanţa în pixeli pe orizontală, respectiv pe

Atributul alt admite ca valoare un text care va fi afişat în locul imaginii.

Imagini pentru fondul unei pagini

<a href = "index.html"> <img src="imagine.jpg"> </a>