HTML

Limbaje de programare
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.
Primele specificaţii de bază ale Web-ului au fost HTML, HTTP şi URL.
HTML a fost dezvoltat iniţial de Tim Berners-Lee la CERN în 1989.
Fişierele HTML sunt fişiere ASCII (pot fi create cu orice editor de texte) ṣi au extensia .html sau
.htm. Ele pot fi scrise folosind un editor ASCII sau utilizând editoare specializate.
Tag- termen consacrat pentru definirea etichetelor HTML.
Exemplu: <HTML>.
Documentul HTML constă dintr-o succesiune de blocuri, care pot fi imbricate (incluse unul în
altul). Orice document HTML începe cu notaţia <html> şi se termină cu notaţia </html>. Acestea se
numesc în literatura de specialitate "TAG-uri". Prin convenţie, toate blocurile î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.
Intre cele două marcaje <html> şi </html> se introduc două secţiuni:
- antetul <head>...</head> şi
- corpul documentului <body>...</body>.
Blocul <head> </head> …conţine informaţii despre pagin Web.
Blocul <body>...</body> cuprinde conţinutul propriu-zis al paginii HTML, adică ceea ce va fi
afişat în fereastra browser-ului.
În cazul paginilor structurate pe cadre (subferestre), blocul body este înlocuit cu frame.
Tag-ul <title> se utizează doar în interiorul tag-ului <head> ṣi conţine titlul unui document
HTML. Acesta va fi afiṣat în bara de titlul a browserului. În cazul în care tag-ul <title > lipseṣte, în bara
de titlu a ferestrei browserului va fi afiṣat numele fiṣierului.
O etichetă poate fi scrisă atât cu litere mici, cât şi cu litere mari.
Dacă introducem mai multe linii într-o pagină, browser-ul va afişa într-un singur rând, întrucât
caracterele "CR1/LF2" sunt ignorate de browser. Trecerea pe o linie nouă se face cu <br> la sfrşitul liniei
curente. <br> nu are tag corespunzător de sfȃrşit.
1 Carriage Return
2 Line Feed
1
SITE WEB – o mulţime organizată de pagini Web (de obicei cu aceeaşi tematică).
Pentru construirea unei pagini Web trebuie parcurṣi următorii 3 paṣi:
a. Editarea documentului HTML
b. Salvarea fiṣierului creat utilizând extensia “.html sau”.htm”
c. Vizualizarea paginii utilizând un browser.
Hypertext înseamnă că 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 aceluiaşi document.
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>.
Culoarea de fond
O culoare poate fi precizată în două moduri:

• 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 = “yellow”>.
Culoarea textului – se stabileşte prin intermediul atributului text al etichetei <body>.
O etichetă poate avea mai multe atribute. (Mărime (size), Culoare (color), Font (style)). Acestea
sunt atribute ale etichetei <basefont>. (Este o etichetă 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",
sau un font specific instalat pe calculatorului clientului, ca " Times New Roman ", "Arial ". Se
2
acceptă ca valoare şi o listă de fonturi separate prin virgulă, 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 până la următoarea etichetă <basefont>. Dacă acest
atribut lipseşte atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul
utilizat.
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ânga a ferestrei browserului şi
marginea stânga a conţinutului paginii);
 topmargin (stabileşte distanţa dintre marginea de sus a ferestrei browserului şi
marginea de sus a conţinutului paginii);
Stiluri pentru blocurile de text
Pentru ca un bloc de text să apară în pagina evidenţiat (cu caractere aldine), trebuie inclus între
delimitatorii <b>...</b> (bold).
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 să 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 să fie scris cu caractere cursive acesta trebuie inclus într-un bloc delimitat de
etichetele <i>...</i> (italic/înclinat).
Pentru a insera secvenţe de text aliniate ca indice (subscript) sau ca exponent (superscript),
aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>. Pentru a
insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (underline).
Pentru a insera un bloc de caractere subliniate se utilizează etichetele <strike>...</strike> sau
<s>...</s>.
Pentru a pune în evidenţă (prin stilul cursiv) fragmente de text se utilizează etichetele:
• <cite>...</cite> (citat);
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.)
Un font este caracterizat de următoarele atribute:
• culoare (stabilită prin atributul color);
• tipul sau stilul (stabilit prin atributul face);
3
• 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: printr-un nume de culoare; printr-o
constantă conform standardului de culoare RGB (Red, Green, Blue). O astfel de constantă se formează
astfel: #rrggbb, unde r, g şi b sunt cifre hexazecimale.
Culoarea fontului - Pentru a scrie un fragment de text cu caractere de o anumită culoare se
încadrează acest fragment între delimitatorii <font> … </font> avȃnd stabilit atributul color la valoarea
necesară.
<font color=blue> text de culoare albastră </font>
Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi3. 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.
<font face="Arial, serif, monospace">
Mărimea fontului - Pentru a stabili mărimea unui font se utilizează atributul size al etichetei.
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.
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 şi 900 (100
pentru fontul cel mai subtire şi 900 pentru cel mai gros).
Inserarea unei adrese - se pot utiliza facilităţile oferite de o eticheta dedicată:
<address>...</address>.
Indentarea unui bloc - Pentru ca un bloc de text să fie indentat, acesta trebuie inclus între
etichetele <blockquote>. ..</blockquote>.
Blocul preformatat - Intr-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 dacă este inserat explicit prin
&nbsp4;.
Blocuri paragraf - Cu ajutorul etichetei paragraf <p> este posibilă trecerea la o linie nouă şi
permite:
3 Stiluri de caractere
4 non-breaking space
4
- inserarea unui spaţiu suplimentar înainte de blocul paragraf;
- inserarea unui spaţiu suplimentar după blocul paragraf, dacă se foloseşte delimitatorul </p>
(acesta fiind opţional);
- alinierea textului cu ajutorul atributului align, avȃnd valorile posibile " left ", " center " sau
"right ".
Blocuri de titlu - titlurile de capitole (headers) pot fi introduse cu ajutorul etichetelor:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Toate aceste etichete se referă la un bloc de text şi trebuie însoţite de o etichetă de încheiere
similară.
Aceste etichete acceptă atributul align pentru alinierea titlului blocului de text la stȃnga (în mod
prestabilit), în centru şi la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari şi
aldine, iar <h6> foloseşte caracterele cele mai mici.
Linii orizontale - inserarea de linii orizontale se face cu ajutorul etichetei <hr>. Pentru a
configura o linie orizontală 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.
Blocuri <center>
<center>...</center> aliniază centrat toate elementele pe care le conţine.
Blocuri <nobr>
Blocul de text cuprins intre etichetele <nobr>...</nobr> va fi afişat pe o singură linie.
Blocuri <div>
Modalitatea cea mai eficientă de delimitare şi de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc
<div> (diviziune) este align (aliniere). Valorile posibile ale acestui parametru sunt: “left" (aliniere la
stanga), "center" (aliniere centrală), "right" (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. În acest caz, alinierea precizată de atributul
align al blocului are efect asupra tuturor subblocurilor incluse în blocul <div>.
Un bloc <div>...</div> admite atributul "nowrap" care interzice intreruperea rȃndurilor de către
browser.
5
Legături
Legăturile (link-urile) transformă un text obişnuit în hipertext sau hiperlegatură, care permite
trecerea rapidă de la o informaţie aflată pe un anumit server la altă informaţie memorată pe un alt server
aflat oriunde în lume.
Legaturile sunt zone active într-o pagina Web
O legatură către o pagină aflată în acelaşi director - se formează cu ajutorul etichetei <a> (de
la "anchor"=ancora).
Pentru a preciza pagina indicată de legatură se utilizează un atribut al etichetei <a> numit href,
care ia valoare numele fişierului HTML aflat în acelaşi director. Zona activă care devine sensibilă 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.
Ancore - Intr-o pagină 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 legatura catre "leg1" definită în aceeaşi pagină se utilizează eticheta <a> avȃnd
atributul href de valoare "#leg1".
Pentru a introduce o legatură catre o ancoră definită în alt document (altă pagină aflat în acelaşi
director, atributul href primeşte o valoare de forma "nume_fisier.html#nume_ancora".
Alegerea culorilor pentru legaturi

Î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 putin un clic pe ele)
• o culoare pentru legăturile active (deasupra carora 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
Utilizarea poştei electronice

Intr-o pagină Web se pot afla legături care permit lansarea în execuţie a aplicaţiei de expediere a
mesajelor electronice.
6
Pentru aceasta se utilizează în construcţia adresei URL serviciul Internet mailto: urmat de o
adresa e-mail validă.
Pentru ca să funcţioneze trebuie ca: pe calculator să fie instalată o aplicaţie de expediere a
mesajelor electronice (Outlook Express pe calc. Windows), adresa să fie validă şi calculatorul să fie
conectat la Internet.
Legaturi către fişiere oarecare - Pentru aceasta se utilizează eticheta <a> avand valoarea
atributului href egala cu adresa URL a fisierului destinatie.
Legaturi 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ătură 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 egală cu adresa URL a fişierului de sunet.
Exemplu: <a href="numefisier.au"> Link către fişierul de sunet</a>
Legături către fişiere videoclipuri - O legătură 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 egală cu
adresa URL a fişierului videoclip. (Ex: <a href="numefisier.avi">Link catre fisierul videoclip</a> )
Tag-ul <embed> permite introducerea în pagina web a oricarui tip de fişier multimedia. Are
următoarea structură:
<embed src=”…” width=”…” height=”…” align=”…” vspace=”…”hspace=”…”border=”…”>
Tabele
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> (table row).
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>.
În mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel, se utilizează un
atribut al etichetei <tabel> numit border. Acest atribut poate primi ca valoare orice număr întreg şi
reprezintă grosimea în pixeli a chenarului tabelului.
Daca atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită
egală cu 1 pixel; o valoare egală cu 0 a grosimii semnifică absenţa chenarului.
7
Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional.
Alinierea tabelului - se utilizează atributul align al etichetei <table>, cu următoarele valori
posibile: "left" (valoarea prestabilită), "center" şi "right". Alinierea este importantă pentru textul ce
înconjoară tabelul. Astfel :
• dacă tabelul este aliniat stânga (<table align="left">), atunci textul care urmează
după punctul de inserare al tabelului va fi dispus în partea dreaptă a tabelului.
• dacă tabelul este aliniat dreapta (<table align="right">), atunci textul care
urmează după punctul de inserare al tabelului va fi dispus în partea stângă a tabelului.
• dacă tabelul este aliniat pe centru (<table align="center">), atunci textul care
urmează după punctul de inserare al tabelului va fi afişat pe toată lăţimea paginii, imediat sub
tabel.
Distanţa dintre tabel şi celelalte elemente din pagina Web poate fi stabilită cu ajutorul atributelor
hspace şi vspace al etichetei <table>. Valoarea atributului hspace poate fi orice număr pozitiv, inclusiv
0, şi reprezintă distanţa pe orizontală dintre tabel şi celelalte elemente ale paginii Web. Valoarea
atributului vspace poate fi orice număr pozitiv, inclusiv 0, şi reprezintă distanţa pe verticală dintre tabel
şi celelalte elemente ale paginii Web.
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>.
Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>,
<tr>, <table>.
Culoarea textului din fiecare celulă se pote 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. Valorea prestabilită a atributului cellspacing
este 2.
Distanţa dintre marginea unei celule şi continutul ei poate fi definită cu ajutorul atributului
cellpadding al etichetei <table>.Valorile acestui atribut pot fi numere întregi pozitive, şi reprezintă
distanţa în pixeli dintre celule şi continutul ei. Valorea prestabilită a atributului cellpadding este 1.
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>. Valorile acestor atribute pot fi:
• numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a
tabelului;
8
• numere întregi intre 1 şi 100, urmate de semnul %, reprezentând fracţiunea din
lăţimea şi înălţimea totală a paginii.
Titlul unui tabel - Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption>
Aceasta etichetă trebuie plasată în interiorul etichetelor <table>...</table>, dar nu în interiorul
etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei
<caption> care poate lua una dintre valorile: bottom, top, left, right.
Cap de tabel - Aceste celule sunt introduse de eticheta <th> (table header). Toate atribute care
pot fi atasate etichetei <td> pot fi de asemenea ataşate etichetei <th>. Conţinutul celulelor definite cu
<th> este scris cu caractere aldine şi centrat.
Alinierea conţinutului unei celule - Alinierea pe orizontală a conţinutului unei celule se face cu
ajutorul atributului align care poate lua valorile: left; center; right; char (alinierea se face faţă de un
caracter). Alinierea pe verticală a conţinutului unei celule se face cu ajutorul atributului valign care poate
lua valorile: baseline (la bază); bottom; middle (la mijloc); top. Aceste atribute pot fi ataşate atât etichetei
<tr>, cat şi etichetelor <td> şi <th> pentru a stabili alinierea textului într-o singură celulă.
Dimensionarea exacta a celulelor unui tabel
Dimensiunea 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.
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 celulă se poate extinde peste celulele vecine.
Astfel:
• extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului
colspan, a carui valoare determină numărul de celule care se unifică.
• extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului
rowspan, a carui valoare determină numărul de celule care se unifică.
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.
Atributul "nowrap" - Atributul nowrap aparţine elementelor <td> şi <th>; el interzice
întreruperea unei linii de text. Astfel, în tabel pot aparea coloane cu o lăţime oricât de mare.
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ă urmatoarele trucuri:
• dupa <td> se pune dupa <td> se pune <br>.
9
Atribute Internet Explorer pentru tabele
Următoarele atribute ale etichetei <table> funcţionează cu Internet Explorer 4.0, 5.0:
• 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;
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 determină o lăţime unică pentru coloanele din grup; align determină un tip
unic de aliniere pentru coloanele din grup.
Ex: <colgroup span="3" width="100"></colgroup>
Intr-un bloc <colgroup>, coloanele pot avea configurari diferite dacă se utilizează elementul
<col>, care admite atributele:
• span identifică acea coloană din grup pentru care se face configurarea. Dacă
lipseşte, atunci coloanele sunt configurate în ordine;
• width determină o lăţime pentru coloana identificată prin span;
• align determină o aliniere pentru coloana identificată prin span.
Atributele frame şi rules
Atributul frame al etichetei <table> permite specificarea părţilor din chenarul unui tabel care vor
fi afisate.
Valorile posibile ale acestui atribut sunt:
• void - elimina 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ânga 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;
10
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;
Folosirea caracterelor speciale româneşti
În zona <head> a paginii se foloseşte un tag <meta>:
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-2">. Pentru a indica
browserului că vor fi afişate caractere din setul standard ISO-8859-2.
Valoare cod
ă ă
Ă Ă
ȃ â
Â Â
î î
Î Î
ş ş
Ş Ş
ţ ţ
Ţ Ţ
Exemplu de folosire a caracterelor speciale româneşti
<HTML>
<head><title> folosirea caracterelor speciale romanesti </title>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-2">
</head>
<body>
Bine aţi venit acasă! <br>
La mulţi ani 2020!
</body>
<HTML>
11
Adresa URL a unei imagini
În paginile HTML pot fi introduse mai multe tipuri de imagini. Cele mai raspandite sunt cele
care au extensia .jpg ,.jpeg5, .gif6 şi .png7.
URL (Uniform Resourse Locator8) este un standard folosit în identificarea unică a unei resurse
în Internet.
Pentru a insera o imagine într-o pagină, se utilizează tag-ul <img> (image). Pentru a putea
identifica imaginea care va fi inserată, se utilizează un atribut al etichetei <img> şi anume src (source).
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. <img> nu are tag
corespunzător de sfȃrşit.
Chenarul şi dimensionarea unei imagini - chenar în jurul imaginii – se utilizează 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. Dimensiunile prestabilite ale unei
imagini pot fi modificate prin intermediul atributelor width şi height.
Alinierea unei imagini - se poate face prin intermediul atributului align care poate lua
urmatorele valori: left; right; top; middle; bottom.
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.
Imagini pentru fondul unei pagini - O imagine poate fi utilizată pentru a stabili fondul unei
pagini Web. În acest scop se foloseşte atributul background al etichetei <body>, având ca valoare adresa
URL a imaginii. Imaginea se multiplică pe orizontală şi pe verticală până umple întregul ecran.
Imagini folosite ca legături - O legătură (link) introduce în pagina Web o zonă activă.
Efectuând click cu butonul mouse-ului pe această zonă, în browser se va încarca o altă pagină.
Utilizări speciale ale imaginilor - Imaginile pot fi utilizate pentru a obţine efecte deosebite într-
o pagina web. Ex: Linii orizontale formate cu ajutorul imaginilor; Simboluri speciale pentru elementele
unei liste neordonate.
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
5 Joint Photographic Expert Group

6 Graphic Interchange Format
7 Portable Network Graphics
8 identificator unic al resursei
12
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> (definition list). Un termen al listei este iniţiat de eticheta <dt> (definition term); Definiţia
unui termen este iniţiată de eticheta <dd> (definition description); Definiţia unui termen începe pe o
linie nouă şi este indentată;
Liste neordonate - O lista neordonata este un bloc de text delimitat de etichetele corespondente
<ul>...</ul> (unordered list). Fiecare element al listei este initiat 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.
Tag-urile <ul> şi <li> pot avea un atribut type care stabileşte caracterul afişat în faţa fiecărui
element al listei. Valorile posibile al acestui atribut sunt: circle, disc (valoarea prestabilită); square.
Listele neordonate pot fi imbricate pe mai multe niveluri.
Liste ordonate - O lista ordonată de elemente este un bloc de text delimitat de etichetele
corespondente <ol>...</ol> (ordered list). 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.
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, etc. (litere mari);
• "a" pentru ordonare de tipul a, b, c, etc. (litere mici);
• "I" pentru ordonare de tipul I, II, III, etc. (cifre romane mari);
• "i" pentru ordonare de tipul i , ii , iii , etc. (cifre romane mici);
• "1" pentru ordonare de tipul 1, 2, 3, etc. (cifre arabe - opţiune prestabilită);
Tag-ul <ol> poate avea un atribut start care stabileşte valoarea initială a secvenţei de ordonare.
Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.
Tag-ul <li> poate avea un atribut value care stabileşte valoarea pentru elementul respectiv al
listei. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.
Listele pot fi imbricate, adică liste incluse în interiorul altor liste.
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 lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la
"director"). Fiecare element al listei este initiat de eticheta <li>. Cele mai multe browsere afişeaza lista
de directoare ca pe o lista neordonata.
Utilizări speciale ale listelor - Dacă î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).
13
Ferestre în HTML - Ferestrele sau (cadrele) ne permit să definim în fereastra browserului
subferestre în care să 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: un număr întreg de pixeli; procente din dimensiunea ferestrei (numar
între 1 şi 99 terminat cu %); 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 ocupă î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 părţi egale, a doua fereastră ocupând o parte, iar a patra
ocupand 2 părţi.
Observaţii: dacă mai multe elemente din listă sunt configurate cu *, atunci spaţiul disponibil
rămas pentru ele se va împărţi în mod egal. O subfereastră 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 subferestre (folosind
<frameset>)
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
bordercolor nume de culoare sau o culoare definită în conformitate cu modelul de culoare RGB.
Atributul poate fi ataşat atât etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor
incluse, cât şi etichetei <frame> 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.
14
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 dacă se utilizează atributul frameborder cu valoare "no". Acest
atribut poate fi ataşat atât etichetei <frameset> (dezactivarea fiind valabilă pentru toate cadrele incluse)
cât ş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;
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 adaugate intotdeauna;
• "no" - barele de derulare nu sunt utilizabile;
• "auto" - barele de derulare sunt vizibile atunci cand este necesar.
Atributul noresize al etichetei <frame> dacă este prezent, inhibă 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.
Există browsere care nu suportă cadre pentru aceasta se utilizeaza în interiorul blocului
<frameset> eticheta <noframes>. Intre <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 insereaza într-o pagină Web în mod asemănător cu o imagine sau în modul în care se specifică
marcajul <frame>, aşa cum rezultă din următorul exemplu:
<iframe src="ferex_8.html" height=40% width=50%> </iframe> - o fereastră de cadru intern
care are 40% din înălţimea şi 50% din lăţimea paginii curente.
Formulare
Un formular este un ansamblu de zone active alcătuit din butoane, casete de selecţie, câmpuri de
editare etc. Formularele asigură construirea unor pagini Web care permit utilizatorilor să introducă
efectiv informaţii şi să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru
introducerea unui şir de caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor
15
de căutare din Web - până la o structură complexă, cu multiple secţiuni, care oferă facilităţi puternice de
transmisie a datelor. O sesiune cu o pagină web ce conţine un formular cuprinde următoarele etape:
1. Utilizatorul completează formularul şi îl expediează unui server.
2. O aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar)
stochează datele într-o bază de date.
3. Dacă este necesar serverul expediează un răspuns utilizatorului.
Un formular este definit într-un bloc delimitat de etichetele corespondente <form> şi </form>.
Există două atribute esenţiale ale elementului <form>.
Atributul action precizează ce se va întâmpla cu datele formularului odată ce acestea ajung la destinaţie.
<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.
Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.
Atributul method precizează metoda utilizată de browser pentru expedierea datelor formularului.
Pentru ca un formular să fie funcţional, trebuie precizat ce se va întampla cu el după completare
şi expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poşta electronică
(e-mail). Pentru aceasta se foloseşte un atribut al etichetei <form> şi anume action care primeşte ca
valoare "mailto:" concatenat cu o adresă validă de e-mail către care se va expedia formularul completat.
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 şi 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.
Pentru elementul <input> de tipul câmp de editare (type = "text"), alte două atribute pot fi utile:
atributul size specifică că lăţimea câmpului de editare depăşeşte această lăţime, atunci se execută
automat o derulare a acestui câmp; 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: - dacă 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.
16
Butonul Reset - Daca un element de tip <input> are atributul type configurat la valoarea "reset",
atunci în formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton, toate
elementele din formular primesc valorile prestabilite (definite odată cu formularul), chiar dacă aceste
valori au fost modificate de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name
şi o valoare printr-un atribut value.
Butoane radio - permit alegerea unei singure variante din mai multe posibile. Butoanele radio se
introduc prin eticheta <input> cu atributul type avand valoarea "radio".
Casete de validare - O casetă de validare (checkbox) permite selectarea sau deselectarea 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.
Liste de selecţie - permit utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită.
Lista de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <select> şi </select>.
O 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 prestabilită fiind 1) câte elemente din listă sunt vizibile la un moment dat pe
ecran (celelalte devenind vizibile prin acţionarea barei de derulare ataşate automat listei). Elementele
unei liste de selecţie sunt incluse în listă cu ajutorul etichetei <option>. Atributul value primeşte ca
valore 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 prestabilită a unui element al listei.
Lista de selecţie cu selecţii multiple
O listă de selecţie ce permite selecţii multiple se creează întocmai ca o listă de selecţie obişnuită.
În plus, eticheta <select> are un atribut multiple. 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.
Câmpuri de editare multilinie - Intr-un formular câmpuri de editare multilinie pot fi incluse cu
ajutorul etichetei <textarea>. Eticheta are urmatoarele atribute:
• atributul cols - specifică numărul de caractere afişate într-o linie;
• atributul rows - specifică numărul de linii afişate simultan;
• atributul name - permite ataşarea unui nume câmpului de editare multilinie;
• atributul wrap - trecerea cuvintelor pe rândul urmator. Acest atribut poate primi
urmatoarele valori: " off "; în acest caz: întreruperea cuvintelor la marginea dreaptă a editorului
17
se produce numai când doreşte utilizatorul; caracterul de sfârşit de linie este inclus în textul
transmis serverului o dată cu formularul; "hard"; în acest caz: se produce întreruperea cuvintelor
la marginea dreaptă a editorului; caracterul de sfârşit de linie este inclus în textul transmis
serverului o dată cu formularul; "soft"; în acest caz: se produce întreruperea cuvintelor la
marginea dreaptă a editorului; nu se include caracterul de sfârşit de linie în textul transmis
serverului o dată cu formularul;
Formulare
Butoane - Intr-un formular pot fi afişate butoane. Când utilizatorul apasă un buton, se lansează
în executie o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de
funcţii (acest lucru este posibil dacă 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 două atribute ale elementului "button" sunt: atributul name, care
permite atasarea unui nume butonului şi atributul value, care primeste ca valoare textul ce va fi afisat pe
buton.
Un buton pentru lansarea în executie a unei actiuni poate fi introdus într-un formular prin
elementul <input> avand atributul type configurat la valoarea "button".
Exista o a doua modalitate de a introduce intr-o pagina Web un buton de apasat, şi anume prin
intermediul blocului <button>...</button>. Atributele posibile ale elementului "button" sunt: name -
acordă elementului un nume; value - precizează textul care va fi afişat pe buton; type - precizează
acţiunea ce se va executa la apăsarea butonului dacă 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:
• 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 intr-un formular pot avea un atribut readonly care
interzice modificarea conţinutului acestor elemente.
18
Stiluri de pagină – CSS (Cascading Style Sheets)
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- foi în stil cascadă);
• sintaxa Javascript.
Rolul principal al CSS este acela de a îmbunătăţi, uşura, automatize, fluidiza un document
HTML.
Informaţiile CSS pot fi stocate într-un document separat de documentul HTML, denumit foaie
de stil sau poate fi integrat în documentul HTML. Pot fi utilizate foi de stil multiple pentru un singur
document HTML.
O foaie de stil este compusă dintr-o listă de reguli. Fiecare set de reguli este format, din unul sau
mai mulţi “selectori” şi o “declaraţie”. O declaraţie este formată dintr-o listă de comenzi separate de
punct şi virgulă (;). Fiecare declaraţie este o proprietate, două puncte (:), o valoare şi apoi punct şi virgulă
(;).
Stiluri dedicate - se aplică blocurilor de text pentru care sunt definite.
Exemplu:
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 să fie utilizat de către mai multe elemente (de ex. "h1", "h2", şi "p") atunci se
utilizează o listă a acestor elemente, separate prin virgula:
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>:
Dacă se doreşte ca un titlu de mărimea 2 să folosească clasa de stiluri "ac" atunci scriem:
- "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.
19
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ă se doreşte ca o clasă de stiluri să fie aplicabilă numai pentru anumite
elemente ale documentului (exemplu "p") atunci în construcţie va apărea acest element (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" se
procedează astfel: în blocul <style>...</style> se introduce definiţia stilului conform sintaxei:
în elementul în care se doreşte utilizarea locală a acestui stil, se foloseşte atributul id care primeşte
valoare numele stilului definit anterior.
Dacă se doreşte ca un stil "identificat" să fie aplicabil numai pentru anumite elemente ale
documentului (exemplu "h2") atunci în construcţia selectorului va aparea acest element (exemplu
"h2#ac").
Stiluri in-line - Stilurile in-line sunt definite chiar în eticheta ce iniţiază blocul în care se doreşte
aplicarea acestor stiluri. Pentru aceasta se utilizează atributul universal style. Valoarea dată atributului
style este tocmai descrierea stilului, cuprinsă între ghilimele "..." (nu intre acolade {..}). Exemplu:
Dacă se doreşte utilizarea unui anumit style pentru un fragment de text, atunci se include acest
text într-un bloc cu ajutorul delimitatorilor <span>...</span>, după care se utilizează atributul style
pentru eticheta <span>.
Stiluri definite în fisiere externe - Stilurile definite în interiorul unui bloc <style>...</style> pot
fi transferate într-un fisier 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:
20
1. Se crează 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. atributul rel cu valoarea
"stylesheet", atributul href având ca valoare adresa URL a fişierului creat la punctul 1;
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>.
Exemplu: Se crează un fişier în Notepad şi se salvează cu extensia css. Acesta va conţine:
<p> {font-family:Tahoma; font-size:12px; color:red; font-weight:bold; font-style:italic;}
h1 {font-family:Times, serif; font-size:18px; color:blue; font-weight:bold; background-color:yellow;}
Se salvează fişierul creat cu numele “stilulmeu.css”, întru-un director gol. In acelaşi director se crează
un fişier html, în antetul căruia apelează fişierul de stiluri creat anterior:
<html>
<head>
<title> pagina cu stilurile mele </title>
<link rel="stylesheet" type="text/css" href="stilulmeu.css" />
</head>
<body>
<h1> Acesta este titlul, asa cum l-am definit </h1>
<p> Acesta este primul paragraf, care are caracteristicile definite in fisierul de stiluri
"stilulmeu.css"
Prin modificarea fisierului css voi obtine efecte in toate paginile html care il apeleaza. </p>
</body>
</html>
Pseudoclase - se utilizează pentru personalizarea legăturilor. Ele se definesc în blocul
<style>...</style> sau într-un fisier extern, conform sintaxei:
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>
În browsere cursorul mouse-ului are în general o formă simplă, luând pe parcursul vizionării
paginii respective maximum două înfăţisări diferite:
1. Mâna - atunci când este poziţionat pe o legătură
21
2. Bara verticală - atunci când este poziţionat pe alt obiect decât o legătură.
Acestea însă sunt formele implicite. 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 orientate Est-Vest la
trecerea mouse-ului peste un link ar trebui folosit codul:
Coduri folosite pentru formele de cursor:
Dynamic HTML - DHTML
DHTML (HTML dinamic) reprezintă o îmbunătăţire a HTML, care adaugă modificări dinamice
şi interactivitate paginilor Web. Cuvântul dinamic înseamnă a avea acţiune, sau răspuns la utilizator.
Cele mai multe trăsături dinamice pe care le vom explora sunt cuprinse în JavaScript, dar altele, cum ar
fi „image maps” sunt îmbunătăţiri faţă de HTML-ul vechi.
DHTML implică interacţiunea a trei elemente:
 codul HTML;
 stilul foilor în cascadă pentru a defini aspectul paginilor;
 un limbaj scriptic, de obicei JavaScript sau VBScript pentru a controla comportamentul
elementelor pe pagină.
22
Lucrând cu aceste elemente, autorul paginilor Web poate crea documente care interacţionează
dinamic cu utilizatorul.
Unele utilizări ale DHTML includ:
 text animat care se mută şi se schimbă în funcţie de acţiunea utilizatorului;
 meniurile pop-up care permit utilizatorilor un acces rapid la alte pagini în Web fără „devoting
valuable screen space” la o listă lungă şi complicată de legături;
 pagini Web care-şi recuperează conţinutul de la surse de date externe, dând autorilor de
pagini Web mai multă libertate pentru tipul de material pe care îl pot afişa în pagina lor.
Image Maps. Prima trăsătură dinamică permite utilizatorului să selecteze diferite părţi ale unei imagini
pentru a provoca un eveniment. Aceste domenii, numite puncte fierbinţi (hot spots) pot acţiona ca
legături la alte pagini sau pot invoca programele JavaScript. Fiecare punct fierbinte este asociat cu un
eveniment, de obicei o legătură la o nouă pagină sau la o ţintă în pagina curentă. Există două modalităţi
de a aplica „image maps” în HTML: pe locul clientului sau pe locul serverului.
Pricipalele funcţii pe care structura şi aspectul grafic al unui site Web trebuie sǎ le îndeplineascǎ
sunt:
 sǎ informeze;
 sǎ comunice;
 sǎ convingǎ.
Pentru îndeplinirea fazei de proiectare a sitului vor fi avute în vedere următoarele: organizarea
informaţiilor, structurarea sitului în ansamblu, analizarea principalelor elemente ale sitului şi organizarea
instrumentelor de navigare.
Hypertext Preprocessor - PHP
PHP este un limbaj de programare pentru site-uri web.

Sirurile de caractere sunt bucăţi de text, bine delimitate, folosite în codul sursă. Fiecare caracter
într-un şir de caractere are asociat un index, numărătoarea pornind de la 0 (ex. “hello world”: h – 0, e –
1, l – 2, l – 3, o – 4, etc.) Un şir de caractere poate fi specificat în 4 feluri:
1. Ghilimele simple – cea mai simplă metodă de a specifica un şir de caractere
<?php
$text = ‘Hello World’;
echo $text;
?>
Functia echo afişează textul specificat.
Se va afişa Hello World
23
2. Ghilimele duble – permite interpretarea variabilelor şi caracterelor speciale
<?php
$name = “World”;
$text = “Hello \n$name”
echo $text;
?>
“\n” este un caracter special ce reprezintă o linie nouă.
Se va afişa Hello
World
3. Sintaxa heredoc – similare cu ghilimele duble, nu mai este necesară utilizarea caracterului
special “\n” pentru linie nouă
Se specifică caracterul special “<<<” urmat de un identificator şi o linie nouă. Se precizează
şirul de caracter şi la final identificatorul ales la pasul precedent.
<? php
$name = “World”;
$text = <<<EOT
Hello
$name
EOT;
echo $text;
?>
Se va afişa Hello
World
4. Sintaxa nowdoc – similare cu ghilimele simple, nu mai este necesară utilizarea caracterului
special “\n” pentru linie nouă
Se specifică caracterul special “<<<” urmat de identificator închis în ghilimele simple şi o
linie nouă. Se precizează şirul de caractere şi la final identificatorul ales la pasul precedent.
<?php
$text = <<< ‘EOT’
Hello
World
EOT;
echo $text;
24
?>
Se va afişa Hello
World
Câteva funcţii predefinite care lucrează cu şiruri de caractere:

1. Strlen – returnează lungimea unui şir de caractere
2. Strcmp – compară două şiruri de caractere $str1, $str2 şi returnează:
a. < 0, dacă $str1 < $str2
b. 0, dacă $str1 = $str2
c. > 0, dacă $str1 > $str2
3. Strrev – inversează un şir de caractere
4. Strpos – gaseşte poziţia primei apariţii a unui caracter într-un şir de caractere
<?php
$text1 = “Hello”;
$text2 = “World”;
$len = strlen($text1); //5 caractere
$cmp = strcmp($text1, $text2); // < 0
$rev = strrev($text1); //sirul de caractere olleH
$pos = strpos($text1, ‘l’); //pozitia 2
?>
` Observaţie. // reprezintă un comentariu în PHP (cod care nu este executat)
Formulare
Una dintre cele mai puternice caracteristile ale limbajului PHP este modul în care se ocupă de
formularele HTML.
De exemplu avem următorul formular HTML index.html:
<html>
<body>
<form action=”action.php” method=”post”>
Nume: <input type=”text” name=”name”>
<input type=”submit”>
</form>
</body>
</html>
25
Când utilizatorul completează formularul şi apasă butonul de submit, informaţia din formular va
fi transmisă la un fişier action.php pentru a fi procesată prin metoda POST (un fişier cu extensia .php
poate conţine atât cod HTML cât şi PHP):
<html>
<body>
Hello <?php echo $_POST[“name”]; ?>
</body>
</html>
Folosind variabila $_POST putem accesa data transmisă în formular.
POST şi GET
Metodele POST şi GET creează o mulţime ce conţine perechi de elemente sub forma chei-
valoare. Cheile sunt numele specificate în formulare şi valorile sunt informaţiile date de utilizator (ex.
<input type=”text” name=”varsta”> <input type=”text” name=”email”> varsta şi email sunt cheile,
valorile fiind specificate de utilizator).
POST transmite informaţia la scriptul de PHP prin metoda HTTP POST.
GET transmite informaţia la scriptul de PHP prin parametrii URL (ex.
http://localhost/index.html?varsta=20&email=myemail@gmail.com).
Sesiuni
Sesiunile sunt o metodă simplă de a salva informaţia pentru utilizatori individuali. În general o
sesiune durează până când utilizatorul închide browserul. În PHP o sesiune este pornită folosind funcţia
session_start(). Informaţiile se stochează în variabila $_SESSION care reprezintă o mulţime de elemente
sub forma chei-valoare. Astfel, putem trimite informaţii de la un script php la altul.
Exemplu: două fisiere php hello.php şi world.php;
hello.php
<html>
<body>
<?php
session_start();
$_SESSION[‘mesaj’] = “Hello World”;
?>
<a href=”world.php”>Pagina urmatoare</a>
</body>
</html>
world.php
26
<html>
<body>
<?php
session_start();
echo $_SESSION[‘mesaj];
?>
</body>
</html>
Fişiere şi directoare
Manipularea fisierelor şi directoarelor în PHP se realizează utilizând funcţiile predefinite.
1. Fişiere
a. fopen – deschide un fisier şi returnează o referinţă la acel fişier, primeşte ca
parametru numele fişierului şi modul (r – citire, a - adaugare, w – suprascrie
conţinutul fişierului)
b. fwrite – scrie într-un fişier
c. fread – citeşte dintr-un fişier
d. fclose – închide referinţa la un fişier
<?php
//Scriere intr-un fisier
$handle = fopen(‘C:\mydirectory\myfile.txt’, ‘w’);
fwrite($handle, ‘Hello’);
fwrite($handle, ‘World’);
fclose($handle);
//Citire dintr-un fisier

$handle = fopen(‘C:\mydirectory\myfile.txt’, ‘r’);
$contents = fread($handle);
echo $contents;
fclose($handle);
//Adaugare continut intr-un fisier

$handle = fopen(‘C:\mydirectory\myfile.txt’, ‘a’);
fwrite($handle, ‘Hello’);
fclose($handle);
27
?>
2. Directoare
a. getcwd – returnează directorul curent de lucru
b. chdir – schimbă directorul curent de lucru
c. opendir – deschide o referinţă la un director
d. readdir – citeşte conţinutul directorului
e. closedir – închide referinţa la director
<?php
echo getcwd(); //C:\mydirectory
chdir(‘C:\anotherdirectory’); //C:\anotherdirectory
$handle = opendir(‘C:\mydirectory’);
while (($file = readdir($handle)) !== false) {
echo $file;
}
closedir($dir);
?>
Javascript
Javascript este un limbaj de programare simplu, de tip script, pentru definirea comportamentului
elementelor dintr-o pagina Web. Nu este acelaşi lucru cu mult mai complexul limbaj de programare
Java.
Javascript poate specifica, în mod obisnuit î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 determină apariţia şi derularea unui mesaj:
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.
28
Multe evenimente pot fi gestionate cu Javascript.
Handler de
Eveniment Se desfăşoară atunci când
eveniment
utilizatorul elimină controlul de intrare de pe un element al unui

blur onBlur
formular
utilizatorul execută un click pe un element al unui formular sau pe o

click onClick
legătură
utilizatorul modifică valoarea unui text, zonă de text sau element de

change onChange
selecţie
focus utilizatorul atribuie unui element de formular control de intrare onFocus
load utilizatorul încarcă pagina în programul de navigare onLoad
utilizatorul deplasează indicatorul mouse-ului deasupra unei legături

mouseover onMouseover
sau a unei ancore
select utilizatorul selectează campul de intrare al unui element de formular onSelect
submit utilizatorul transmite un formular onSubmit
unload utilizatorul abandonează pagina onUnload
29
Marcaje de bază
Marcaje pentru liste
30
Formatarea caracterelor
Marcaje pentru cadre
<FRAMESET>
Definirea redactarii paginii
</FRAMESET>
COLS=x Numarul şi marimea relativa a coloanelor
ROWS=x Numarul şi marimea relativa a liniilor
Specifica starea "on" (activa) sau "off" (inactiva)

BORDER=x
pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = x Specifica marimea chenarului
FRAMESPACING = x Marimea spatiului dintre doua cadre adiacente
31
<FRAME> Definitia unui anumit cadru
SRC=url URL-ul sursa pentru cadru
Numele cadrului (utilizat impreuna cu

NAME=nume TARGET=nume ca parte componenta a marcajului de
tip ancora <a>
SCROLLING=scrl Defineste optiunea barei de derulare.Valori posibile:
Marcaje pentru tabele
<TABLE> </TABLE> Tabel HTML
BORDER=x Chenarul tabelului
CELLPADDING=x Spatiul suplimentar în cadrul celulelor tabelului
CELLSPACING=x Spatiul suplimentar intre celulele tabelului
WIDTH=x Latimea impusa tabelului
FRAME=valoare Ajustarea fina a tabelului
RULES=valoare Ajustarea fina a riglelor tabelului
BORDERCOLOR = culoare Specifica culoarea chenarului tabelului
32
BORDERCOLORLIGHT = Cea mai deschisa culoare din cele doua culori specificate
culoare
BORDERCOLORDARK =
Cea mai inchisa culoare din cele doua culori specificate
culoare
Aliniaza tabelul la marginea din stanga a paginii, iar textul curge

ALIGN=left
în partea dreapta
Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge

ALIGN=right
în partea stanga
HSPACE=x Spatiu suplimetar pe orizontala în jurul tabelului
VSPACE=x Spatiu suplimetar pe verticala în jurul tabelului
COLS=x Specifica numarul de coloane ale unui tabel
<COLGROUP> Defineste un set de definitii de coloane cu ajutorul marcajului

</COLGROUP> <col>
<COL WIDTH=x> Defineste latimea unei coloane exprimata în pixeli
<THEAD> </THEAD> Defineste titlul tabelului
<BODY> </TBODY> Defineste corpul tabelului
<TR> </TR> Linie de tabel
BGCOLOR=culoare Specifica culoarea de fond pentru intreaga linie
ALIGN=aliniere Alinierea celulelor de pe linia curenta (left, center, right)
<TD </TD> Celula de date a tabelului
BGCOLOR=culoare Specifica culoarea de fond pentru celula de date
COLSPAN=x Numarul de coloane pe care se intinde celula curenta de date
33
ROWSPAN=x Numarul de linii pe care se intinde celula curenta de date
Alinierea materialului din cadrul celulei de date. Valori posibile:

ALIGN=aliniere
(left, right, center)
Alinierea pe verticala a materialului din cadrul celulei de

VALIGN=aliniere
date.Valori posibile: (top, bottom, middle)
BACKGROUND=url Specifica imaginea de fond pentru celula tabelului
NOWRAP Nu permite despartirea textului pe linii în cadrul unei celule
ALIGN=baseline Aliniaza celule de date cu linia de baza a textului adiacent
Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit

ALIGN=caracter
este ".")
Aliniaza atat marginea din stanga cat şi marginea din dreapta a unui
ALIGN=justify
text
Adaugarea imaginilor
Marcaje pentru formulare
<FORM> </FORM> Formular HTML activ
34
ACTION=url Programul CGI de pe serverul care receptioneaza datele
METHOD=metoda Modul în care datele sunt transmise serverului(GET sau POST)
<INPUT Camp de text sau alte date de intrare
Tipul campului de intrare <INPUT>. Valori posibile: text, password,

TYPE=optiune
checkbox, hidden, file, radio, submit, reset, image.
NAME=nume Numele simbolic al valorii campului
VALUE=valoare Continutul prestabilit al campului de text
CHECKED= optiune Buton/caseta marcata în mod prestabilit
SIZE=x Numarul de caractere al unui camp de text
SIZE=x Numarul maxim de caractere acceptate
<SELECT>
Grup de casete de validare
</SELECT>
SIZE=x Numarul de articole de meniu care se afiseaza odata (prestabilit=1)
MULTIPLE=x Permite selectia unor articole de meniu multiple
<OPTION Alegerea particulara intr-un domeniu <SELECT>
VALUE=valoare Valoarea rezultanta a acestei selectii din meniu
<TEXTAREA>
Camp de intare de tip text pe linii multiple
</TEXTAREA>
ROWS=x Numarul de linii al casetei de text
35
COLS=x Numarul de coloane (caractere) pe linie al casetei de text
<FIELDSET>
Imparte formularul în parti logice
</FIELDSET>
<LEGEND>
Numele asociat setului de campuri (fieldset)
</LEGEND>
ALIGN=s Specifica alinierea legendei (explicatiei) afisate (top, bottom, left, right)
TABINDEX=x Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab
Specifica tasta care asigura comanda rapida de la tastatura asociata unui

ACCESKEY=c
anumit element
DISABLED Elementul este inactiv, dar este afisat pe ecran
READONLY Elementul este afisat pe ecran dar nu poate fi editat
Carcatere speciale
& & ampersand
˜ Tilda
< mai mic (less than)
> mai mare (greater than)
© simbolul de copyright
36
HTML avansat
<STYLE> Specifica informatii referitoare modelul de stiluri

</STYLE>
TYPE=val Tipul modelului de stiluri. De regula "text/css"
<SCRIPT>
Include un script de regula Javascript, în pagina Web
</SCRIPT>
LANGUAGE=limbaj Limbajul utilizat
Eveniment care declanseaza executia unor scripturi

EVENT=eveniment
specifice
Numele obiectului din pagina asupra caruia actioneaza

FOR=numeobiect
scriptul
37

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

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Limbaje de programare

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

Stiluri pentru blocurile de text

Alegerea culorilor pentru legaturi

Utilizarea poştei electronice

Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este

5 Joint Photographic Expert Group

Coduri folosite pentru formele de cursor:

Dynamic HTML - DHTML

PHP este un limbaj de programare pentru site-uri web.

Câteva funcţii predefinite care lucrează cu şiruri de caractere:

//Citire dintr-un fisier

//Adaugare continut intr-un fisier

utilizatorul elimină controlul de intrare de pe un element al unui

utilizatorul execută un click pe un element al unui formular sau pe o

utilizatorul modifică valoarea unui text, zonă de text sau element de

focus utilizatorul atribuie unui element de formular control de intrare onFocus

load utilizatorul încarcă pagina în programul de navigare onLoad

utilizatorul deplasează indicatorul mouse-ului deasupra unei legături

select utilizatorul selectează campul de intrare al unui element de formular onSelect

submit utilizatorul transmite un formular onSubmit

unload utilizatorul abandonează pagina onUnload

Marcaje pentru liste

Marcaje pentru cadre

COLS=x Numarul şi marimea relativa a coloanelor

ROWS=x Numarul şi marimea relativa a liniilor

Specifica starea "on" (activa) sau "off" (inactiva)

FRAMEBORDER = x Specifica marimea chenarului

FRAMESPACING = x Marimea spatiului dintre doua cadre adiacente

SRC=url URL-ul sursa pentru cadru

Numele cadrului (utilizat impreuna cu

SCROLLING=scrl Defineste optiunea barei de derulare.Valori posibile:

Marcaje pentru tabele

<TABLE> </TABLE> Tabel HTML

BORDER=x Chenarul tabelului

CELLPADDING=x Spatiul suplimentar în cadrul celulelor tabelului

CELLSPACING=x Spatiul suplimentar intre celulele tabelului

WIDTH=x Latimea impusa tabelului

FRAME=valoare Ajustarea fina a tabelului

RULES=valoare Ajustarea fina a riglelor tabelului

BORDERCOLOR = culoare Specifica culoarea chenarului tabelului

Aliniaza tabelul la marginea din stanga a paginii, iar textul curge

Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge

HSPACE=x Spatiu suplimetar pe orizontala în jurul tabelului

VSPACE=x Spatiu suplimetar pe verticala în jurul tabelului

COLS=x Specifica numarul de coloane ale unui tabel

<COLGROUP> Defineste un set de definitii de coloane cu ajutorul marcajului

<COL WIDTH=x> Defineste latimea unei coloane exprimata în pixeli

<THEAD> </THEAD> Defineste titlul tabelului

<BODY> </TBODY> Defineste corpul tabelului

<TR> </TR> Linie de tabel

BGCOLOR=culoare Specifica culoarea de fond pentru intreaga linie

ALIGN=aliniere Alinierea celulelor de pe linia curenta (left, center, right)

<TD </TD> Celula de date a tabelului

BGCOLOR=culoare Specifica culoarea de fond pentru celula de date

COLSPAN=x Numarul de coloane pe care se intinde celula curenta de date

Alinierea materialului din cadrul celulei de date. Valori posibile:

Alinierea pe verticala a materialului din cadrul celulei de

BACKGROUND=url Specifica imaginea de fond pentru celula tabelului

NOWRAP Nu permite despartirea textului pe linii în cadrul unei celule

ALIGN=baseline Aliniaza celule de date cu linia de baza a textului adiacent

Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit

Marcaje pentru formulare

<FORM> </FORM> Formular HTML activ

& & ampersand