HTML Prin Exemple

Cuprins Cuprins
Introducere ....................................................................................................................... 6
Preliminarii Ce este World Wide Web? ..................................................................... 7
Lecia 1 Prima pagin Web ................................................................................ 11
Lecia 2 Culori, fonturi i margini ....................................................................... 15
Lecia 3 Stiluri pentru blocurile de text .............................................................. 19
Lecia 4 Configurarea fonturilor ......................................................................... 24
Lecia 5 Blocuri de text ....................................................................................... 27
Lecia 6 Liste....................................................................................................... 33
Lecia 7 Tabele .................................................................................................... 39
Lecia 8 Imagini .................................................................................................. 51
Lecia 9 Documentarea unei pagini Web .......................................................... 60
Lecia 10 Legturi ................................................................................................. 65
Lecia 11 Sunete i videoclipuri ........................................................................... 75
Lecia 12 Hri de imagini ..................................................................................... 78
Lecia 13 Formulare .............................................................................................. 82
Lecia 14 Cadre ..................................................................................................... 95
Lecia 15 Stiluri .................................................................................................. 103
Lecia 16 Stiluri. Configurarea fonturilor ........................................................... 113
Lecia 17 Stiluri. Setarea textului ....................................................................... 119
Lecia 18 Stiluri. Configurarea blocurilor de text .............................................. 130
Lecia 19 Straturi. Sintaxa CSS.......................................................................... 140
Lecia 20 Straturi. Sintaxa LAYER ..................................................................... 150
Anexa A Crearea primei pagini Web................................................................ 159
Anexa B Cutarea fiierelor imagine ................................................................ 160
Anexa C Hri de imagini .................................................................................. 161
Anexa D URL .................................................................................................... 162
Anexa E Nume de culori .................................................................................. 164
Cuprins
Introducere Introducere
Lucrarea HTML un manual prin exemple i propune s ofere
cititorului o introducere n programarea aplicaiilor care ruleaz pe
Internet.
Cu toate c HTML nu este un limbaj de programare propriu-zis, el
constituie limbajul gazd n care sunt ncapsulate obiectele i aplicaiile
pe Internet. Studierea acestui limbaj constituie astfel primul pas pentru
cei care dezvolt aplicaii orientate pe Web.
Cartea prezint n detaliu elementele limbajului HTML i extinderea
acestuia DHTML. Ea este structurat n 20 de capitole, ultimele 6 fiind
dedicate limbajului DHTML.
n cadrul fiecrui capitol sunt analizate marcajele i atributele asociate
acestora. Prezentarea teoretic a acestor noiuni este nsoit de exemple
complete de fiiere surs i imagini care reflect vizualizarea lor n
diferite browsere.
Dei are forma unui manual introductiv n HTML, aceast lucrare
conine peste 90% din elementele limbajului HTML, fiind scris dup
documentaia de referin n domeniu.
Ea este util elevilor, studenilor, profesorilor i tuturor celor interesai
s cunoasc limbajul HTML, care a fcut posibil dezvoltarea exploziv
a Internetului n ultimii 10 ani.
Dorim succes celor care efectueaz primii pai n Internet prin
intermediul acestei cri!
Bucureti, 30 decembrie 1999
Autorul
Dedic aceast carte
soiei mele, Iulia.
Preliminarii Preliminarii
Ce este World Wide Web? Ce este World Wide Web?
Inter-reele i Internet
n lume exist milioane de calculatoare.
n aceste calculatoare sunt stocate informaii.
Pentru a putea face schimb de informaii, calculatoarele sunt interconectate, formnd
reele de calculatoare.
Multe dintre aceste reele de calculatoare sunt conectate ntre ele, formnd inter-reele
(reele de reele de calculatoare). O reea de reele se numete internet (net nseamn n
limba englez reea).
Cea mai mare inter-reea public (reea de reele de calculatoare cu acces public) este
reeaua Internet.
World Wide Web
Exist mai multe metode de acces (servicii) la informaia stocat pe un calculator prin
intermediul reelei Internet:
FTP (File Transfer Protocol) este serviciul pentru transferul fiierelor;
Telnet este serviciul pentru accesul de la distan la resursele unui calculator;
Electronic Mail este serviciul de mesagerie electronic;
News este serviciul de tiri;
World Wide Web este o alt metod (serviciu) de acces la informaia stocat pe un
calculator aflat oriunde n lume.
World Wide Web (pe scurt WWW) nseamn n traducere ad-litteram pnz de
pianjen ntins n lumea ntreag.
Denumirea evideniaz caracterul planetar al schimbului de informaii prin intermediul
reelei Internet.
Tehnologia client-server
World Wide Web-ul utilizeaz tehnologia client-server, care const n (vezi figura
urmtoare):
1. Un calculator (clien-
tul) formuleaz o cerere.
2. Cererea este
expediat unui server.
3. Cererea parcurge un
mediu pn la server.
4. Serverul analizeaz
cererea, o execut,
formuleaz rspunsul i
l expediaz clientului.
5. Rspunsul parcurge
mediul napoi ctre client.
6. Clientul recepio-
neaz rspunsul la
cererea solicitat.
8
HTTP
Pentru a comunica ntre ele, dou calculatoare folosesc un sistem de reguli ce formeaz
un protocol.
Serviciul WWW utilizeaz ca protocol de comunicare ntre client i server HiperText
Transfer Protocol (HTTP), adic Protocolul de Transfer al Hipertextului.
Hipertext
Hipertextul este un text mbogit. El conine:
text obinuit;
etichete pentru formatarea textului i ncapsularea altor tipuri de informaii (salturi
rapide ctre alte resurse de informaii, sunete, imagini, filme etc).
Hipertextul este stocat n fiiere avnd o extensie special: .htm sau .html.
HTML
Un fiier ce conine hipertext este scris ntr-un limbaj specific numit HiperText Markup
Language (HTML), adic Limbajul de Marcare a Hipertextului.
HTML este un limbaj care permite inserarea de:
text;
sunete, imagini i filme;
indicatori de prezentare a informaiei;
legturi (link-uri) ctre alte pagini Web aflate oriunde n lume;
aplicaii (programe JavaScript, Java, VRML etc.).
Host
Un calculator din Internet se numete host (gazd).
Pentru a fi identificat n mod unic, calculatorul primete un nume (o adres), de
exemplu, mishu.cnmv.ro
Pachete
Informaia care circul ntre calculatoare interconectate este ncapsulat n pachete.
Un pachet conine:
adresa expeditorului i adresa destinatarului;
informaia;
numele aplicaiei client care a formulat cererea i numele aplicaiei de pe server care
va primi cererea spre rezolvare.
Pachetul este lansat n reeaua Internet.
TCP/IP
Reeaua Internet dispune de mijloace de dirijare a pachetelor astfel nct acestea s
ajung la destinaie.
Un astfel de mijloc de dirijare a pachetelor este Internet Protocol (IP), adic
Protocolul Internet.
Reeaua Internet dispune de mijloace de corecie a erorilor de transmitere a pachetelor.
Un astfel de mijloc de corecie este Transfer Control Protocol (TCP), adic Protocolul
de Control al Transferului.
HTML prin exemple
9
Preliminarii Ce este World Wide Web?
Pagina Web
n orice calculator informaia este stocat n uniti numite fiiere.
Aceste fiiere conin:
text;
programe;
imagini;
filme;
sunete etc.
Pentru WWW sunt importante anumite fiiere speciale, numite i pagini Web. Acestea
au extensia .htm sau .html.
Browser
Paginile Web sunt vizualizate pe calculatorul client prin intermediul unei aplicaii
speciale numite browser.
Browser-ul permite schimbarea paginii vizualizate prin intermediul:
unei ferestre speciale, numit Addresss;
meniului File, Open, Browse;
legturilor afiate n pagina Web.
Cele mai utilizate browsere sunt:
Netscape Communicator;
Internet Explorer;
HotJava.
Site Web
O mulime organizat de pagini Web formeaz un site Web.
n WWW, clientul solicit pagini Web de la un site Web.
httpd
HiperText Transfer Protocol Demon (httpd) este o aplicaie care se execut pe serverul
Web pentru a prelucra cererile de pagini Web recepionate de acesta de la clieni.
Home Page
Home Page (pagina gazd) este o pagin din site-ul unei organizaii care:
l este n mod uzual prim pagin accesat din site;
l este o pagin de prezentare a organizaiei;
l ofer modul cel mai eficient de explorare a informaiilor aflate n site.
Server Web
Un server Web este un calculator care adpostete un Site Web i care este capabil s
rspund la cereri de pagini Web din partea unui client.
Pentru a putea rspunde permanent cererilor Web, un calculator trebuie s ruleze
permanent o aplicaie special: httpd.
Cele mai ntlnite servere Web sunt:
Apache Server;
Microsoft Web Server;
Oracle Web Server.
10
URL
Un utilizator al serviciului WWW poate solicita vizualizarea prin intermediul browse-
rului a unei pagini Web care poate fi localizat pe un calculator aflat oriunde n lume.
O pagin Web este unic determinat prin adresa URL asociat.
Uniform Resource Locator (URL) nseamn Identificator Universal al Resurselor n
Internet. Un exemplu de URL este: http: //www.cnmv.ro/index.html
l Adresa URL a paginii curente vizualizate de browser apare n fereastra Address.
l Un URL precizeaz:
metoda de acces la pagin de exemplu: http;
calculatorul pe care se afl de exemplu: www.cnmv.ro;
numele paginii de exemplu: index.html.
Avantajele serviciului World Wide Web
Paginile Web au urmtoarele caracteristici:
l sunt multimedia, adic ele conin informaii sub form de text, imagini, sunete, filme etc;
l sunt interactive, adic rspund la cererile utilizatorului;
l sunt independente de platforma hardware i software, adic se vd la fel pe orice
calculator, avnd instalat orice sistem de operare i utiliznd orice browser.
Crearea unei pagini Web
Crearea unei pagini Web presupune:
1. Editarea fiierului HTML utiliznd:
un editor de texte obinuit (Notepad, Wordpad, Word, WordPerfect etc.)
un editor de texte dedicat (Netscape Composer, HotMetal etc.)
2. Salvarea paginii Web cu extensia .html sau .htm ntr-un site Web;
3. Rezolvarea referinelor coninute n pagina Web (legturi, imagini, sunete, filme,
aplicaii Java etc.).
Pagina Web astfel creat poate fi vizualizat prin intermediul unui browser.
HTML prin exemple
Lecia 1 Lecia 1
Prima pagin Web Prima pagin Web
Crearea unui document Web
Un document HTML are urmtorul ciclu de via:
1. Editarea fiierului HTML cu ajutorul unui editor de texte (simplu sau dedicat).
2. Salvarea fiierului editat folosind extensia .html
3. Vizualizarea paginii cu ajutorul unui browser.
Prima pagin
Exemplul urmtor prezint cea mai simpl pagin web.
Exemplul 1_1. Prima pagin
Prima pagina!
Tem:
l Creai un fiier avnd coninutul prezentat anterior (adic Prima pagin!).
l Salvai fiierul cu extensia .html (de exemplu e1_1.html).
l ncrcai fiierul n browser-ul favorit pentru a-l vizualiza.
Anexa Crearea primei pagini web cuprinde n detaliu etapele necesare pentru a
crea prima pagin web pe un sistem Windows.
Elementele standard ale unui document HTML
Dei documentul e1_1.html este perfect funcional, stilul n care a fost creat nu poate fi
considerat elegant. Exemplul 1_2 prezint o pagin html similar ca efect cu cea de la
exemplul 1, dar conform cu standardele comunitilor internaionale de specialitate.
Exemplul 1_2. O pagin HTML standard
<html>
<head>
</head>
<body>
Prima pagina standard!
</body>
Salvai coninutul acestui exemplu ntr-un fiier cu numele e1_2.html, apoi vizualizai
pagina.
12
Obervaii:
l Un document HTML este o succesiune de blocuri.
l Blocurile dintr-un document HTML pot fi imbricate (incluse unul n altul).
l Un bloc este delimitat de simboluri speciale (marcaje sau tag-uri). Aceste simboluri speciale sunt
incluse ntre paranteze <> i transmit comenzi ctre browser pentru a afia pagina ntr-un anumit
mod.
l Unele blocuri prezint delimitator de sfrit de bloc, n timp ce pentru alte blocuri acest delimitator
este opional sau chiar interzis (vezi Anexa Lista ordonat a etichetelor HTML).
l Un document HTML standard const dintr-un bloc <html></html>, care include alte dou sub-
blocuri: <head></head> i <body></body>.
l Blocul <body></body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat n
fereastra browser-ului.
l O etichet poate fi scris att cu litere mari, ct i cu litere mici.
Caracterele spaiu i tab, CR/LF ce apar ntre etichete sunt ignorate de ctre browser.
Astfel fiierul e1_2.html poate fi rescris fr a schimba coninutul afiat de ctre
browser (salvai-l ca e1_2a.html, e1_2b.html, respectiv e1_2c.html i testai).
Titlul unei pagini web
Pentru un stil mai elegant, se recomand ca fiecare pagin HTML s aib un titlu
(acesta nefiind obligatoriu). Acest lucru se realizeaz cu ajutorul unui bloc <title></title>
inserat n blocul <head></head>. Salvai coninutul urmtor ca e1_3.html i testai-l.
Observaii:
l Coninutul blocului <title></title> (n cazul de fa textul: Acesta este titlul primei pagini) va aprea
n bara de titlu a ferestrei browser-ului.
l Dac blocul <title></title> lipsete ntr-o pagin HTML, atunci n bara de titlu a ferestrei browser-ului
va aprea numele fiierului (n cazul de fa, e1_3.html).
<HTML>
<heaD>
</Head>
<bOdy>
Prima pagina!
</BODY>
</htMl>
<html>
<head>
</head>
<body>
Prima pagina!
</body>
</html>
<html><head></head><body>Prima Pagina!
HTML prin exemple
Exemplul 1_3. Titlul unei pagini Web
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
Acesta este continutul primei pagini!
El va fi vizualizat de catre browser.
</body>
</html>
13
Sfritul de linie
S presupunem c dorim s introducem n pagina web (adic n ceea ce va afia
browser-ul) mai multe linii. Dac vom crea fiierul e1_4.html sub forma:
atunci browser-ul va afia Prima linieA doua linieA treia linie, ntruct conform unei
observaii anterioare, caracterele de tipul CR/LF sunt ignorate de browser. Trecerea pe o
linie nou se face numai la o comand explicit, care trebuie s apar n pagina html.
Aceast comand este marcajul <br> (de la line break ntrerupere de linie). Pentru a
funciona conform ateptrilor, fiierul e1_4.html trebuie modificat astfel:
Exemplul 1_4. Sfritul de linie
<html>
<head>
<title>
Acesta este titlul primei pagini
</title>
</head>
<body>
Prima linie<br>
A doua linie<br>
A treia linie
</body>
</html>
Blocuri preformatate
Pentru ca browser-ul s intrepreteze corect caracterele spaiu, tab i CR/LF ce apar n
cadrul unui text, acest text trebuie inclus ntr-un bloc <pre></pre>, ca n exemplul 1_5:
Salvai acest fiier ca e1_5.html i ncrcai-l n browser pentru a-l vizualiza.
Pentru a observa facilitile oferite de un bloc <pre></pre>, testai exemplul
distractiv l_6.
Eliminai tag-urile <pre> i </pre>, salvai din nou fiierul i observai modificrile! Vei
constata c browser-ul va afia secvena (OO)\/||\/_||_ pe o singur linie.
Lecia 1 Prima pagin Web
<html>
<head>
<title>
Acesta este titlul primei pagini
</title>
</head>
<body>
Prima linie
A doua linie
A treia linie
</body>
</html>
14
Observaii finale la lecia 1
l Un document HTML are extensia .html sau .htm. El se numete i fiier surs.
l Un browser ncarc un document HTML (un fiier surs), interpreteaz marcajele
coninute n document, iar rezultatul este afiat n fereastra browser-ului. Acest rezultat al
interpretrii se numete pagin web.
l Un document conine marcaje (etichete sau tag-uri). Exist dou tipuri de etichete:
de tip bloc (pereche), cu un tag ce delimiteaz nceputul blocului i un tag ce
delimiteaz sfritul blocului (de exemplu <html> i </html>;
singulare (de exemplu <br>).
l O etichet este delimitat de parantezele < i >.
l O pagin HTML standard este format dintr-un bloc extern <html></html> i dou
blocuri incluse: <head></head> (antetul) i <body></body> (corpul).
l Trecerea la o linie nou se face cu ajutorul tag-ului <br> (break).
l Afiarea ntocmai a coninutului unui bloc de text din fiierul surs se face prin
includerea acestui bloc ntre tag-urile <pre> i </pre> (preformatat).
HTML prin exemple
Exemplul 1_6. Un exemplu distractiv
<html>
<head>
<title>
</title>
</head>
<body>
<pre>
(oo)
\/||\/
_||_
</pre>
</body>
</html>
<html>
<head>
<title>
</title>
</head>
<body>
<pre>
Prima linie
A doua linie indentata
A treia linie de doua ori
indentata
</pre>
</body>
</html>
Exemplul 1_5. Blocuri preformatate
Lecia 2 Lecia 2
Culori, fonturi i margini Culori, fonturi i margini
n aceast lectie vom nva setrile de baz ale unei pagini Web: alegerea culorii de
fond, a culorii textului i alegerea dimensiunilor paginii.
Culoarea de fond
Acest exemplu ne va arta cum s alegem culoarea de fond a paginii Web.
O culoare poate fi precizat n dou moduri:
1. Printr-un nume de culoare. Sunt disponibile cel puin urmtoarele 16 nume de culori: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i
yellow. n Anexa G Nume de culori vei gsi o list a numelor de culori disponibile.
2. Prin construcia #rrggbb unde r, g sau b sunt cifre hexazecimale i pot lua valorile: 0,
1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f sau F; se pot defini astfel 65536 de
culori. S-a folosit aici modelul de culoare RGB (Red, Green, Blue). Conform acestui model,
o culoare se obine din amestecul a trei culori fundamentale: rou, verde i albastru.
Observaie: Este recomandat ca numele unei culori s fie inclus ntre ghilimele. Exemple: blue sau
#0f4eA8.
Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei <body>.
Atributele sunt necesare pentru a particulariza aciunea precizat de numele etichetei.
Aceste atribute apar n interiorul parantezelor ce delimiteaz eticheta dup sintaxa:
<etichet atribut = valoare>.
De exemplu, culoarea fondului paginii Web se stabilete cu atributul bgcolor al eti-
chetei <body>, astfel: <body bgcolor = culoare>, unde culoarea se construiete dup
modelul precizat mai sus.
Pentru a realiza o pagin Web cu fondul de culoare galben, putem proceda ca n
exemplul urmtor:
<html>
<head>
<title>
Exemplul 2_1
</title>
</head>
<body bgcolor=yellow>
Aceasta este o pagina web<br>
cu fondul de culoare galbena.
</body>
</html>
Exemplul 2_1. Culoarea de fond
Culoarea textului
Acest exemplu ilustreaz definirea culorii textului unei pagini Web.
Acest lucru se face prin intermediul atributului text al etichetei <body>, dup sintaxa:
<body text = culoare>, unde culoare se precizeaz ca la exemplul 2_1. Pagina Web din
exemplul urmtor are textul de culoare roie.
16
Atribute multiple
O etichet poate avea mai multe atribute. De exemplu, o etichet cu trei atribute arat astfel:
<etichet atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.
Urmtorul exemplu prezint modul de construire a unei pagini Web cu fondul de
culoare galben i textul de culoare roie.
Stabilirea caracteristicilor textului de baz
Textul afiat este caracterizat de urmtoarele atribute:
l Mrime (size);
l Culoare (color);
l Font (style).
Acestea sunt atribute ale etichetei <basefont>. Aceasta este o etichet singular (nu
exist delimitator de sfrit de bloc).
Sintaxa utilizat este
<basefont size = numr color = culoare style = font >
unde:
l numr poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic i 7 pentru fontul cel
mai mare);
l culoare este o culoare precizat prin nume sau printr-o construcie RGB (vezi primul
paragraf);
l font poate fi un font generic ca serif, sans serif, cursive, monospace, fantasy sau
un font specific instalat pe calculatorul clientului, ca Times New Roman, Helvetica sau
Arial. Se accept ca valoare i o list de fonturi separate prin virgul, de exemplu:
Times Roman, serif, monospace.
Exemplul 2_3. Text rou pe fond galben
<html><head>
<title>Exemplul 2_3</title></head>
<body bgcolor=yellow text=red>
Aceasta este o pagina web cu fondul
de culoare galbena<br>
si textul de culoare rosie.
</body></html>
HTML prin exemple
Exemplul 2_2. Culoarea textului
<html><head><title>Exemplul 2_2
</title>
</head>
<body text=red>
Aceasta este o pagina web cu textul
de culoare rosie.
</body></html>
17
Observaii:
l Domeniul de valabilitate al caracteristicilor precizate de aceast etichet se ntinde de la locul n care
apare eticheta pn la sfritul paginii sau pn la urmtoarea etichet <basefont>.
l Dac eticheta <basefont> lipsete, atunci textul din pagina Web are atribute prestabilite sau atribute
precizate de browserul utilizat.
Atributele prestabilite sunt: size = 3, color = black i style = Times New Roman.
n exemplul urmtor, textul paginii Web are la nceput atribute prestabilite, dup care
valorile acestora sunt nlocuite cu 7 green, Arial.
Stabilirea marginilor paginii Web
Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se poate
face cu ajutorul a dou atribute ale etichetei <body>:
l leftmargin (stabilete distana dintre marginea din stnga a ferestrei browserului i
marginea din stnga a coninutului paginii);
l topmargin (stabilete distana dintre marginea de sus a ferestrei browserului i marginea
de sus a coninutului paginii).
Observaie: Ambele atribute pot primii urmtoarele valori :
l un numr ntreg pozitiv reprezentnd o distan msurat n pixeli;
l un procent din limea, respectiv nlimea ferestrei browserului.
Exemplul 2_4. Configurarea textului de baz
<html><head>
<body>
Prima parte a prezentei pagini; textul
are atribute implicite.<br>
<basefont style=Arial color=green
size=7>
A doua parte a paginii; textul este
scris cu fontul Arial, culoarea
verde si marimea 7.
</body></html>
Exemplul 2_5. Stabilirea marginilor
<html><head>
<body leftmargin=100 topmargin=20%>
Prima parte a prezentei pagini;
textul are atribute implicite.<br>
<basefont style=Arial color=green
size=7>
A doua parte a paginii; textul este
scris cu fontul Arial, culoarea
verde si marimea 7.
</body></html>
Lecia 2 Culori, fonturi i margini
18
Recapitulare
Acesta este un exemplu recapitulativ privind coninutul leciei 2.
Explicaiile necesare le vei gsi chiar n coninutul paginii Web pe care o construii.
Succes!
Exemplul 2_6. Un exemplu recapitulativ
<html><head><title>Exemplul 2_6</title></head>
<body bgcolor=cyan text=000000 leftmargin=80% topmargin=50>
Aceasta pagina are fondul de culoare cyan si textul de culoare alba.<br>
Textul are marimea implicita 3, iar fontul este cel implicit (posibil
TimesRoman).<br>
In urmatoarele linii se schimba atributele de baza ale textului.<br>
<basefont style=TimesRoman size=1 color=red>
Text scris cu fontul TimesRoman , marimea 1, culoarea rosie.<br>
<basefont size=3 color=green>
Text scris cu fontul implicit, marimea 3, culoarea verde.<br>
<basefont size=5>
Text scris cu fontul implicit, marimea 5, culoarea implicita (neagra).<br>
<basefont style=Courier size=7 color=magenta>
Text scris cu fontul Courier, marimea 7, culoarea magenta.<br>
</body></html>
HTML prin exemple
Lecia 3 Lecia 3
Stiluri pentru blocurile de text Stiluri pentru blocurile de text
Aceast lecie prezint posibilitile oferite de limbajul HTML privind alegerea unui stil
pentru caracterele ce formeaz textul paginii Web.
Caractere aldine
Pentru ca un bloc de text s apar n pagin evideniat (cu caractere aldine), trebuie
inclus ntre delimitatorii <b> i </b> (b vine de la bold = ndrzne).
Caractere mrite
Pentru ca un text s fie scris cu caractere mai mari cu o unitate dect cele curente,
acesta trebuie inclus ntr-un bloc delimitat de etichetele <big> i </big>.
Observaie: Blocurile <big></big> pot fi imbricate.
Exemplul 3_1. Caractere aldine
</title></head><body>
Aceasta linie este formata din text
normal.<br>
<b>Aceasta linie este scrisa in
intregime cu caractere ingrosate.</b>
In aceasta linie numai cuvantul
<b>gros</b> este ingrosat.
</body></html>
Exemplul 3_2. Caractere mrite
normal.<br>
<big>Aceasta linie este scrisa in
intregime cu caractere marite cu o
unitate.</big></br>
Normal <big>marit <big>mai mare
<big>si mai mare.</big></big></big>
</body></html>
Caractere micorate
Pentru ca un text s fie scris cu caractere mai mici cu o unitate dect cele curente,
acesta trebuie inclus ntr-un bloc delimitat de etichetele <small> i </small>.
Observaie: Blocurile <small></small> pot fi imbricate.
20
Exemplul 3_3. Caractere micorate
Caractere cursive
Pentru ca un text s fie scris cu caractere cursive, acesta trebuie inclus ntr-un bloc
delimitat de etichetele <i> i </i> (i vine de la italic).
normal.<br>
<small>Aceasta linie este scrisa in
intregime cu caractere micsorate cu o
unitate.</small></br>
Normal <small>mai mic<small>si mai
mic.</small></small><br>
Normal <small>mai mic <big>normal
<big>mai mare</big></big></small>
</body></html>
Caractere indice i exponent
Pentru a insera secvene de text aliniate ca indice (sub-script) sau ca exponent
(super-script), aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv
<sup>...</sup>.
Urmtorul exemplu arat cum pot fi introduse secvene de text ca indice sau exponent.
Pentru a exemplifica mai bine, n rndul al treilea al paginii Web vom gsi urmtorul text
specific limbajului matematic: F
(y)
= (x
1
+x
2
)
2
-y
3
. Urmrii cu atenie urmtorul fiier surs:
Exemplul 3_5. Caractere indice i exponent.
<html><head><title><Exemplul 3_5
normal.<br>
In aceasta linie <sup>sus</sup> este
superscript iar <sub>jos</sub> este
subscript.<br>
F<sub>(y)</sub>=(x<sub>1</sub>+x<sub>
2</sub>)<sup>2</sup>-y<sup>3</sup>
</body></html>
HTML prin exemple
Exemplul 3_4. Caractere cursive
normal.<br>
<i>Aceasta linie este scrisa in
intregime cu caractere italice.</i>
</br>
In aceasta linie numai fragmentul
<i>aplecat spre dreapta</i> este
italic.
</body></html>
21
Caractere subliniate i caractere secionate
n exemplul urmtor sunt utilizate dou etichete de tip bloc (pereche):
l <u> i </u> pentru a insera un bloc de caractere subliniate;
l <strike> i </strike> sau <s> i </s> pentru a insera un bloc de caractere secionate la
mijloc cu o linie orizontal.
Exemplul 3_6. Caractere subliniate si caractere sectionate
normal.<br>
<strike>Aceasta linie este in
intregime sectionata de o linie
orizontala.</strike><br>
In aceasta linie <u>underline</u>
este subliniat, iar <s>strike</s>
este sectionat.
</body></html>
Stiluri fizice i stiluri logice
Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite i stiluri
fizice, ntruct nu s-a acordat nici o atenie semnificaiei informaiei coninute de aceste
blocuri.
n continuare sunt prezentate stilurile logice utilizate la formatarea unui bloc. Aceste
stiluri in cont de semnificaia pe care o are blocul n cadrul paginii Web.
Observaie: Stilurile logice se bazeaz pe stilurile fizice, iar modul lor de aciune depinde de browserul
utilizat.
Blocuri de caractere evideniate
n exemplul urmtor sunt introduse alte dou etichete pentru a pune n eviden (prin
stilul cursiv) fragmente de text:
l <cite> i </cite> (cite nseamn citat);
l <em> i </em> (em vine de la emphasize = a evidenia).
Observaie: n locul lor se poate utiliza eticheta echivalent <i></i>.
Exemplul 3_7. Blocuri de caractere evideniate
normal.<br>
Colegiul National <cite>Mihai
Viteazul</cite> din Bucuresti<br>
este unul dintre <em>liceele de
traditie</em> din Romania.
</body></html>
Lecia 3 Stiluri pentru blocurile de text
22
Blocuri de caractere monospaiate
n continuare vor fi prezentate trei etichete cu efecte similare. Ele permit scrierea
fragmentelor de text cu caractere monospaiate (de tipul celor folosite de o main de
scris):
l <code> i </code> (code nseamn cod sau surs);
l <kbd> i </kbd> (kbd vine de la keyboard = tastatur);
l <tt> i </tt> (tt vine de la teletype = teleprinter).
Blocuri de caractere clipitoare
n exemplul urmtor apare eticheta de tip bloc <blink></blink>, care delimiteaz
fragmentele de text clipitoare.
Observaie: Aceast etichet este funcional numai n browserul Netscape Communicator.
Exemplul 3_8. Blocuri de caractere monospaiate
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>
</body></html>
Exemplul 3_9. Caractere clipitoare
normal.<br>
<blink>Linia acesta clipeste.
</blink><br>
In aceasta linie fragmentul
<blink>on/off</blink> clipeste.
</body></html>
Imbricarea etichetelor
Exemplul urmtor ilustreaz faptul c etichetele pot fi imbricate. De exemplu:
l un fragment de text poate fi scris cu aldine i cursive n acelai timp;
l pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mrit i
cursiv.
HTML prin exemple
23
Blocul q
Blocul <q></q> permite inserarea in-line a citatelor. Aceste citate sunt afiate de
ctre browser n cu caractere cursive.
Observaii:
l Blocurile q pot fi imbricate ca n exemplul urmtor.
l q vine de la in-line quotation (citate inserate in-line).
Exemplul 3_11. Blocul q
Exemplul 3_10. Imbricarea etichetelor
normal.<br>
Normal <b>ingrosat <i>ingrosat si
italic</i> ingrosat</b> normal.<br>
Normal <u>subliniat <b>subliniat si
ingrosat <big>subliniat, ingrosat si
marit.<br>
<i>Subliniat, ingrosat, marit si
italic.</i></big></b></u>
</body></html>
<html><head><title>Exemplul 3_11</title></head><body>
Maria povesti mai departe <q>M-am intors catre Mihai si l-am intrebat<q> Mergi
maine la concert?</q> <q>Nu.</q> mi-a raspuns el.</q> In acest moment Maria se
opri pentru o clipa.
</body></html>
Lecia 3 Stiluri pentru blocurile de text
Lecia 4 Lecia 4
Configurarea fonturilor Configurarea fonturilor
n aceast lecie vei nva cum s alegei tipurile de caractere (fonturile) cu care vei
scrie blocuri de text personalizate n cadrul unei pagini Web.
Un font este caracterizat de urmtoarele atribute:
l culoarea (stabilit prin atributul color);
l tipul sau stilul (stabilit prin atributul face);
l mrimea (definit prin atributul size);
l mrimea n puncte tipografice (stabilit prin atributul point-size);
l grosimea (definit prin atributul weight).
Toate aceste atribute aparin etichetei <font>, care permite inserarea de blocuri de texte
personalizate.
Culori
O culoare poate fi precizat n dou moduri:
l Printr-un nume de culoare. Sunt disponibile cel puin urmtoarele 16 nume de culori:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white i yellow. n anexa G Nume de culori este prezentat un tabel cu numele de
culori disponibile.
l 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. Cifrele
hexazecimale sunt urmtoarele: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f i
F. Numrul de culori posibile este 65536.
Exemple de culori RGB: #ff0000 este rou (red), #00ff00 este verde (green), #0000ff
este albastru (blue), #ffffff este alb (white), #000000 este negru (black), #28a7Fc este o
culoare oarecare valid.
Culoarea fontului
Pentru a scrie un fragment de text cu caractere de o anumit culoare, se ncadreaz
acest fragment ntre delimitatorii <font> i </font>, eticheta <font> avnd stabilit atributul
color la valoarea necesar:
<font color = culoare>fragment de text de culoarea specificat</font>.
Familia fontului
Pentru a scrie un text ntr-o pagin Web pot fi folosite mai multe fonturi (stiluri de caractere).
Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calcula-
toarele utilizatorilor: serif, sans serif, cursive, monospace i fantasy.
Alte fonturi specifice pot fi utilizate dac acestea sunt disponibile pe calculatorul client,
ca de exemplu: Times (un tip particular de font serif), Helvetica (un tip particular de font
sans serif), Arial, Courier (un tip particular de font monospace), Western (un tip particular
de font fantasy) i altele.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>. Pot fi
introduse mai multe fonturi separate prin virgul.
Exemplu: <font face = Arial, serif, monospace>. n acest caz, browserul va utiliza
primul font pe care l recunoate.
25
Mrimea fontului
Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei <font>.
Valorile acestui atribut pot fi:
l 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font i 7 pentru cel mai mare);
l +1, +2 etc. pentru a mri dimensiunea fontului cu 1, 2 etc. fa de valoarea curent;
l 1, 2 etc. pentru a mri dimensiunea fontului cu 1, 2 etc. fa de valoarea curent.
Exemplul 4_1. Culoarea fontului
Aceasta linie este scrisa cu
caractere normale.<br>
<font color=red>Aceasta linie este
rosie.</font><br>
Aici <font color=red>fiecare</font>
<font color=green>cuvant</font>
<font color=yellow>are</font>
<font color=00ff00">alta</font>
<font color=0048Ae>culoare.</font><br>
M<font color=olive>o</font>
<font color=gray>z</font>
<font color=cyan>a</font>
<font color=magenta>i</font>
<font color=0f0e0d>c.</font>
</body></html>
Exemplul 4_2. Familia fontului
<font face=monospace>Linie scrisa
cu caractere monospatiate</font><br>
<font face=Arial>Linie scrisa cu
caractere Arial</font><br>
<font face=TimesRoman, sans
serif>Linie scrisa cu caractere
TimesRoman sau sansserif</font><br>
</body></html>
Exemplul 4_3. Mrimea fontului.
<font size=6">Fonturi de marimea 6.
</font><br>
<basefont size=4">Fonturi de marimea
4. <br>
<font size=-3"> Fonturi de marimea
1. </font><br>
<font size=+2">Fonturi de marimea 6.
</font><br>
</body></html>
Lecia 4 Configurarea fonturilor
26
Mrimea unui font poate fi stabilit exact cu ajutorului atributului point-size al etiche-
tei <font>. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive.
Numrul astfel precizat reprezint mrimea fontului n puncte tipografice.
Observaie: Acest atribut funcioneaz numai cu Netscape Communicator.
Exemplul 4_4. Dimensiunea n puncte a fontului
<font point-size=10">Fonturi de
marimea 10 pt (puncte tipografice).
</font><br>
marimea 20 pt.</font><br>
marimea 50 pt.</font><br>
</body></html>
Grosimea unui font
Grosimea unui caracter poate fi definit cu ajutorul atributului weight al etichetei
<font>. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 i
900 (100 pentru fontul cel mai subire i 900 pentru cel mai gros).
Exemplul 4_5. Grosimea fontului
<font weight=100">Fonturi de
grosimea 100.</font><br>
</body></html>
HTML prin exemple
Lecia 5 Lecia 5
Blocuri de text Blocuri de text
n aceast lecie vei nva etichete la nivel de bloc de text. Toate aceste etichete
produc automat trecerea la un rnd nou i adugarea unui spaiu suplimentar.
Aceste etichete nu se refer la particulatritile caracterelor ce compun textul, ci la
funciile pe care le poate avea un bloc de text n cadrul paginii Web.
Inserarea unei adrese
Dac ntr-o pagin Web trebuie inclus o adres, atunci putem utiliza facilitile oferite
de o etichet dedicat: <address></address>. Multe browsere afieaz textul cuprins
ntre aceti delimitatori cu caractere cursive, ncepnd pe un rnd nou.
Observaie: Blocurile de tip adres includ informaii despre persoana care a creat pagina Web, adresa
e-mail i data crerii paginii. Aceste blocuri se plaseaz de obicei la sfritul paginii Web, dar pot aprea
i la nceput.
Indentarea unui bloc
Pentru ca un bloc de text s fie indentat (marginea din stnga a textului s fie deplasat
la dreapta la o anumit distan fa de marginea paginii), acesta trebuie inclus ntre
etichetele <blockquote> i </blockquote>. Adesea, browserele adaug un spaiu
suplimentar nainte i dup o asemenea etichet.
Exemplul 5_2. Indentarea unui bloc
Constantin Brancusi obisnuia sa
spuna:
<blockquote>
<i>Simplitatea</i> nu este un scop in
Arta, insa ajungi la simplitate fara
voia ta, apropiindu-te de sensul cel
real al lucrurilor. Simplitatea este
in sine o complexitate - si trebuie
sa te hranesti cu <i>esenta</i>, ca
sa poti sa ii intelegi valoarea.
</blockquote>
</body></html>
Exemplul 5_1. Inserarea unei adrese
Adresa institutiei noastre este:
<adddress>
Colegiul National Mihai Viteazul<br>
Bulevardul Pache Protopopescu Nr.
62<br>
Sector 2 Bucuresti Romania Europa
</address>
</body></html>
28
Blocuri <div>
Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text este
folosirea delimitatorilor <div> i </div>.
Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune)
este align (aliniere). Valorile posibile ale acestui parametru sunt:
l left (aliniere la stnga);
l center (aliniere central);
l right (aliniere la dreapta).
Exemplul 5_3. Blocuri <div>
Aceasta este o linie normala. Urmatorul
bloc este aliniat la dreapta:
<div align=right>
MOTTO:<br>
Misiunea artei este sa creeze
<i>bucurie</i>;<br>
si nu se poate crea artistic decat<br>
in echilibru si in pace
sufleteasca<br>
<i>Constantin Brancusi</i>
</div>
Urmatorul bloc este aliniat pe centru:
<div align=center>
De cand viata mea te stie,<br>
o suferinta port mereu;<br>
Frumusetea ta-i o poezie,<br>
pe care n-am facut-o eu.<br>
<i>Lucian Blaga: Catren</i>
</div>
</body></html>
Observaii:
l 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>;
l Un bloc <div></div> admite atributul nowrap, care interzice ntreruperea rndurilor de ctre
browser, lucrul acesta fcndu-se numai acolo unde exist marcaje care solicit explicit acest lucru.
Blocul preformatat
n lecia 1 a fost prezentat perechea de etichete <pre></pre>, care permite ps-
trarea caracteristicilor textului aa cum a fost introdus n fiierul surs (sunt interpretate
corect caracterele spaiu, tab i CR/LF).
Observaii:
l ntr-un bloc <pre></pre>, semnificaia marcajelor HTML se pstreaz.
l Blocul <pre></pre> este indicat pentru a insera rnduri vide (spaiu ntre rndurile succesive).
l Caracterul spaiu poate fi luat n considerare de browser dac este inserat explicit prin .
Prezentm n continuare un alt exemplu care permite afiarea ntr-o pagin Web a unui
tabel:
HTML prin exemple
29
Blocuri <plaintext>
ntr-un fiier HTML, caracterele < i > au o semnificaie special pentru browser. Ele
ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin Web.
Dac dorim ca un fragment de text s conin astfel de caractere fr ca acestea s aib
semnificaia special prestabilit, acest fragment trebuie ncadrat de una dintre perechile
de etichete:
l <xmp></xmp> (80 de caractere pe rnd);
l <listing></listing> (120 de caractere pe rnd).
De asemenea, n ultima parte a unei pagini Web care ncepe cu marcajul <plaintext>
nu sunt interpretate marcajele HTML.
Observaii:
l Aceste trei marcaje interpreteaz corect caracterele spaiu, etichet i CR/LF.
l Textul afiat n pagina Web este monospaiat.
Exemplul 5_4. Blocul preformatat
Planificarea examenelor in sesiunea iulie 1999
<pre>
Examenul Data Sala Ora
Grafica pe calculator 07.07.1999 EC105 8.00
Sisteme de operare 15.07.1999 ED221 14.00
Programare in Java 25.07.1999 EG210 9.00
</pre>
</body></html>
Exemplul 5_5. Blocuri <plaintext>
Un fisier html standard arata astfel:
<xmp>
<html>
<head>
</head>
<body>
Prima pagina web!
</body>
</html>
</xmp>
</body></html>
Lecia 5 Blocuri de text
30
Blocuri paragraf
Am vzut la Exemplul 1_4 c trecerea la o linie nou se face cu ajutorul etichetei <br>.
Acest lucru este posibil i cu ajutorul etichetei paragraf, <p>. Spre deosebire de <br>,
eticheta <p> permite:
l inserarea unui spaiu suplimentar nainte de blocul paragraf;
l inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete delimitatorul
</p> (acesta fiind opional);
l alinierea textului cu ajutorul atributului align, avnd valorile posibile left, center sau
right.
Exemplul 5_6. Blocuri paragraf
Linia 1
<br>Linia 2 este generata de un break.
<p>Linia 3 este generata de un 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. Paragraf
aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta. </p>
<p align=center>Paragraf aliniat in centru. Paragraf aliniat in centru.
Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in
centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru.
Paragraf aliniat in centru. </p>
</body></html>
Blocuri de titlu
ntr-un text sunt necesare titluri (headers) de capitole (paragrafe) de diferite
dimensiuni. Acestea pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5>
i <h6>.
HTML prin exemple
31
Observaii:
l Toate aceste etichete se refer la un bloc de text i trebuie nsoite de o etichet de ncheiere similar,
de exemplu: <h3></h3>.
l Aceste etichete accept atributul align pentru alinierea titlului blocului de text la stnga (n mod
prestabilit), n centru i la dreapta.
l Tag-ul <h1> permite scrierea unui titlu cu caracterele cele mai mari i aldine, pe cnd <h6> folosete
caracterele cele mai mici.
l Toate browserele introduc un spaiu suplimentar nainte de a afia un titlu.
Exemplul 5_7. Blocuri de titlu
<h1 align=center>Titlu de marimea 1
aliniat in centru</h1>
<h2>Titlu de marimea 2 aliniat la
stanga (implicit)</h2>
<h3 align=right>Titlu de marimea 3
aliniat la dreapta</h3>
<h4 align=left>Titlu de marimea 4
aliniat la stanga</h4>
<h5>Titlu de marimea 5</h5>
<h6>Titlu de marimea 6</h6>
</body></html>
Linii orizontale
ntr-o pagin Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etiche-
tei <hr>.
Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <hr>:
l align permite alinierea liniei orizontale. Valorile posibile sunt left, center i right;
l width permite alegerea lungimii liniei. Valorile posibile sunt:
(a) numere ntregi pozitive reprezentnd lungimea liniei, n pixeli;
(b) numere ntre 1 i 100 urmate de semnul %, reprezentnd procentul din limea
paginii pe care se ntinde linia;
l size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi pozitive
reprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2");
l noshade, cnd este prezent, definete o linie fr umbr;
l color permite definirea culorii liniei.
Exemplul 5_8. O linie orizontal.
<h1 align=center>Linie orizontala
</h1>
<hr>
<h2>Linia orizontala are parametrii
impliciti</h2>
<hr>
</body></html>
Lecia 5 Blocuri de text
32
Blocuri <center>
Blocul introdus de etichetele <center> i </center> aliniaz centrat toate elementele pe
care le conine.
n exemplul urmtor este prezentat un mod de obinere a unor efecte deosebite ntr-o
pagin Web, cu ajutorul unor instrumente foarte simple.
Exemplul 5_9. Tipuri de linii orizontale
<html><head><title>Exemplul 5_9</title>
</head><body>
<h1 align=center>Tipuri de linii
orizontale</h1>
Urmeaza o linie implicita (aliniare stanga,
latime 100%, grosime 2, cu umbra):
<hr>
Urmeaza o linie aliniata in centru, de
latime 50%, grosime 5 pixeli, fara umbra:
<hr align=center width=50% size=5
noshade>
Urmeaza o linie de latime 200 de pixeli,
aliniata la dreapta, grosime 10 pixeli,
cu umbra:
<hr align=right width=200 size=10">
</body></html>
Blocuri <nobr>
Blocul de text cuprins ntre etichetele <nobr> i </nobr> va fi afiat pe o singur linie.
Observaie: ntr-un bloc <nobr></nobr> se poate insera marcajul <wbr> pentru a sugera browserului
locul n care poate fi ntrerupt rndul, dac acest lucru este absolut necesar.
Exemplul 5_10. Linii orizontale centrate
<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>
Exemplul 5_11. Blocul <nobr>
<nobr>
O singura linie.O singura linie.
O singura linie.
</nobr>
</body></html>
HTML prin exemple
Lecia 6 Lecia 6
Liste Liste
n aceast lecie vei nva cum pot fi introduse liste ntr-o pagin Web.
Liste neordonate
O list neordonat este un bloc de text delimitat de etichetele corespondente <ul> i
</ul> (ul vine de la unordered list = list neordonat). Fiecare element al listei este
iniiat de eticheta <li> (list item).
Observaii:
l Lista va fi indentat fa de restul paginii Web.
l Fiecare element al listei ncepe pe un rnd nou.
Exemplul 6_1. O list neordonat
<h1 align=center>Exemplul 6_1</h1>
<hr>
<h2>O lista neordonata</h2>
<ul>Pentru a cunoaste INTERNET-ul,
trebuie s studiati urmatoarele carti:
<li>HTML
<li>JavaScript
<li>Java
</ul>
<body><html>
Observaie:
l Elementele <h1>, <h2> i <hr> au fost utilizate n acest exemplu pentru ca pagina Web s aib un
aspect ct mai plcut.
Tag-urile <ul> i <li> pot avea un atribut type care stabilete caracterul afiat n faa
fiecrui element al listei. Valorile posibile ale acestui atribut sunt:
l circle (cerc) pentru O;
l disc (disc plin) pentru l (valoarea prestabilit);
l square (ptrat) pentru n.
Exemplul 6_2. O list neordonat cu elemente precedate de n n
<hr>
<h2>O lista neordonata</h2>
<ul type=square>Pentru a cunoaste
INTERNET-ul trebuie sa studiati:
<li>HTML
<li>JavaScript
<li>Java
</ul>
<body><html>
34
Liste ordonate
O list ordonat de elemente este un bloc de text delimitat de etichetele corespondente
<ol> i </ol> (ol vine de la ordered list = list ordonat). Fiecare element al listei este
iniiat de eticheta <li> (list item).
Observaii:
l Lista va fi indentat fa de restul paginii Web.
l Fiecare element al listei ncepe pe un rnd nou.
Listele neordonate pot fi imbricate pe mai multe niveluri, ca n exemplul urmtor:
Exemplul 6_3. O list neordonat de liste neordonate
</head><body>
<hr>
<h2>O lista neordonata de liste
neordonate</h2>
<ul>Elemente si atribute ale unei
pagini html:
<li>body <ul>Atribute:
<li>bgcolor
<li>text
</ul>
<li>font <ul>Atribute:
<li>face
<li>size
<li>color
</ul>
</ul>
<body><html>
Exemplul 6_4. O list ordonat
<hr>
<h2>O lista ordonata</h2>
<ol>Pentru a realiza o pagina web
trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>
Tag-urile <ol> i <li> pot avea un atribut type care stabilete tipul de caractere utilizate
pentru ordonarea listei. Valorile posibile sunt:
l A pentru de ordonare de tipul A, B, C, D etc. (litere mari);
HTML prin exemple
35
l a pentru ordonare de tipul a, b, c, d etc. (litere mici);
l I pentru ordonare de tipul I, II, III, IV etc. (cifre romane mari);
l i pentru ordonare de tipul i, ii, iii, iv etc. (cifre romane mici);
l 1 pentru ordonare de tipul 1, 2, 3, 4 etc. (cifre arabe opiunea prestabilit).
Exemplul 6_5. O list ordonat cu cifre romane mari
<hr>
<h2>O lista ordonata cu cifre romane
mari</h2>
<ol type=I>Pentru a realiza o
pagina web trebuie:
limbajul html;
browser.
</ol>
<body><html>
Observaie: Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniial a secvenei de
ordonare. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv.
Tag-ul <li> poate avea un atribut value care stabilete valoarea pentru elementul
respectiv al listei. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv (vezi
exemplul 6_7).
Listele ordonate pot fi imbricate ntre ele sau cu liste neordonate, ca n exemplul 6_8.
Liste de definiii
O list de definiii este format dintr-o succesiune de termeni, fiecare termen fiind
urmat de definiia sa.
Lecia 6 Liste
Exemplul 6_6. O list ordonat cu litere mari, ncepnd de la valoarea C
<hr>
<h2>O lista ordonata cu litere mari
incepand cu valoarea C</h2>
<ol type=A start=3">Pentru a
realiza o pagina web trebuie:
limbajul html;
browser.
</ol>
<body><html>
36
Observaii:
l ntreaga list de definiii se ncadreaz ntre etichetele corespondente <dl> i </dl> (de la definition
list = list de definiii);
l Un termen al listei este iniiat de eticheta <dt> (de la definition term = termen de definit);
l Definiia unui termen este iniiat de eticheta <dd> (de la definition description = descrierea
definiiei);
l Definiia unui termen ncepe pe o linie nou i este indentat.
Observaie: Tag-urile <ul>, <ol> i <dl> pot avea un atribut compact care permite afiarea compact a
listei. De exemplu, n cazul unei liste de definiii, vom scrie: <dl compact>. Dac acest atribut este
prezent (el nu ia mai multe valori), atunci definiiile termenilor ncep pe aceeai linie cu termenii.
Exemplul 6_7. O list ordonat cu elemente configurate individual
<hr>
<h2>O lista ordonata avand itemi
setati individual</h2>
<ol start=3">Repetati urmatorii pasi
ai algoritmului:
<li>salvati fisierul;
<li value=5">incarcati fisierul in
browser;
<li>schimbati browserul utilizat.
</ol>
<body><html>
Exemplul 6_8. O list ordonat de liste ordonate si neordonate
<html><head><title>Exemplul
6_8</title></head><body>
<hr>
<h2>O lista ordonata de liste
ordonate si neordonate</h2>
<ol>Un sistem informatic include:
<li>Hardware:
<ol><li>placa de
baza<li>procesor <li> memorie
</ol>
<li>Softtware de baza: <ul> <li>
Windows <li> Unix <li>
Linux</ul>
<li> Software de aplicatie:
<ul type=disc><li>AutoCad
<li>CorelDraw<li>
QuarkXPress</ul></ol>
<body><html>
HTML prin exemple
37
Liste de meniuri
O list de meniuri este un bloc delimitat de etichetele corespondente <menu> i
</menu>. Fiecare element al listei este iniiat de eticheta <li> (list item).
Observaii:
l Cele mai multe browsere afieaz lista de meniuri ca pe o list neordonat.
l Nu se recomand utilizarea acestui tip de list.
Liste de directoare
O list de directoare este un bloc delimitat de etichetele corespondente <dir> i </dir>
(de la director). Fiecare element al listei este iniiat de eticheta <li> (list item).
Observaii:
l Cele mai multe browsere afieaz lista de directoare ca pe o list neordonat.
l Nu se recomand utilizarea acestui tip de list.
Utilizri speciale ale listelor
n acest paragraf vor fi prezentate cteva utilizri speciale ale listelor.
Dac ntr-o list, n loc de elementele acesteia introduse prin <li>, se insereaz un bloc
de text, acesta va fi indentat (ntocmai ca elementele unei liste).
<h1 align=center>Exemplul 6_10</h1><hr>
<h2>O lista compacta de definitii</h2>
<dl compact>Glossar de termeni pentru INTERNET
<dt>Browser
<dd>Aplicatie ce ruleaza pe calculatorul client o pagina html
<dt>Server WWW
<dd>Calculator care raspunde la cererile de pagini html emise de un client
</dl>
<body><html>
Lecia 6 Liste
Exemplul 6_10. O list compact de definiii
Exemplul 6_9. O list de definiii
<html><head><title>Exemplul
6_9</title></head><body>
<hr>
<h2>O lista de definitii</h2>
<dl>Glossar de termeni pentru INTERNET
<dt>Browser
<dd>Aplicatie ce ruleaza pe
calculatorul client o pagina html
<dt>Server WWW
<dd>Calculator care raspunde la
cererile de pagini html emise de un
client
</dl>
<body><html>
38
Liste personalizate
n exemplul urmtor este creat o list neordonat personalizat care utilizeaz pe post
de elemente imagini i texte.
Exemplul 6_11. Un bloc de text indentat
Exemplul 6_13. O list personalizat
<hr>
<h2>Un bloc de text indentat</h2>
<ul>
Acest bloc de text va fi indentat.
</ul>
<body><html>
Exemplul 6_12. O list de definiii special
n exemplul urmtor lista de definiii are itemii <dt> i <dd> multipli.
<hr>
<h2>O lista de definitii speciala
</h2>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><I>Ora 9.00.</I> Inscriere
<dd><I>Ora 11.00.</I> Audieri
<dd><I>Ora 13.30.</I> Raspunsuri
</dl>
<body><html>
<hr>
<h2>O lista de definitii speciala
</h2>
<ul>Planete din Sistemul solar:<br>
<img src=blue-ball.gif>Mercur<br>
<img src=blue-ball.gif>Venus<br>
<img src=blue-ball.gif>Neptun<br>
</ul>
<body><html>
HTML prin exemple
Lecia 7 Lecia 7
Tabele Tabele
Aa cum ai constatat deja, posibilitile de aranjare a textului ntr-o pagin Web sunt
limitate. Tabelele ne permit s crem o reea dreptunghiular de domenii, fiecare
domeniu avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea
textului etc.
Un tabel simplu
Pentru a insera un tabel se folosesc etichetele corespondente <table> i </table>.
Un tabel este format din rnduri. Pentru a insera un rnd ntr-un tabel se folosesc
etichetele <tr> i </tr> (de la table row = rnd de tabel).
Observaie:
l Folosirea etichetei de sfrit </tr> este opional.
Un rnd este format din mai multe celule ce conin date. O celul de date se introduce
cu eticheta <td> (de la table data = date n tabel).
Exemplul 7_1. Un tabel simplu format din dou linii i trei coloane
<h2>Un tabel simplu format din doua
linii si trei coloane</h2>
<table>
<tr>
<td>celula 11
<td>celula 12
<td>celula 13
<tr>
<td>celula 21
<td>celula 22
<td>celula 23
</table>
</body></html>
Un tabel cu chenar
n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se
utilizeaz un atribut al etichetei <table> numit border. Acest atribut poate primi ca valoare
orice numr ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului.
Observaii:
l Atributul border poate s nu fie urmat de o valoare, caz n care tabelul va avea un chenar de grosime
prestabilit egal cu 1 pixel.
l O valoare egal cu 0 a grosimii semnific absena chenarului.
l Cnd are grosime nenul, chenarul unui tabel are un aspect tridimensional.
40
Alinierea tabelului n pagina Web
Pentru a alinia un tabel ntr-o pagin Web se utilizeaz atributul align al etichetei
<table>, cu urmtoarele valori posibile: left (valoarea prestabilit), center i right.
Alinierea unui tabel este important pentru textul ce nconjoar tabelul. Astfel:
l Dac tabelul este aliniat la stnga (<table align = left>), atunci textul care urmeaz
dup punctul de inserare al tabelului va fi dispus n partea dreapt a tabelului.
l Dac tabelul este aliniat la dreapta (<table align = right>), atunci textul care urmeaz
dup punctul de inserare al tabelului va fi dispus n partea stng a tabelului.
l Dac tabelul este aliniat pe centru <table align = center>), atunci textul care urmeaz
dup punctul de inserare al tabelului va fi afiat pe toat limea paginii, imediat sub tabel.
Exemplul 7_2. Un tabel cu chenar
<h2>Un tabel simplu format din doua
linii si trei coloane</h2>
<table border=5">
<tr><td>celula 11<td>celula
12<td>celula 13
<tr><td>celula 21<td>celula
22<td>celula 23
</table>
</body></html>
Exemplul 7_3. Un tabel aliniat la dreapta
<h2>Un tabel aliniat la dreapta</h2>
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
Text inainte de tabel.
<table border align=right>
<tr><td>celula 11<td>celula 12<td>
</table>
Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa
tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text
dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
Text dupa tabel.
</body></html>
HTML prin exemple
41
Tem: Copiai fiierul e7_3.html prezentat anterior i testai-l cu ajutorul unui browser. Schimbai
alinierea tabelului la centru apoi la stnga i observai modificrile care apar n pagina Web.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi ataat
ntregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau unei celule de date
prin eticheta <td>. Valorile pe care le poate primi atributul bgcolor sunt cele cunoscute
pentru o culoare.
Observaie:
l Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmtoarea: <td>, <tr>
i <table> (cu prioritatea cea mai mic).
Exemplul 7_4. Un tabel colorat
<h2>Un tabel colorat</h2>
<table border=3 bgcolor=yellow>
<tr><td>galben 11
<td bgcolor=green>verde 12
<tr bgcolor=red><td>rosu 21
<td bgcolor=cyan>cyan 22
</table>
</body></html>
Observaie: Culoarea textului din fiecare celul poate fi stabilit cu ajutorul expresiei:
<font color = valoare></font>.
Dimensionarea celulelor unui tabel
Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al
etichetei <table> (vezi exemplul 7_5).
Observaii:
l Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli dintre
dou celule vecine.
l Valoarea prestabilit a atributului cellspacing este 2.
Distana dintre marginea unei celule si coninutul ei poate fi definit cu ajutorul
atributului cellpadding al etichetei <table> (vezi exemplul 7_6).
Observaii:
l Valorile acestui atribut pot fi numere ntregi pozitive i reprezint distana n pixeli dintre marginea unei
celule i coninutul ei.
l Valoarea prestabilit a atributului cellpadding este 1.
Lecia 7 Tabele
42
Dimensionarea unui tabel
Dimensiunile unui tabel limea i nlimea pot fi stabilite exact prin intermediul a
dou atribute, width i height, ale etichetei <table>.
Valorile acestor atribute pot fi:
l numere ntregi pozitive reprezentnd limea, respectiv nlimea n pixeli a tabelului;
l numere intregi ntre 1 i 100, urmate de semnul %, reprezentnd fraciunea din limea,
respectiv nlimea total a paginii.
Exemplul 7_5. Un tabel fr chenar de celule alipite
<h2>Un tabel fara chenar de celule
alipite</h2>
<table cellspacing=0">
<tr><td bgcolor=yellow >galben
11<td bgcolor=green>verde 12
<tr><td bgcolor=red>rosu 21<td
bgcolor=cyan>cyan 22
</table>
</body></html>
Exemplul 7_6. Un tabel de celule mari
<h2>Un tabel de celule mari</h2>
<table border cellpadding=20">
<tr><td>galben 11<td>verde 12
<tr><td>rosu 21<td>cyan 22
</table>
</body></html>
Exemplul 7_7. Un tabel de 300 pixeli x 50%
<h2>Un tabel de 300 pixeli X 50%</h2>
<table border width=300
height=50%>
<tr><td>celula 11<td>celula 12
</table>
</body></html>
HTML prin exemple
43
Observaii:
l Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii tabelului, atunci vor
fi folosite aceste dimensiuni precizate.
l Dac dimensiunile precizate de atribute sunt mai mici dect cele necesare afirii tabelului, atunci
tabelul va fi ajustat la dimensiunile necesare.
n exemplul urmtor se utilizeaz un truc care permite afiarea ntr-o pagin Web a unui
text poziionat n centrul paginii. Pentru a realiza acest lucru, se declar un tabel mare ct
ntreaga pagin ce conine o singur celul. Textul din interiorul celulei este aliniat n mod
prestabilit pe vertical, centrat, iar n mod explicit pe orizontal, de asemenea centrat.
Exemplul 7_8. Un text centrat ntr-o pagin Web
<html>
<head>
<title>Exemplul 7_8</title>
</head>
<body>
<table width=100% height=100%>
<tr>
<td align=center>
<h2>Text centrat.<h2>
</table>
</body>
</html>
Zona din jurul unui tabel
Am vzut n exemplul 7_3 modul n care este depus un text n jurul unui tabel aliniat
ntr-o pagin Web. Distana dintre tabel i celelalte elemente din pagina Web poate fi
stabilit cu ajutorul atributelor hspace i vspace ale etichetei <table> (vezi exemplul 7_9).
Observaii:
l Valoarea atributului hspace poate fi orice numr ntreg pozitiv, inclusiv 0, i reprezint distana pe
orizontal dintre tabel i celelalte elemente ale paginii Web.
l Valoarea atributului vspace poate fi orice numr ntreg pozitiv, inclusiv 0, i reprezint distana pe
vertical dintre tabel i celelalte elemente ale paginii Web.
l Aceste atribute funcioneaz numai cu Netscape Communicator.
Titlul unui tabel
Unui tabel i se poate ataa un titlu cu ajutorului etichetei <caption> (de la table
caption = titlu de tabel). Aceast etichet trebuie plasat n interiorul etichetelor
<table></table>, dar nu n interiorul etichetelor <tr> sau <td> (vezi exemplul 7_10).
Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption>, care
poate lua una dintre valorile:
l bottom (sub tabel);
l top (deasupra tabelului);
l left(la stnga tabelului);
l right (la dreapta tabelului).
Lecia 7 Tabele
44
Exemplul 7_9. Un tabel simplu aliniat la stnga, nconjurat la distan de text
<h2>Un tabel aliniat la dreapta inconjurat la distanta de text</h2>
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
Text inainte de tabel.
<table border align=left hspace=200 vspace=20">
</table>
tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text
dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.
tabel. Text dupa tabel.
</body></html>
Exemplul 7_10. Un tabel cu titlu
<html><head>
</head>
<body>
<h2>Un tabel cu titlu</h2>
<table border>
<caption align=top>Fructe
<tr><td>mure<td>zmeura<td>afine
<tr><td>mere<td>pere<td>cirese
</table>
</body>
</html>
HTML prin exemple
45
Cap de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt
introduse de eticheta <th> (de la table header = cap de tabel) n loc de <td>.
Observaii:
l Toate atributele care pot fi ataate etichetei <td> pot fi, de asemenea, ataate etichetei <th>.
l Coninutul celulelor definite cu <th> este scris cu caractere aldine i centrat.
Exemplul 7_11. Un tabel cu titlu i cap de tabel
<h2>Un tabel cu titlu si cap de
tabel</h2>
<table border>
<caption align=bottom> Bilantul in
saptamana 11-15 mai
<tr><th>Bilant\Zile
<th>Luni<th>Marti<th>Miercuri
<th>Joi<th>Vineri
<tr><th>Intrari<td>1000<td>2000
<td>3000 <td>4000<td>5000
<tr><th>Iesiri<td>100<td>200<td>300
<td>400<td>500
</table>
</body></html>
Alinierea coninutului unei celule
Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului align,
care poate lua valorile:
l left (la stnga);
l center (centrat);
l right (la dreapta);
l char (alinierea se face fa de un caracter).
Observaie: Valoarea prestabilit este center.
Dac alinierea este de tipul char, atunci caracterul n raport cu care se face alinierea
este definit de atributul char, care primete ca valoare caracterul de aliniere. n mod
prestabilit acest caracter este ..
Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului valign,
care poate lua valorile:
l baseline (la baz);
l bottom (jos);
l middle (la mijloc);
l top (sus).
Observaie: Valoarea prestabilit este middle.
Lecia 7 Tabele
46
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 lime i height pentru nlime.
Valorile posibile ale acestor atribute sunt:
l numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a limii,
respectiv a nlimii unei celule;
l procente din limea, respectiv nlimea tabelului.
Aceste atribute pot fi ataate att etichetei <tr> pentru a defini alinierea tuturor celulelor
unui rnd, ct i etichetelor <td> i <th> pentru a stabili alinierea textului ntr-o singur celul.
Exemplul 7_12. Un tabel avnd coninutul celulelor aliniat n diverse moduri
<h2>Un tabel avand continutul celulelor
aliniat in diverse moduri</h2>
<table border width=50% height=50%>
<tr><td>aici<td>alinierea<td>este
<td>centru<td>stanga (implicita)
<tr align=right valign=top>
<td>aici <td>alinierea<td>este
<td>dreapta<td>sus
<tr><td valign=top>sus
<td valign=bottom>jos
<td align=left>stanga
<td align=right>dreapta
<td align=right
valign=bottom>dreapta si jos
</table></body></html>
Exemplul 7_13. Un tabel cu celule de 50x100 de pixeli
<h2>Un tabel cu celule de 50X100 de
pixeli</h2>
<table border>
<tr><td width=50
height=100">celula 11<td width=50
height=100">cel 12
<tr><td width=50 height=100">cel
21<td width=50 height=100">cel 22
</table>
</body></html>
Observaii:
l Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii tabelului, atunci vor
fi folosite aceste dimensiuni precizate;
l Dac dimensiunile precizate de atribute sunt mai mici dect cele necesare afirii tabelului, atunci
tabelul va fi ajustat la dimensiunile necesare.
HTML prin exemple
47
Tabele de forme oarecare
Un tabel trebuie privit ca o reea dreptunghiular de celule. Cu ajutorul a dou atribute
ale etichetelor <td>sau <th>, o celul se poate extinde peste celulele vecine. Astfel:
l Extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului
colspan, a crui valoare determin numrul de celule care se unific.
l Extinderea unei celule peste celulele de dedesubt se face cu ajutorul atributului rowspan,
a crui valoare determin numrul de celule care se unific.
Observaii:
l Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz, n etichetele
<td> sau <th> vor fi prezente ambele atribute, colspan i rowspan.
l n definiia tabelului, o celul extins este introdus printr-o singur etichet <td> sau <th>.
Exemplul 7_15 ilustreaz crearea de celule extinse ntr-o reea dreptunghiular de 4x4
celule (vezi i figura urmtoare).
Atributul nowrap
Atributul nowrap aparine elementelor <td> i <th>; el interzice ntreruperea unei linii
de text. Astfel, n tabel pot aprea coloane cu o lime orict de mare (vezi exemplul
7_16).
n exemplul urmtor se creeaz cu ajutorul unui tabel, avnd limea 80% din limea
paginii, 3 coloane de text cu limile de 25%, 50%, respectiv 25% din limea paginii.
Exemplul 7_14. Un tabel cu coloane de text
<center><table width=80%>
<tr><td width=25% valign=top>Text in prima coloana. Text in prima coloana.
Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in
prima coloana.
<td width=50% valign=top>
Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in
coloana a doua. Text in coloana a doua. Text in coloana a doua.
<td width=25% valign=top>
Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text
in coloana a treia. Text in coloana a treia. Text in coloana a treia.
</table></center>
</body></html>
Lecia 7 Tabele
48
Exemplul 7_15. Un tabel cu celule extinse
<h2>Un tabel cu celule extinse</h2>
<table border>
<tr><td rowspan=3">c11<br>c21<br>c31
<td>c12<td colspan=2 rowspan=3">
c13, c14<br>c23, c24
<br>c33, c34
<tr><td>c22
<tr><td>c32
<tr><td>c41<td colspan=3">c42, c43,
c44
</table>
</body></html>
Celulele vide ale unui tabel
Dac un tabel are celule de date vide, atunci aceste celule vor aprea n tabel fr un chenar
de delimitare (vezi exemplul 7_17). n scopul de a afia un chenar pentru celulele vide, se
utilizeaz urmtoarele trucuri:
l dup <td> se pune caracterul
l dup <td> se pune <br>.
Observaie: Caracterul (no break space) este de fapt caracterul spaiu. Un spaiu introdus prin
intermediul acestui caracter nu va fi ignorat de browser.
Atribute Internet Explorer pentru tabele
Urmtoarele atribute ale etichetei <table> funcioneaz cu Internet Explorer 4.0, dar nu
cu Netscape Communicator 4.5 (vezi exemplul 7_18):
l background permite stabilirea unei imagini pentru fondul unui tabel. Primete ca valoare
adresa URL a imaginii folosite pentru fond;
l bordercolor permite stabilirea culorii pentru chenarul unui tabel;
l bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
l bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel.
HTML prin exemple
Exemplul 7_16. Atributul nowrap
<h2>Un tabel cu celule de latime
mare</h2>
<table border>
<tr><td nowrap>celula 21<td>celula 22
este foarte lata. Celula 22 este
foarte lata. Celula 22 este foarte
lata.
</table>
</body></html>
49
Grupuri de coloane
Blocul <colgroup></colgroup> permite definirea unui grup de coloane. Atributele
acceptate de <colgroup> sunt (vezi exemplul 7_19):
l span determin numrul de coloane dintr-un grup;
l width determin o lime unic pentru coloanele din grup;
l align determin un tip unic de aliniere pentru coloanele din grup.
Exemplu:
<colgroup span = 3 width = 100></colgroup>
Observaie: ntr-un bloc <colgroup>, coloanele pot avea configurri diferite dac se utilizeaz elementul
<col>, care admite atributele:
l span identific acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanele
sunt configurate n ordine;
l width determin o lime pentru coloana identificat prin span;
l align determin o aliniere pentru coloana identificat prin span.
Atributele frame i rules
Atributul frame al etichetei <table> permite specificarea prilor din chenarul unui tabel
care vor fi afiate. Valorile posibile ale acestui atribut sunt: void, above, below,
hsides, lhs, rhs, vsides, box, border.
Exemplul 7_17. Un tabel cu celule vide
<html>
<head>
</head>
<body>
<h2>Un tabel cu celule vide.</h2>
<table border>
<tr><td>c11<td>c12<td>c13
<tr><td> <td><td><br>
</table>
</body></html>
Exemplul 7_18. Atribute Internet Explorer pentru tabele
<html><head>
</head><body>
<h2>Atribute Internet Explorer</h2>
<table border=5
background=aol_wl.gif
cellspacing=10 bordercolorlight=red
bordercolordark=blue>
<tr bgcolor=yellow><td>c11<td>c12<td>c13
<tr bgcolor=yellow><td> <td><td><br>
</table>
</body></html>
Lecia 7 Tabele
50
Atributul rules al etichetei <table> permite alegerea unor delimitatori pentru celulele
unui tabel. Valorile posibile sunt: none, groups, rows, cols, all.
Exemplul 7_19. Grupuri de coloane
</title></head><body><center>
<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 a doua. Text in
coloana a doua. Text in coloana a
doua. Text in coloana a doua. Text in
coloana a doua. <td valign=top>
Text in coloana a treia. Text in
coloana a treia. Text in coloana a
treia. Text in coloana a treia.
</table></center></body></html>
Subblocurile unui tabel
n specificaiile HTML 4.0, coninutul unui tabel poate fi mprit n subblocuri prin
elementele:
l <thead><tr><td></thead> (un singur rnd);
l <tfoot><tr><td></tfoot> (un singur rnd);
l <tbody><tr><tbody> (oricte rnduri).
Observaie: 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>.
Exemplul 7_20. Atributele frame si rules
<center>
<table width=400 frame=lhs
rules=all cellspacing=10>
</table>
</center>
</body></html>
HTML prin exemple
Lecia 8 Lecia 8
Imagini Imagini
O facilitate extraordinar a limbajului HTML este posibilitatea includerii imaginilor.
Tipuri de fiiere pentru imagini
Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptate de browsere
pentru fiierele imagine sunt:
l GIF (Graphics Interchange Format) cu extensia .gif;
l JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
l XPM (X PixMap) cu extensia .xmp;
l XBM (X BitMap) cu extensia .xbm;
l BMP (BitMap) cu extensia .bmp (numai cu browserul Internet Explorer);
l DIB (Device Independent Bitmap);
l TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
l PCX (PC Paintbrush);
l PNG (Portable Network Graphics) cu extensia .png.
Observaie: Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 de culori posibile) i
JPEG (24 de bii pentru o culoare, 16 777 216 de culori posibile).
Adresa URL a unei imagini
URL (Uniform Resource Locator= identificator uniform al resursei) este un standard
folosit n identificarea unic a unei resurse n Internet. n lecia 10 vei nva n detaliu
despre adresele URL.
Toate imaginile cu care vom lucra n aceast lecie vor avea adresa URL exprimat n
funcie de directorul ce conine documentul HTML care face referire la imagine.
n Anexa B Cutarea fiierelor imagine este prezentat un algoritm pentru
identificarea fiierelor imagine aflate pe un sistem Windows.
Prima pagin Web care conine o imagine
Pentru a insera ntr-o pagin Web o imagine, se utilizeaz eticheta <img> (de la
image = imagine). Pentru a putea identifica imaginea care va fi inserat, se utilizeaz un
atribut al etichetei <img> i anume src (de la source = surs).
Valoarea acestui atribut este adresa URL a imaginii.
Observaii:
l Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci adresa
URL a imaginii este format numai din numele imaginii, inclusiv extensia. Exemplu: nume.extensie,
unde nume este numele fiierului imagine, iar extensie este extensia acestuia.
l Exemplele care urmeaz presupun c fiierele imagine utilizate se afl n directorul care este necesar
(n mod prestabilit n directorul curent de lucru).
l Numii fiierul urmtor e8_1.html, salvai-l n directorul de lucru (de exemplu c:\html).
l Schimbai numele fiierului imagine (valoarea atributului src) cu numele altui fiier imagine disponibil
pe calculatorul dumneavoastr i plasat n directorul de lucru (c:\html).
52
Adresarea relativ
S admitem c pe calculatorul ce stocheaz paginile HTML exist urmtoarea structur
de directoare i de fiiere:
Dac dorim s referim din fiierul test.html aflat
n directorul c:\html\a fiierele imagine aflate n
diverse directoare, se utilizeaz n construcia adresei
URL aa-numita adresare relativ (adic fa de
directorul curent c:\html\a), dup cum se arat n
continuare:
l i2.gif
l aa\i3.gif
l ..\i2.gif
l ..\b\i4.gif
l ..\b\bb\i5.gif
l ..\..\i1.gif
Observaie: Directorul printe al unui director curent se indic prin ..\
Tem: Creai structura de directoare indicat n figura urmtoare, dup care copiai n fiecare director
cte un fiier de tip imagine i testai adresarea relativ dup schema propus mai nainte.
Exemplul 8_1. Prima pagin Web care conine o imagine
<h2>Prima pagina web care contine o
imagine</h2>
<img src=aol_sl.gif>Text dupa
imagine.
</body></html>
html (i2.gif)
b (i4.gif)
bb (i5.gif)
C: (i1.gif)
a (i2.gif)
(test.html)
aa (i3.gif)
Observaie:
l Pentru ca exemplul anterior s funcioneze corect, salvai fiierul anterior ca e8_2.html n directorul
c:\html\a, iar fiierul cnn_sl.gif (sau altul pe care l dorii) n directorul c:\html\b.
Chenarul unei imagini
Dac dorii s adugai un chenar n jurul imaginii, folosii atributul border al etichetei
<img>. Valorile acestui atribut sunt numere ntregi pozitive.
Exemplul 8_2. Imagine referit prin adresare relativ
<h2>Imagine referita prin adresare
relativa</h2>
<img src=..\b\cnn_sl.gif>Text dupa
imagine.
</body></html>
HTML prin exemple
53
Dimensionarea unei imagini
O imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul
crerii ei. Dac nu se cere altfel, aceste dimensiuni sunt respectate n momentul afirii ei
n pagina Web.
Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor
width i height ale etichetei <img>. Valorile posibile ale acestor atribute sunt:
l numere intregi pozitive reprezentnd numrul de pixeli;
l numere de la 1 la 100 urmate de %, reprezentnd procente din limea, respectiv din
nlimea blocului printe n care se afl imaginea (n mod prestabilit, pagina Web).
Exemplul 8_3. Imagine cu chenar
<html>
<head>
</head><body>
<h2>Imagine cu chenar</h2>
<img src=aol_wl.gif border=5">
Text dupa imagine.
</body></html>
Observaie: Precizarea dimensiunilor spaiului ocupat de o imagine ntr-o pagin Web duce la creterea
vitezei de ncrcare a paginii, deoarece browserul rezerv spaiul n pagin i continu afiarea celorlalte
elemente ale acesteia. n paralel are loc ncrcarea imaginii.
Alinierea unei imagini n pagina Web
Alinierea unei imagini n cadrul paginii Web se poate face prin intermediului atributului
align al etichetei <img>, care poate lua una dintre urmtoarele valori:
l left aliniere la stnga; celelalte componente ale paginii sunt dispuse n partea
dreapt);
l right aliniere la dreapta; celelalte componente ale paginii sunt dispuse n partea
stng);
l top (asemntor cu texttop) aliniere deasupra; partea de sus a imaginii se aliniaz
cu partea de sus a textului ce precede imaginea;
l middle (asemntor absmiddle) aliniere la mijloc; mijlocul imaginii se aliniaz cu
linia de baz a textului ce precede imaginea);
Lecia 8 Imagini
Exemplul 8_4. Imagine de 200 de pixeli x 20%
<html><head>
</head><body>
<h2>Imagine de 200 de pixeli X 20%
</h2>
<img src=aol_sl.gif width=200
height=20%>
</body></html>
54
Observaie:
l Dac imaginea pe care o folosii este prea mic sau prea mare, adugai-i atributele width = 20% i
height = 20%.
Alinierea textului n jurul unei imagini
Atributele hspace i vspace ale etichetei <img> precizeaz distana n pixeli pe orizontal,
respectiv pe vertical, dintre imagine i restul elementelor din pagin (de exemplu text).
l bottom sau baseline (asemntor cu absbottom) aliniere la baz; partea de jos a
imaginii se aliniaz cu linia de baz a textului).
Exemplul 8_5. Alinierea unei imagini pe vertical
<html><head>
</head><body>
<h2>Alinierea unei imagini pe
verticala</h2>
Sus:<img src=aol_sl.gif align=top>
La mijloc:<img src=aol_sl.gif
align=middle>
Jos:<img src=aol_sl.gif
align=bottom>Text dupa imagini.
</body></html>
Exemplul 8_6. Imagine aliniat la stnga, nconjurat de text la distana de 50 de
pixeli
<h2>Imagine aliniata la stanga inconjurata de text la distanta de 50 de pixeli</h2>
Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text
inainte de imagine. Text inainte de imagine. Text inainte de imagine.
<img src=aol_wl.gif align=left hspace=50 vspace=50">
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>
HTML prin exemple
55
Observaii:
l Text dupa imagine nu urmeaz n pagina Web imediat dup Text nainte de imagine, dei ar avea
loc, datorit etichetei <br> care foreaz trecerea la linie nou.
l Dac imaginea pe care o folosii este prea mic sau prea mare, adugai-i atributele width = 20% i
height = 20%.
l Pentru a elibera zona din stnga unei imagini (respectiv dreapta sau ambele pri ale unei imagini),
utilizai eticheta <br> cu atributul clear avnd valoarea left (respectiv right sau all).
Elemente nlocuitoare pentru imagini
Deseori, dimensiunea unei imagini de nalt rezoluie (msurat n kilooctei) este mare
i timpul de ncrcare a paginii Web n fereastra browserului crete cu att mai mult cu ct
legtura dintre client i server este mai lent.
Pentru ca utilizatorul s neleag totui ceva din imagine (pn la ncrcarea acesteia
n ntregime), se apeleaz la dou atribute ale etichetei <img> care nlocuiesc imaginea pe
perioada ncrcrii:
l atributul alt admite ca valoare un text care va fi afiat n locul imaginii.
l atributul lowsrc admite ca valoare adresa URL a unei imagini de joas rezoluie (de
mic dimensiune), care poate fi ncrcat imediat chiar i n condiiile unor legturi slabe.
Exist aplicaii de prelucrare a imaginilor care permit transformarea unei imagini ntr-o
imagine asemntoare de joas rezoluie i de dimensiune mult mai mic dect cea
original.
Observaie:
l Dac se folosete atributul alt, atunci ori de cte ori mouse-ul este poziionat pe suprafaa imaginii,
pe ecran apare ntr-un chenar textul ce constituie valoarea atributului (n cazul exemplului anterior va fi
afiat America Online).
Imagini pentru fondul unei pagini Web
O imagine poate fi utilizat pentru a stabili fondul unei pagini Web. n acest scop se
folosete atributul background al etichetei <body>, avnd ca valoare adresa URL a imaginii.
Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.
Observaii:
l ntruct pagina din exemplul urmtor nu ncape ntr-un singur ecran, va trebui s utilizai bara de
derulare vertical pentru a vizualiza ntreaga pagin.
l n timpul derulrii, textul i imaginea de fond se deplaseaz mpreun.
Exemplul 8_7. Imagini de joas rezoluie i texte nlocuitoare
<h2>Imagini de joasa rezolutie si
texte inlocuitoare</h2>
<img src=aol_wl.gif lowsrc=
aol_sl.gif alt=America on Line>
</body></html>
Lecia 8 Imagini
56
Pentru ca n timpul derulrii unei pagini Web foarte mari imaginea de fond s rmn
fix, se utilizeaz atributul bgproperties al etichetei <body> cu valoarea fixed. Acest
atribut funcioneaz numai cu Internet Explorer.
Exemplul 8_8. Pagin Web cu imagine de fond
</title></head>
<body background=aol_wl.gif>
<h2>Pagina web cu imagine de fond
</h2>
Start<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br>
Linie<br> Sfarsit<br>
</body></html>
Exemplul 8_9. Pagin Web cu imagine de fond fix
</title></head>
<body background=aol_wl.gif
bgproperties=fixed>
<h2>Pagina web cu imagine de fond
fixata</h2>
Start<br> Linie<br> Linie<br>
Linie<br> Sfarsit<br>
</body></html>
Un tabel de imagini
Celulele unui tabel pot conine imagini. Acestea se introduc (eventual mpreun cu
text) dup etichetele <td> sau <th>.
Exemplul 8_10. Un tabel de imagini
<h2>Un tabel de imagini</h2>
<table border>
<tr><td><img src=aol_sl.gif><td>
<img src=cnn_sl.gif>
<tr><td><img src=comic_sl.gif><td>
<img src=news_sl.gif>
</table>
</body></html>
HTML prin exemple
57
Un tabel de tabele de imagini i texte
Exemplul urmtor prezint un tabel cu un rnd i dou coloane.
Fiecare celul a tabelului este format din dou rnduri i o coloan. n rndul de sus
se afl o imagine, iar n rndul de jos se afl un text explicativ privind imaginea.
Exemplul 8_11. Un tabel de tabele de imagini i texte
<h2>Un tabel de tabele de imagini si
texte</h2>
<table border>
<tr>
<td> <table border>
<tr><td><img src=aol_sl.gif>
<tr><td>America on Line Preview
</table>
<td> <table border>
<tr><td><img src=cnn_sl.gif>
<tr><td>CNN Interactive
</table>
</table>
</body></html>
Imagini folosite ca legturi
Despre legturi vei nva n detaliu n Lecia 10. O legtur (link) introduce n pagina
Web o zon activ. Efectund un clic cu butonul stng al mouse-ului pe aceast zon (n
cazul nostru pe imagine), n browser se va ncrca o alt pagin Web.
Pentru a utiliza imaginea aol_sl.gif drept legtur ctre pagina p1.html, utilizai
sintaxa:
<a href = p1.html><img src = aol_sl.gif></a>.
Exemplul 8_12. Imagini folosite ca legturi
<h2>Imagini folosite ca legaturi</h2>
Text inainte de imagine
<a href=p1.html>
<img src=aol_sl.gif></a>
Text dupa imagine
</body></html>
Observaie: n mod prestabilit, imaginea utilizat pe post de zon activ este nconjurat de un chenar
avnd culoarea unei legturi. Dac stabilii pentru atributul border al etichetei <img> valoarea 0, acest
chenar dispare.
Lecia 8 Imagini
58
Imagini n fiiere externe
Deoarece imaginile necesit un timp ndelungat de ncrcare n browser, deseori n
pagina Web este preferat inserarea numai unei legturi ctre imagini, lsnd utilizatorului
posibilitatea de a le ncrca sau nu.
Exemplul urmtor ilustreaz inserarea unei legturi ctre un fiier imagine folosind
sintaxa:
<a href = aol_sl.gif>Efectuati clic pentru a vedea imaginea</a>.
Exemplul 8_13. Imagini n fiiere externe
<h2>Imagini in fisiere externe</h2>
Text inainte de link.
<a href=aol_sl.gif>Efectuati click
pentru a vedea imaginea</a>
Text dupa link.
</body></html>
Un truc foarte des utilizat de creatorii de pagini Web este acela de a utiliza o imagine
de rezoluie sczut pe post de legtur ctre aceeai imagine, dar stocat ntr-un fiier cu
o rezoluie foarte bun. Utilizatorul vede n pagin imaginea de rezoluie sczut i, dac
aceast imagine prezint interes pentru el, atunci prin efectuarea unui clic n browser se
ncarc imaginea de rezoluie nalt.
Exemplul 8_14. Imagini de diferite rezoluii
<html><head>
</head><body>
<h2>Imagini de diferite rezolutii</h2>
Text inainte de imagine.
<a href=i1.jpg><img src=i2.jpg></a>
Text dupa imagine.
</body></html>
Alte atribute pentru elementul <img>
Urmtoarele dou atribute ale etichetei <img> au utilizri mai reduse la crearea
paginilor HTML:
l suppress admite valorile true i false i permite activarea, respectiv dezactivarea
ncrcrii imaginii ntr-o pagin Web;
l longdesc este o adres URL ctre o pagin Web care ofer detalii despre imagine.
Faciliti ale formatului GIF
Formatul GIF89a ofer urmtoarele trei mbuntiri ale fiierelor imagine:
1. Imaginile ntreesute (interlaced images) sunt imagini care apar integral n pagina Web,
dar, pe msur ce sunt ncrcate, claritatea lor crete.
HTML prin exemple
59
2. Imaginile transparente (transparent images) sunt imagini care nu au culoare de fond,
astfel nct ceea ce se afl n spatele imaginilor devine parial vizibil.
3. Imaginile animate (animated images) sunt fiiere imagine speciale coninnd o
succesiune de imagini afiate periodic n pagina Web.
Observaie: Cele mai multe aplicaii de prelucrare a imaginilor permit salvarea fiierelor imagine astfel
nct s beneficieze de facilitile enumerate mai sus.
Utilizri speciale ale imaginilor
Imaginile pot fi utilizate pentru a obine efecte deosebite ntr-o pagin Web. Printre
aceste utilizri speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor (eventual animate);
2. Simboluri speciale pentru elementele unei liste neordonate (vezi lecia urmtoare).
Lecia 8 Imagini
Lecia 9 Lecia 9
Documentarea unei pagini Web Documentarea unei pagini Web
Metainformaiile sunt informaii despre modul de organizare a informaiilor. n cazul
unei pagini Web, metainformaiile vor furniza date despre modul n care a fost creat
aceast pagin.
Metainformaiile nu sunt vizibile ntr-o pagin Web. Ele sunt coninute n fiierul surs
.html i sunt utilizate de serverele Web din Internet, specializate n stocarea de informaii
despre informaiile memorate n diferite site-uri.
Serverele specializate n stocarea de metainformaii ofer utilizatorilor motoare de
cutare puternice care permit regsirea informaiilor (a adreselor la care aceste informaii
sunt stocate). Putem enumera ca exemple: www.yahoo.com, www.altavista.com,
www.excite.com, www.lycos.com etc.
Un element pentru metainformaii
Metainformaiile, adic informaiile despre coninutul unei pagini Web, se introduc cu
ajutorul unui element special <meta> plasat n interiorul blocului <head></head>. Acest
element accept patru atribute a cror semnificaie va fi furnizat pe parcurs:
l name,
l http-equiv,
l content,
l scheme,
la care se poate aduga un atribut universal (comun tuturor elementelor), i anume
l lang.
Primele trei atribute se folosesc n perechi: name/content sau http-equiv/content,
celelalte dou atribute (scheme i lang) avnd caracter opional.
Descrierea unei pagini Web
Pentru a face cunoscut motoarelor de cutare aflate n Internet scopul n care a fost
creat o pagin Web, putem insera un element <meta> avnd atributele:
l name configurat la valoarea description;
l content configurat la un ir ce conine o descriere general a paginii.
Exemplul 9_1. Descrierea unei pagini
<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta name=description content=Colegiul National Mihai Viteazul din
Bucuresti este un liceu de prestigiu din Romania. Acest site prezinta
informatii despre elevii, profesorii, oferta scolii, cursurile optionale,
performantele si planurile de viitor ale noastre.>
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>
61
Cuvinte cheie pentru o pagin Web
Cuvintele cheie sunt utilizate pentru a regsi informaii prin intermediul unui motor de
cutare. Selectarea acestor cuvinte cheie trebuie fcut cu atenie pentru ca informaia
respectiv s poat fi localizat.
Cuvintele cheie ofer o alt metod de descriere a informaiilor coninute de o pagin
Web.
Pentru a preciza cuvintele cheie ale paginii Web:
l atributul name va primi valoarea keywords;
l atributul content va primi ca valoare o list de cuvinte cheie separate prin virgul.
Exemplul 9_2. Cuvinte cheie
<html>
<head>
<meta name=keywords content=colegiu, Mihai, Viteazul, Bucuresti, liceu,
prestigiu, Romania, elev, profesor, curriculum, optionale, olimpiade,
matematica, cor>
</head>
<body>
</html>
Drepturile de autor
Atributul name poate fi utilizat pentru a furniza informaii legate de autorul paginii i de
Copyright (drepturile de autor). Exemplul urmtor ilustreaz acest lucru.
Exemplul 9_3. Drepturile de autor
<html>
<head>
<meta name=author content=Tudor Popescu, IX A>
<meta name=copyright content=cnmv.ro>
</head>
<body>
</html>
Data crerii i data reactualizrii paginii Web
Pentru a transmite serverelor specializate n regsirea informaiilor din Internet data
crerii i data reactualizrii unei pagini Web, se utilizeaz atributul http-equiv. Valoarea
atributului content este, n aceste cazuri, o dat calendaristic i o or n formatul:
zzz, zz lll aaaa hh:mm:ss ttt, unde:
l zzz reprezint primele trei litere ale zilei din sptmn (Mon, Tue, Wed, Thu, Fri, Sat
sau Sun);
l zz reprezint ziua din cadrul lunii (01, 02, , 31);
l lll reprezint primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun, Jul,
Aug, Sep, Oct, Nov sau Dec);
l aaaa reprezint anul exprimat cu 4 cifre (de exemplu 1999);
Lecia 9 Documentarea unei pagini Web
62
Observaie: Dac data este furnizat ntr-un format ambiguu (de exemplu 03-07-1999), atunci
adugai atributul scheme care precizeaz formatul utilizat pentru dat (de exemplu scheme = Month-
Day-Year).
Persoana de contact
Pentru a putea furniza informaii despre persoana care administreaz site-ul, utilizai
atributul http-equiv ca n exemplul urmtor. n aceste cazuri, valoarea atributului content
este o adres e-mail, eventual urmat, ntre paranteze rotunde, de un nume complet al
persoanei.
l hh:mm:ss reprezint ora, minutul i secunda;
l ttt reprezint standardul de timp utilizat (de exemplu GMT).
Exemplul 9_4. Data crerii i data reactualizrii unei pagini Web
<html>
<head>
<meta http-equiv=creation-date content=Sun, 19 Sep 1999 12:00:00 GMT>
<meta http-equiv=expires content=Sun, 26 Sep 1999 12:00:00 GMT>
</head>
<body>
</html>
Exemplul 9_5. Persoana de contact
<html>
<head>
<title>Mihai Viteazul, Bucuresti Home Page</title>
<meta http-equiv=from content=tgugoiu@cnmv.ro (Teodoru Gugoiu)>
<meta http-equiv=reply-to content=tgugoiu@cnmv.ro (Teodoru Gugoiu)>
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul, Bucuresti!</h1><hr>
</html>
Tipul fiierului
Pentru a preciza informaii legate de tipul fiierului i setul de caractere utilizate,
folosii atributul http-equiv ca n exemplul urmtor:
Exemplul 9_6. Tipul fiierului
<html>
<head>
<meta http-equiv=content-type content=text/html; charset=ISO-8859-5">
</head>
<body>
</html>
HTML prin exemple
63
Limba utilizat
Deoarece la regsirea informaiilor cu ajutorul motoarelor de cutare se pot utiliza
cuvinte cheie scrise n diferite limbi, se pot insera informaii legate de limba utilizat cu
ajutorul atributului universal (comun i altor elemente) lang.
Exemplul 9_7. Limba utilizat
<html>
<head>
<meta http-equiv=keywords lang=en-us content=college, Mihai, Viteazul,
Bucharest, high school, prestige, Romania, student, teacher, curriculum,
optional, olimpiade, mathematics>
<meta http-equiv=keywords lang=ro content=colegiu, Mihai, Viteazul,
Bucuresti, liceu, prestigiu, Romania, elev, profesor, curriculum, optionale,
olimpiade, matematica>
</head>
<body>
</html>
Reactualizarea paginii curente din browser
O utilizare special a atributului http-equiv este aceea de a stabili rencrcarea
automat n browser a aceleiai pagini (de exemplu, pagina cu evoluia cursurilor la o
burs) sau a alteia.
n acest fel se obin faciliti dinamice pentru un site Web.
Pentru a rencrca aceeai pagin la un interval precizat de secunde, folosii atributul
http-equiv cu valoarea refresh, iar n atributul content introducei numrul de secunde
dup care dorii ca pagina s fie reactualizat.
Exemplul 9_7. Rencrcarea automat a unei pagini
<html><head><title>Mihai Viteazul
Home Page</title>
<meta http-equiv=refresh con-
tent=5">
</head><body>
<h1>Bine ati venit la Colegiul Na-
tional Mihai Viteazul!</h1><hr>
Aceasta pagina va fi reincarcata dupa
5 secunde!
</html>
Dac dorim ca dup un numr de secunde o pagin s fie nlocuit de o alta, atunci n
atributul content este precizat i adresa URL a paginii noi, ca n exemplul 9_8:
Comentarii
Comentariile sunt blocuri de text utile care ofer indicaii privind modul n care a fost
scris un fiier surs HTML. Comentariile sunt ignorate de ctre browser la ncrcarea
paginii.
Lecia 9 Documentarea unei pagini Web
64
Pentru a insera un bloc de comentarii, utilizai sintaxa:
<!orice text doriti>.
Observaii:
l Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii HTML.
l Blocul de comentarii se poate extinde pe mai multe rnduri.
l Nu sunt permise spaii ntre <! i , dar sunt permise spaii ntre i >.
Exemplul 9_9. Comentarii
Exemplul 9_8. Schimbarea automat a unei pagini
<html><head><title>Mihai Viteazul
Home Page</title>
<meta http-equiv=refresh
content=9; url=cuprins.html>
</head><body>
<h1>Bine ati venit la Colegiul
National Mihai Viteazul!</h1><hr>
Aceasta pagina va fi schimbata dupa 9
secunde cu pagina cuprins.html!
</html>
<html><head>
<!Aceasta este Pagina Home a
Colegiului National Mihai Viteazul
din Bucuresti, Romania>
<title>Mihai Viteazul Home Page
<!urmeaza un header>
<h1>Bine ati venit la Colegiul
National Mihai Viteazul!</h1>
<!urmeaza o linie orizontala>
<hr>
</html>
HTML prin exemple
Lecia 10 Lecia 10
Legturi Legturi
Interactivitatea unei pagini Web
Legturile (link-urile) reprezint partea cea mai important a unei pagini Web. Ele
transform un text obinuit n hipertext sau hipermedia, care permite trecerea rapid de la
o informaie aflat pe un anumit server la alt informaie memorat pe un alt server aflat
oriunde n lume.
Legturile sunt zone active ntr-o pagin Web, adic zone de pe ecran sensibile la
apsarea butonului stng al mouse-ului. Un clic efectuat cu mouse-ul pe o legtur este
interpretat ca o cerere ctre un anumit server din Internet de a expedia ctre calculatorul
client o resurs indicat de legtura respectiv. n acest fel, paginile Web devin interactive
(adic rspund la aciuni iniiate de utilizator).
Lucrurile stau n felul urmtor:
a) n pagina HTML se insereaz legturi prin intermediul unei etichete speciale <a> i a
unui atribut href care ia ca valoare adresa URL a resursei solicitate (vezi Anexa D_URL
pentru mai multe detalii).
De exemplu, <a href = www.netscape.com>zona activa </a>.
b) n pagina Web apar legturile definite la punctul a) ca zone active. Cnd mouse-ul se
afl deasupra unei zone active, cursorul mouse-ului ia n mod automat forma unei mini;
c) Efectund click pe o zon activ ce reprezint o legtur din pagina Web, browserul
trimite ctre serverul care stocheaz noua resurs o cerere de a-i expedia pagina
respectiv;
d) Serverul WWW (World Wide Web) ce stocheaz noua resurs primete cererea i
expediaz ctre utilizator (calculatorul client) resursa solicitat. Dac aceasta este o nou
pagin Web, atunci serverul expediaz un fiier HTML mpreun cu fiierele imagine,
sunet etc. referite de acest fiier;
e) Calculatorul client (care a expediat cererea) primete resursa solicitat i o ncarc n
browser;
f) Pagina veche este nlocuit de pagina nou n acelai browser sau este lansat n
execuie o nou instan a browserului, care conine noua pagin.
O legtur ctre o pagin aflat n acelai director
O legtur ctre o pagin aflat n acelai director se formeaz cu ajutorul etichetei <a>
(de la anchor = ancor).
Pentru a preciza pagina indicat de legtur se utilizeaz un atribut al etichetei <a>
numit href, care ia ca valoare numele fiierului HTML aflat n acelai director, care va
nlocui vechea pagin.
Zona activ, adic zona din pagina Web care devine sensibil la apsarea butonului
stng al mouse-ului, este format din textul cuprins ntre etichetele <a> i </a>.
Observaie: Prezena etichetei de sfrit </a> este obligatorie.
Acest exemplu admite c n acelai director (de exemplu, n directorul de lucru
c:\html) se afl dou fiiere HTML, p1.html i p2.html:
66
O legtur ctre o pagin aflat pe acelai disc local
Dac pagina referit de legtur se afl pe acelai disc local, dar ntr-un alt director,
atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea
relativ (vezi lecia 8, paragraful Adresarea relativ).
Exemplul urmtor presupune c p1.html se afl n directorul c:\html\a\, iar p2.html
se afl n directorul c:\html\b\bb\.
Exemplul 10_1. Comutarea ntre dou pagini
<html><head><title>p1</title></head>
<body>
<h1>Pagina 1</h1>
<hr>
<a href=p2.html>Link catre Pagina 2
</a>
</body></html>
<html><head><title>p2</title></head>
<body>
<h1>Pagina 2</h1>
<hr>
</a>
</body></html>
O legtur ctre un site particular
n exemplul urmtor se utilizeaz adresa URL http://www.netscape.com, care ncarc
pagina de start (homepage) din site-ul firmei Netscape Corporation.
De regul, aceast pagin se numete index.html (home.html sau default.html) i se
afl n directorul rdcin al calculatorului www din domeniul netscape.com.
Exemplul 10_3. Link ctre site-ul firmei Netscape Communications Corporation
<html><head>
</head><body>
<h1>Link catre site-ul firmei
Netscape Communications Corporation
</h1><hr>
<a href=http://www.netscape.com>
Netscape Corporation</a>
</body></html>
HTML prin exemple
Exemplul 10_2. Comutarea ntre dou pagini aflate pe acelai disc local.
<html><head><title>p3</title>
</head><body>
<h1>Pagina 3</h1><hr>
<a href=../b/bb/p4.html>Link catre
Pagina 2</a>
</body></html>
<html><head><title>p4</title>
</head><body>
<h1>Pagina 4</h1><hr>
<a href=../../a/p3.html>Link catre
Pagina 1</a>
</body></html>
67
Utilizarea unei imagini ca zon activ
Zona activ a unei legturi este definit cu ajutorul etichetelor <a> i </a>. De obicei
ea este un text care apare subliniat i de culoare albastr. n momentul n care mouse-ul
se afl deasupra zonei active, cursorul su ia forma unei mini care i indic utilizatorului
s apese butonul mouse-ului.
Rolul de zon activ poate fi jucat i de o imagine dac inserarea ei are loc ntre
etichetele <a> i </a>.
Exemplul 10_4. Zona activ este o imagine
<h1>Utilizarea unei imagini ca zona
activa</h1><hr>
<a href=p.html>
<img src=aol_sl.gif></a>
</body></html>
Pentru ca acest exemplu s funcioneze:
l fiierele p.html i aol_sl.gif trebuie s se afle n acelai director;
l fiierul p.html trebuie s fie scris corect din punctul de vedere al limbajului HTML.
Observaii:
l Pentru a reveni ntr-o pagin Web anterioar, apsai butonul Back din bara de instrumente a
browserului utilizat.
l Imaginea utilizat ca zon activ este nconjurat de un chenar de aceeai culoare cu celelalte legturi.
Dac imaginea are atributul border configurat la valoarea 0, atunci chenarul din jurul imaginii dispare.
Ancore
ntr-o pagin Web foarte lung pot exista puncte de reper (ancore) ctre care se
definesc legturi.
O ancor se definete, de asemenea, prin eticheta <a>. Pentru a identifica ancora, se
utilizeaz atributul name al etichetei <a>, care primete ca valoare un nume atribuit ancorei
(de exemplu ancora1).
Pentru a insera o legtur ctre ancora1 definit n aceeai pagin, se utilizeaz
eticheta <a> avnd atributul href de valoare #ancora1.
Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflat
n acelai director, atributul href primete o valoare de forma
nume_fisier.html#nume_ancora.
Pentru a funciona corect, urmtorul exemplu presupune c n directorul curent se afl
fiierul e10_5.html avnd coninutul de la exemplul anterior.
Instane multiple pentru un browser
La nceperea unei sesiuni n Internet, pe calculatorul client (al utilizatorului) se lan-
seaz n execuie o instan a browserului folosit, care ncarc pagina Web solicitat.
Dac n timpul sesiunii de lucru se efectueaz un clic pe o legtur ctre o pagin
nou, atunci n mod prestabilit noua pagin o va nlocui pe cea precedent, folosind
aceeai instan (fereastr) a browserului.
Lecia 10 Legturi
68
Dac dorim ca pagina solicitat s fie ncrcat ntr-o alt fereastr dect cea curent,
atunci trebuie lansat n execuie o nou instan a browserului care va conine noua
pagin. Acest lucru se realizeaz folosind atributul target al etichetei <a>, care primete
ca valoare un nume (de exemplu fereastra) pentru fereastra n care se va ncrca noua
pagin.
Exemplul 10_5. Legturi ctre ancore definite n acelai document
<h1>Ancore definite in acelasi document</h1><hr>
<a href=#ancora1">Link catre ancora nr. 1</a><br>
<a href=#ancora2">Link catre ancora nr. 2</a><br>
l0<br>l1<br>l2<br>l3<br>l4<br>l5<br>l6<br>l7<br>l8<br>l9<br>l10<br> l11<br>
l12<br>l13<br>l14<br>l15<br>l16<br>l17<br>l18<br>l19<br>
<a name=ancora1">Prima ancora<br>
l20<br>l21<br>l22<br>l23<br>l24<br>l25<br>l26<br>l27<br>l28<br>l29<br>
<a name=ancora2">A doua ancora<br>
</body></html>
Exemplul 10_6. Legturi ctre ancore aflate n alt document
<html><head>
</head><body>
<h1>Ancore definite in alt document</
h1><hr>
<a href=e10_5.html#ancora1">Link
catre ancora nr. 1 din alt document
</a><br>
<a href=e10_5.html#ancora2">Link
catre ancora nr. 2 din alt document
</a><br>
</body></html>
HTML prin exemple
69
Dac mai multe legturi folosesc aceeai valoare pentru atributul target, nseamn c
paginile referite de acestea se vor ncrca n aceeai fereastr (vor utiliza aceeai instan a
browserului).
Exemplul 10_7. Pagin nou n fereastr nou
<html><head>
</head><body>
<h1>Pagina noua in fereastra noua
</h1><hr>
<a href=p2.html target=ferastra>
Link catre Pagina 2</a>
</body></html>
Exemplul 10_8. Pagini noi n ferestre noi
<html><head>
</head><body>
<h1>Pagini noi in ferestre noi</h1><hr>
<a href=p2.html target=fereastra1">
Incarca Pagina 2 in Fereastra 1</a><br>
Incarca Pagina 3 in Fereastra 2</a><br>
incarca Pagina 4 in Fereastra 1</a>
</body></html>
Observaii:
l Pentru a funciona, exemplul de mai sus presupune c n directorul curent exist fiierele p2.html,
p3.html i p4.html.
l Pentru a vedea mai bine cum funcioneaz exemplul de mai sus, evitai s folosii pentru ferestre o
dimensiune maximizat.
Atributul target accept urmtoarele valori cu semnificaie special:
l _blank (ncrcarea are loc ntr-o fereastr nou anonim);
l _parent (ncrcarea are loc n fereastra printe);
l _self (ncrcarea are loc n aceeai fereastr);
l _top (ncrcarea are loc n fereastra top a cadrelor curente).
Alegerea culorilor pentru legturi
n mod prestabilit se utilizeaz trei culori pentru legturi:
l o culoare pentru legturile nevizitate (nu s-a efectuat nici un clic pe ele);
l o culoare pentru legturile vizitate (s-a efectuat cel puin un clic pe ele);
l o culoare pentru legturile active (deasupra crora se afl mouse-ul la un moment dat).
Aceste culori pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>:
l link pentru legturile nevizitate;
l vlink pentru legturile vizitate;
l alink pentru legturile active.
Lecia 10 Legturi
70
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform
standardului RGB (vezi lecia 2).
Exemplul 10_9. Stabilirea culorilor pentru legturi
</title></head>
<body link=red vlink=yellow
alink=blue>
<h1>Setarea culorilor pentru
legaturi</h1><hr>
<ul> In aceasta pagina culorile
legaturilor sunt setate astfel:
<li>rosu pentru legaturi nevizitate
<li>galben pentru legaturile vizitate
<li>albastru pentru legaturile active
</ul>
</a><br>
<a href=p3.html> Link catre Pagina
3 </a><br>
<a href=p4.html> Link catre Pagina
4 </a>
</body></html>
Dou legturi de aur
Exemplul urmtor reprezint o pagin Web simpl ce conine dou legturi extrem de
utile pentru creatorii de pagini HTML:
l link-ul http://www.developer.netscape.com/docs/html v permite accesul la o pagin
excelent cu documentaie despre limbajul HTML. Pagina este gzduit de Netscape
Communications Corporation.
l link-ul http://www.w3.org/TR/REC-html40 v permite accesarea documentaiei de
referin pentru limbajul HTML (HTML 4.0 Specification). Pagina este realizat de World
Wide Web Corporation.
O legtur ctre un fiier HTML local
Pentru a accesa un fiier HTML local (aflat pe calculatorul client pe care este lansat n
execuie browserul), se utilizeaz serviciul file:// (n locul protocolului http://) mpreun
Exemplul 10_10. Dou legturi de aur
<h1>Doua legaturi de aur</h1><hr>
O documentatie excelenta despre
limbajul HTML puteti gasi la:<br>
<a href= http://
www.developer.netscape.com/docs/
html> Netscape Communications Corpo-
ration </a><br>
<a href=http://www.w3.org/TR/REC-
html40">W3 Corporation</a><br>
</body></html>
HTML prin exemple
71
cu adresa absolut (calea complet ctre directorul ce conine fiierul, plus numele
fiierului).
Exemplul urmtor presupune c fiierul p2.html se afl n directorul c:\html\.
O legtur ctre un server de fiiere
Pentru conectarea la un server din Internet specializat n transferul de fiiere (server
FTP), se utilizeaz serviciul ftp:// mpreun cu adresa serverului FTP i localizarea
fiierului pe server.
FTP vine de la File Transfer Protocol (protocolul de transfer al fiierelor).
Exemplul 10_12. O legtur ctre un server de fiiere
<h1>Link catre un server de fisiere
</h1><hr>
<a href=ftp://ftp.netscape.com
>Link catre serverul de fisiere al
firmei
Netscape Communication
Corporation</a><br>
</body></html>
Utilizarea potei electronice
ntr-o pagin Web se pot afla legturi care permit lansarea n execuie a aplicaiei de
expediere a mesajelor electronice. Pentru aceasta, se utilizeaz n construcia adresei URL
serviciul Internet mailto: urmat de o adres e-mail valid.
Exemplul 10_13. Expedierea de mesaje electronice
<h1>Expedierea de mesaje
electronice</h1><hr>
Opiniile legate de aceasta carte pot
fi expediate efectuand click aici:
<a href=mailto:tgugoiu@edu.ro>
Mesaje catre autorul cartii.</a><br>
</body></html>
Lecia 10 Legturi
Exemplul 10_11. O legtur ctre un fiier local
<html><head>
</head><body>
<h1>Link catre un fisier local
</h1><hr>
<a href=file://c:/html/p2.html>
Link catre Pagina 2 aflata pe discul
local</a><br>
</body></html>
72
Observaie: Pentru ca exemplul anterior s funcioneze, trebuie ca:
l pe calculatorul utilizatorului s fie instalat o aplicaie de expediere a mesajelor electronice (de
exemplu Internet Mail sau Outlook Express pe calculatoare Windows, Pine pe calculatoare Unix etc.);
l adresa de e-mail s fie valid;
l calculatorul utilizatorului s fie conectat la Internet.
Legturi ctre fiiere oarecare
O pagin Web poate conine legturi ctre orice tipuri de fiiere aflate pe orice servere
din Internet.
Pentru aceasta, n fiierul HTML se utilizeaz eticheta <a> avnd valoarea atributului
href egal cu adresa URL a fiierului destinaie (vezi detalii despre adrese URL n anexa
URL).
Exemplul 10_14. Legturi ctre fiiere oarecare
<html><head>
</head><body>
<h1>Legaturi catre fisiere oarecare
</h1><hr>
<a href=me.class >Link catre
fisierul me.class</a><br>
</body></html>
Observaie: Atunci cnd se efectueaz clic pe legtura din exemplul anterior, browserul deschide o
caset de dialog File download care v permite:
l s salvai pe discul local fiierul sau s lansai n execuie aplicaia capabil s interpreteze corect
fiierele de tipul respectiv;
l s optai pentru dezactivarea casetei de dialog i ncrcarea direct a fiierelor (cnd acest lucru este
posibil) pentru restul sesiunii de lucru n Internet.
Ancore definite prin atributul id
Atributul id este un atribut universal, adic poate fi ataat oricrui element al unei
pagini Web. Acest atribut va nlocui complet atributul name, care putea fi ataat numai
anumitor elemente.
Atributul id primete 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></etichteta>
<a href = #id1>Link catre elementul id1</a>
unde etichet poate fi orice element HTML.
Adresa URL de baz
Elementul <base> permite stabilirea unui director n serverul Web fa de care se vor
exprima adresele resurselor referite de legturile aflate ntr-o pagina Web.
Elementul <base> se plaseaz n blocul <head></head> i accept atributul href avnd
ca valoare adresa URL a directorului de baz fa de care se va face adresarea relativ.
HTML prin exemple
73
Exemplul 10_15. Ancore definite prin atributul id
<html><head>
</head><body>
<h1>Legaturi definite prin atributul id </h1><hr>
<a href=#id1">Link catre primul capitol</a><br>
<a href=#id2">Link catre capitolul doi</a><br>
Text introductiv.<br>Text introductiv.<br>Text introductiv.<br>Text
introductiv.<br>
<h2 id=id1">Primul capitol</h2>Text in primul capitol.<br>Text in primul
capitol.<br>Text in primul capitol.<br>Text in primul capitol.
<h2 id=id2">Al doilea capitol</h2>
Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.<br>
Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.
</body></html>
n exemplul urmtor se definete o legtur ctre imaginea: www.cnmv.ro/user1/
imagini/im7.gif.
Observaie: Dac eticheta <base> lipsete, atunci valoarea prestabilit este adresa URL a paginii
curente.
Exemplul 10_16. Adresa URL de baz
<html>
<head>
<base href=www.cnmv.ro/user1">
</head>
<body>
<h1>URL-ul de baza</h1><hr>
<a href=imagini/im7.gif>
Link catre o imagine aflata pe site-
ul www.cnmv.ro</a>
</body></html>
Lecia 10 Legturi
74
Atributul title
Atributul title aparine etichetei <a> i comand apariia unei mici ferestre n pagina
Web cnd mouse-ul se afl pe o legtur, fereastr n care este afiat valoarea dat
acestui atribut. Acest atribut are astfel menirea de a furniza informaii suplimentare despre
semnificaia unei legturi.
Exemplul 10_17. Atributul title
<html>
<head>
</head>
<body>
<h1>Atributul title</h1><hr>
<a href=capitolul1.html title=
Capitolul 1">Link catre primul
capitol</a>
</body>
</html>
HTML prin exemple
Lecia 11 Lecia 11
Sunete i videoclipuri Sunete i videoclipuri
Formate pentru fiierele de sunet
Sunetele pot fi stocate n fiiere diverse formate. Unele dintre acestea sunt recunoscute
de browsere i deci pot fi inserate n paginile Web.
Formatele i extensiile corespunztoare pentru fiierele utilizabile n paginile Web sunt
urmtoarele:
l formatul AU/m-law cu extensia .au;
l formatul AIFF/AIFC cu extensiile posibile .aiff sau aif;
l formatul WAVE/WAV cu extensia .wav;
l formatul MPEG Audio cu extensia .mpeg2 sau .mp2;
l formatul MIDI cu extensia .mid sau .midi.
Legturi ctre fiiere de sunet
O legtur ctre un fiier de sunet se realizeaz folosind eticheta <a> destinat
legturilor ctre orice tip de fiiere, unde atributul href va avea valoarea egal cu adresa
URL a fiierului de sunet.
Exemplul 11_1. Legturi ctre fiiere de sunet
</title><head><body>
<h1>Legaturi catre fisiere de sunet
</h1><hr>
<a href=spacemusic.au>Link catre
fisierul spacemusic.au</a><br>
<a href=The Microsoft
Sound.wav>Link catre fisierul The
Microsoft Sound.wav</a>
</body></html>
Observaie: Pentru ca exemplul anterior s funcioneze corect trebuie ca:
l denumirile fiierelor de sunet s fie nlocuite cu numele unor fiiere de sunet disponibile pe
calculatorul dumneavoastr (folosii utilitarul Find din Windows pentru a cuta fiiere cu o anumit
extensie);
l calea ctre aceste fiiere s fie corect (eventual copiai-le n directorul n care se afl i pagina
HTML).
Formate pentru fiierele de videoclipuri
Videoclipurile pot fi stocate n fiiere diverse formate. Unele dintre acestea sunt
recunoscute de browsere i deci pot fi inserate n paginile Web.
Formatele i extensiile corespunztoare pentru fiierele utilizabile n paginile Web sunt
urmtoarele:
l formatul MPEG cu extensiile posibile .mpeg sau .mpg;
l formatul QuickTime cu extensia .mov;
l formatul AVI cu extensia .avi.
76
Legturi ctre fiiere cu videoclipuri
O legtur ctre un fiier videoclip se realizeaz folosind eticheta <a> destinat
legturilor ctre orice tip de fiiere, unde atributul href va avea valoarea egal cu adresa
URL a fiierului videoclip.
Observaie: Pentru ca exemplul anterior s funcioneze corect trebuie ca:
l denumirile fiierelor cu videoclip s fie nlocuite cu numele unor fiiere cu videoclip disponibile pe
calculatorul dumneavoastr (folosii utilitarul Find din Windows pentru a cuta fiiere cu o anumit extensie);
l calea ctre aceste fiiere s fie corect (eventual copiai-le n directorul n care se afl i pagina
HTML);
l pe calculatorul utilizatorului s fie instalat aplicaia capabil s intrepreteze corect fiierul videoclip
corespunztor.
Sunetul de fond pentru o pagin Web
Pentru ca vizitarea unei pagini Web s fie nsoit de un sunet de fond, browserul
Internet Explorer accept eticheta <bgsound>. Fiierul care stocheaz sunetul este precizat
printr-un atribut al etichetei <bgsound>, i anume src (de la source = surs).
Un al doilea atribut al etichetei <bgsound>, i anume loop, permite precizarea
numrului de repetiii care sunt executate pn cnd sunetul de fond nceteaz.
Valorile posibile sunt:
l 1 sau infinite pentru ca sunetul de fond s se repete de un numr infinit de ori;
l un numr ntreg pozitiv care precizeaz de cte ori se repet sunetul.
Observaie: Trebuie avut n vedere ca fiierele de sunet ataate unei pagini Web s aib o dimensiune
rezonabil, pentru a nu suprancrca traficul pe conexiunea client-server.
Videoclipuri in-line
Browserul Internet Explorer accept o extensie a etichetei <img> pentru inserarea
in-line ntr-o pagin Web a video-clipurilor. Pentru aceasta se utilizeaz cinci atribute noi
ale etichetei <img>:
Exemplul 11_3. Sunetul de fond
<html><head><title>Exemplul 11_3</title><head><body>
<h1>Pagina web cu un sunet de fond</h1><hr>
<bgsound src=spacemusic.au loop=-1">
</body></html>
HTML prin exemple
Exemplul 11_2. Legturi ctre fiiere cu videoclipuri
<h1>Legaturi catre fisiere de
videoclipuri</h1><hr>
<a href=t241170a.avi>Link catre
fisierul t241170a.avi</a><br>
<a href=t052060a.avi>Link catre
fisierul t052060a.avi</a>
</body></html>
77
1. Atributul dynsrc (de la dynamic source) primete ca valoare adresa URL a fiierului
care contine videoclipul.
2. Atributul loop determin numrul de repetiii ale videoclipului, valorile posibile fiind:
l 1 sau infinite pentru ca video-clipul s se repete de un numr infinit de ori;
l un numr ntreg pozitiv care indic de cte ori se va repeta videoclipul .
3. Atributul start permite precizarea momentului n care va ncepe redarea videoclipului;
el poate lua urmtoarele valori:
l fileopen (videoclipul va ncepe cnd pagina Web s-a ncrcat n browser);
l mouseover (videoclipul va ncepe cnd cursorul mouse-ului se deplaseaz peste
imaginea ce reprezint video-clipul).
4. Atributul controls (fr valori specifice).
5. Atributul loopdelay permite stabilirea n intervalului de timp (n numr de milisecunde)
ntre dou reluri succesive ale videoclipului.
Observaie: Cnd nu se afl n rulare, videoclipul este afiat n pagina Web ca o imagine, care poate fi:
l prima imagine din videoclip;
l o imagine precizat prin atributul src al etichetei <img>;
l un text precizat de atributul alt al etichetei <img>.
Observaie: Se pot utiliza i alte atribute specifice etichetei <img>, ca de exemplu:
l src pentru specificarea unei imagini alternative;
l alt pentru specificarea unui text alternativ.
Lecia 11 Sunete i videoclipuri
Exemplul 11_4. Videoclip
<h1>Video-clip</h1><hr>
Treceti mouse-ul pe deasupra imaginii
de mai jos si videoclipul va rula de
2 ori.<br>
<img dynsrc=Sample.mov loop=2
start=mouseover src=aol_sl.gif
alt=Quick Time controls>
</body></html>
Lecia 12 Lecia 12
Hri de imagini Hri de imagini
Folosirea unei imagini ca hart de imagini
Am vzut n lecia 10, exemplul 10_4, c o imagine poate fi utilizat ca zon activ,
adic sensibil la apsarea butonului stng al mouse-ului. Pentru aceasta, imaginea trebuie
s fie inserat n documentul HTML ntre etichetele <a> i </a>.
Exist ns posibilitatea crerii hrilor de imagini (image maps) care permit ca diferite
zone ale unei imagini s fie definite drept legturi ctre diverse pagini Web.
Crearea unei hri de imagini presupune dou etape:
1. Definirea unei imagini ca hart de imagini. Pentru aceasta se folosete eticheta <img>
nsoit de dou atribute:
l atributul src, care primete ca valoare adresa URL a imaginii folosite ca hart de
imagini.
l atributul usemap, a crui valoare este de forma #harta1, unde harta1 este numele
hrii definite la punctul 2.
Observaie: Harta de imagini se poate afla i ntr-o alt pagin Web, caz n care atributul usemap
primete o valoare de forma:
l nume_pagina.html#harta1;
l www.cnmv.ro/harti.html/harta1.
2. Definirea hrii; aceasta se face n interiorul unui bloc special, delimitat de etichetele
<map> i </map>. Un atribut obligatoriu al etichetei <map> este name, care primete ca
valoare un nume (numele hrii de exemplu harta1).
O hart este format din mai multe zone. Fiecare zon se introduce cu ajutorul etichetei
<area>.
Eticheta <area> are trei atribute obligatorii:
l atributul shape determin tipul de zon activ i poate lua una dintre urmtoarele valori:
a) rect pentru zone de form dreptunghiular;
b) circle pentru zone de form circular;
c) poly pentru zone de form poligonal;
d) default pentru poriunile imaginii care nu se ncadreaz n nici una dintre categoriile
anterioare.
l atributul coords determin coordonatele zonei (vezi paragraful urmtor);
l atributul href primete ca valoare adresa URL a paginii indicate de legtura zonei respective.
Observaie: Dac n locul unui atribut href nu apare nimic sau se folosete atributul nohref (fr valori
suplimentare), atunci acea zon nu indic nici un alt document HTML.
Eticheta <area> poate avea, de asemenea; atributul target, care primete ca valoare
numele unei instane a browserului n care va fi afiat pagina ctre care indic legtura
zonei respective.
Coordonatele zonelor active
Pentru determinarea coordonatelor unei figuri geometrice (dreptunghi, cerc sau poli-
gon) se utilizeaz un sistem de coordonate rectangular avnd originea n colul din
79
stnga-sus al imaginii utilizate ca hart, axa OX orizontal i
orientat spre dreapta, iar axa OY vertical i orientat n jos
(vezi figura alturat).
Unitatea de msur este pixelul.
Un dreptunghi este determinat de coordonatele
vrfurilor din stnga-sus (x
1
, y
1
) i dreapta-jos (x
2
, y
2
) (vezi
figura alturat).
Atributul coords primete atunci o valoare de forma x
1
,
y
1
, x
2
, y
2
.
Exemplu: coords = 100, 100, 200, 200.
Un cerc este determinat de coordonatele centrului (x,y)
i de raz (r) (vezi figura alturat).
Atributul coords primete atunci o valoare de forma
x, y, r.
Exemplu: coords = 400, 200, 100.
Un poligon este determinat prin succesiunea de
coordonate ale vrfurilor (x
1
, y
1
), (x
2
, y
2
), (x
3
, y
3
) etc.
Atributul coords primete o valoare de forma:
x
1
, y
1
, x
2
, y
2
, x
3
, y
3
, .
Exemplu: coords = 100,300,200,300,400,400,100,400.
Utilizarea unei hri de imagini
S presupunem c am creat imaginea din
figura alturat (vezi Anexa C Hri de
imagini pentru un mod de construire).
Aceast imagine este salvat pe disc n
directorul curent de lucru, sub numele
harta de imagini.gif.
ntruct dimensiunile de afiare a
imaginii vor fi stabilite la 600 x 500 pixeli,
figurile geometrice vor avea coordonatele
(vezi paragraful precedent):
l 100,100,200,200 pentru ptrat;
l 400,200,100 pentru cerc;
Lecia 12 Hri de imagini
80
l 100,300,200,300,400,400,100,400 pentru poligon.
Alte atribute ale elementului <area>
Exist nc dou atribute ale etichetei <area>, i anume:
l atributul alt, care permite inserarea unei scurte descrieri a legturii ctre care indic
zona activ respectiv (exemplu: alt = descrierea legturii).
HTML prin exemple
Exemplul 12_1. Utilizarea unei hri de imagini
<h1>O harta de imagini</h1>
<img src=harta de imagini.gif
usemap=#harta1 width=600
height=500">
<map name=harta1">
<area shape=rect
coords=100,100,200,200 href=p2.html>
<area shape=circle
coords=400,200,100 href=p3.html>
<area shape=poly
coords=100,300,200,300,400,400,100,
400 href=p4.html>
</map>
</body></html>
l atributul universal (valabil i pentru alte elemente) title, care permite inserarea n
pagina Web a unei mici ferestre n care este descris legtura. Afiarea acestei ferestre are
loc att timp ct mouse-ul se afl deasupra zonei active.
Exemplul 12_2. Alte atribute ale elementului <area>
<img src=harta de imagini.gif
usemap=#harta1 width=600
height=500">
<map name=harta1">
<area shape=rect coords=100, 100,
200, 200 href=p2.html alt=pagina
2 title=Link catre pagina 2">
<area shape=circle coords=400,
200, 100 href=p3.html alt=pagina
3 title=Link catre pagina 3">
<area shape=poly coords=100, 300,
200, 300, 400, 400, 100,
400 href=p4.html alt=pagina 4
title=Link catre pagina 4">
</map>
</body></html>
81
Suprapunerea zonelor active
Dac dou sau mai multe zone active se suprapun, atunci are prioritate prima care este
definit n harta de imagini <map></map>.
Exemplul anterior declar n blocul <map></map> dou zone circulare concentrice,
dintre care zona de raz mai mic este inactiv. n felul acesta se creeaz o zon de forma
unei coroane circulare.
Exemplul 12_3. O zon activ de forma unei coroane circulare
Lecia 12 Hri de imagini
<html>
<head>
<head><body>
<img src=harta.gif usemap=#harta1
width=600 height=500">
<map name=harta1">
<area shape=circle
coords=300,250,100 nohref>
<area shape=circle
coords=300,250,200 href=p3.html>
<area shape=default href=p1.html>
</map>
</body></html>
Lecia 13 Lecia 13
Formulare Formulare
Interactivitatea
Interactivitatea unei pagini Web reprezint posibilitatea ca un client (utilizator) s
comunice cu un server astfel nct s obin informaia de care are nevoie.
Limbajul HTML, fiind o form particular de realizare a hipertextului, ofer posibilitatea
navigrii ntre diversele surse de informaii aflate n Internet prin intermediul legturilor.
A doua posibilitate de a realiza interactivitatea pentru o pagin Web este folosirea
formularelor (n englez forms).
Formulare
Un formular este un ansamblu de zone active alctuit din butoane de apsat, casete de
selecie, cmpuri de editare etc. O sesiune de lucru cu o pagin Web ce conine un
formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expediaz unui server.
2. O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar)
stocheaz datele ntr-o baz de date.
3. Dac este cazul serverul expediaz un rspuns utilizatorului.
Un formular este definit ntr-un bloc delimitat de etichetele corespondente <form> i
</form>.
Observaii:
l Blocurile <form> nu pot fi imbricate.
l ntr-o pagin Web pot fi create oricte formulare.
Atribute eseniale ale elementului <form>
Exist dou atribute eseniale ale elementului <form>:
1. Atributul action precizeaz ce se va ntmpla cu datele formularului o dat ce acestea
ajung la destinaie. De regul, valoarea atributului action este adresa URL a unui script
aflat pe un server WWW care primete datele formularului, efectueaz o prelucrare a lor i
expediaz ctre utilizator un rspuns. Exemplu:
<form action = htttp://www.edu.ro/cgi-bin/nume_script.cgi>.
Script-urile pot fi scrise n limbajele Perl, C sau Unix shell.
Observaie: Valoarea atributului action poate fi, de asemenea, o adres valid de e-mail, caz n care
datele formularului sunt expediate prin pot electronic pe adresa specificat. n acest caz nu are loc o
prelucrare automat a datelor din formular, citirea i interpretarea corect a datelor primite fiind
responsabilitatea destinatarului.
Exemplu:
<form action = mailto:tgugoiu@edu.ro>
2. Atributul method precizeaz metoda utilizat de browser pentru expedierea datelor
formularului. Sunt posibile urmtoarele valori:
l get (valoarea implicit). n acest caz, datele din formular sunt adugate la adresa URL
precizat de atributul action;
83
nu sunt permise cantiti mari de date (maxim 1 KB);
datele expediate se vor gsi pe serverul destinaie stocate n variabila de mediu
QUERY_STRING.
ntre adresa URL i date este inserat un ?. Datele sunt adugate conform sintaxei:
nume_camp = valoare_camp. ntre diferite seturi de date este introdus un &. Exemplu:
http://www.edu.ro/cgi-bin/nume_script.cgi?nume1 = valoare1&nume2 = valoare2;
l post. n acest caz, datele sunt expediat separat. Sunt permise cantiti mari de date
(chiar de ordinul MB).
Observaie: Datele formularului se gsesc pe dispozitivul de intrare al serverului destinaie, iar numrul
de octei transmii se afl n variabila de mediu CONTENT_LENGTH.POST.
Expedierea unui formular vid prin pota electronic
Pentru ca un formular s fie funcional, trebuie precizat ce se va ntmpla cu el dup
completare i expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin pot
electronic (e-mail). Pentru aceasta se folosete un atribut al etichetei <form>, i anume
action care primete ca valoare mailto: concatenat cu o adres valid de e-mail ctre
care se va expedia formularul completat (de exemplu tgugoiu@edu.ro).
Un formular cu un cmp de editare i un buton de expediere
Acest exemplu prezint un formular ce conine un cmp de editare i un buton de
expediere a formularului prin e-mail.
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru
a preciza tipul elementului se folosete atributul type al etichetei <input>. Pentru un cmp
de editare, acest atribut primete valoarea text.
Alte atribute importante pentru un element <input> sunt urmtoarele:
l atributul name, permite ataarea unui nume fiecrui element al formularului.
l atributul value, care permite atribuirea unei valori iniiale unui element al formularului;
Aceast valoare iniial poate fi ulterior modificat de ctre utilizator.
La expedierea formularului se transmit ctre server perechi de forma nume = valoare,
care cuprind numele elementului unui formular i valoarea acestui element.
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, dac aceast valoare a fost stabilit.
Exemplul 13_1. Un formular vid expediat prin e-mail
<h1>Un formular vid expediat prin e-
mail.</h1><hr>
Formularul nu se vede ntruct nu
contine nici un element.
<form action=mailto:tgugoiu@edu.ro
method=post>
</form>
</body></html>
Lecia 13 Formulare
84
Observaie: Dup completarea ca n figura anterioar i expedierea formularului ctre destinatar, acesta
va gsi n interiorul mesajului urmtoarele:
numele = GUGOIU+TEODORU, caracterul spaiu fiind reprezentat de +.
Pentru elementul <input> de tipul cmp de editare (type = text), alte dou atribute
pot fi utile:
l atributul size specific limea cmpului de editare; dac valoarea tastat ntr-un cmp
de editare depsete aceast lime, atunci se execut automat o derulare acestui cmp;
l atributul maxlength specific numrul maxim de caractere pe care le poate primi un
cmp de editare; caracterele tastate peste numrul maxim sunt ignorate.
Exemplul 13_2. Un formular cu un cmp de editare i un buton de expediere
<html><head>
</head>
<body>
<h1>Un formular cu un camp de editare
si un buton de expediere</h1><hr>
<form action=mailto:tgugoiu@edu.ro
method=post>
Numele:<input type=text name=numele
value=Numele si prenumele><br>
<input type=submit value=expediaza>
</form>
</body></html>
Exemplul 13_3. Un formular cu un cmp de editare particularizat
<h1>Un formular cu un camp de editare
particularizat</h1><hr>
Latimea campului de editare este de
10 caractere.<br>
Numarul maxim de caractere admise
este de 20.<br>
<form method=post
action=mailto:tgugoiu@edu.ro>
<input type=text name=numele
value=Numele si prenumele size=10
maxlength=20"><br>
<input type=submit>
</form>
</body></html>
Observaii:
l Dac atributul type lipsete ntr-un element <input>, atunci cmpul respectiv este considerat n mod
prestabilit ca fiind de tip text.
l Formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere. Datele sunt
expediate automat dup completarea cmpului i apsarea tastei ENTER.
l ntr-un formular pot exista mai multe butoane de expediere avnd atributul name configurat la valori
diferite.
HTML prin exemple
85
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 apsarea acestui buton, toate
elementele din formular primesc valorile prestabilite (definite o dat 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 afieaz textul Reset dac atributul value lipsete,
respectiv valoarea acestui atribut n caz contrar.
Exemplul 13_4. Un formular cu un buton Reset
<h1>Un formular cu un buton Reset
</h1><hr>
<form method=post
Introduceti numele:
<input type=text name=nume
value=Numele><br>
Introduceti prenumele:
<input type=text name=prenume
value=Prenumele><br>
<input type=reset value=sterge>
<input type=submit>
</form>
</body></html>
Cmp de editare de tip password
Dac se utilizeaz eticheta <input> avnd atributul type configurat la valoarea pass-
word, atunci n formular se introduce un element asemntor cu un cmp de editare
obinuit (introdus prin type = text). Toate atributele unui cmp de editare rmn valabile.
Singura deosebire const n faptul c acest cmp de editare nu afieaz caracterele n
clar, ci numai caractere *, care ascund de privirile altui utilizator aflat n apropiere valoarea
introdus ntr-un asemenea cmp.
Exemplul 13_5. Un formular cu un cmp password
<html><head>
</head><body>
<h1>Un formular cu un camp password</
h1><hr>
<form method=post
Nume:<input type=text name=nume><br>
Prenume:
<input type=text name=prenume><br>
Password:<input type=password
name=parola><br>
<input type=reset value=sterge><br>
<input type=submit value=expediaza>
</form>
</body></html>
Lecia 13 Formulare
86
La expedierea formularului ns, valoarea tastat ntr-un cmp de tip password se
transmite n clar.
Observaie: La completarea formularului ca n figura anterioar i la completarea cmpului de tip
password cu mishu, destinatarul va primi un mesaj avnd urmtorul coninut:
nume = Ionescu&prenume = Mihai+Valentin&parola = mishu.
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante dintre mai
multe posibile.
Butoanele radio se introduc prin eticheta <input> cu atributul type avnd valoarea radio.
Observaii:
l Toate butoanele ce aparin unei familii de butoane radio au acelai nume, stabilit prin atributul name.
l Atributul value primete ca valoare un text care va fi expediat serverului mpreun cu numele familiei
de butoane.
l Atributul checked (fr alte valori) permite selecia prestabilit a unui buton dintr-o familie de butoane
radio. Pentru o aceeai familie de butoane radio poate fi folosit cel mult un atribut checked.
La expedierea formularului se va transmite una dintre perechile sex = b sau sex = f,
n funcie de alegerea fcut de utilizator.
Casete de validare
O caset de validare (checkbox) permite selectarea sau deselectarea unei opiuni.
Pentru inserarea unei casete de validare se utilizeaz eticheta <input> cu atributul type
configurat la valoarea checkbox.
Observaii:
l Fiecare caset poate avea un nume definit prin atributul name.
l Fiecare caset poate avea valoarea prestabilit selectat definit prin atributul checked (nu sunt
necesare alte valori).
l Fiecare caset poate avea configurat atributul value cu valoarea care va fi inclus n perechea
name = value ce va fi expediat odat cu formularul. Dac acest atribut lipsete, atunci se va expedia
perechea name = on. Casetele care sunt deselectate nu trimit ctre server perechi name = value.
Exemplul 13_6. Un formular cu butoane radio
<h1>Un formular cu butoane radio</h1><hr>
<form method=post
Alegeti sexul:<br>
Barbatesc<input type=radio
name=sex value=b>
Femeiesc<input type=radio
name=sex value=f><br>
<input type=reset>
<input type=submit>
</form>
</body></html>
HTML prin exemple
87
Casete de fiiere
ntr-o pereche name = value a unui formular se poate folosi ntregul coninut al unui
fiier pe post de valoare.
Pentru aceasta se insereaz un element <input> ntr-un formular, cu atributul type
avnd valoarea file (fiier).
Alte trei atribute sunt utile pentru un element de tip caset de fiiere:
l atributul name permite ataarea unui nume; acest nume va aprea n perechea name =
value expediat serverului;
l atributul value primete ca valoare adresa URL a fiierului care va fi expediat o dat cu
formularul. Aceast valoare poate fi atribuit direct atributului value, poate fi tastat
ntr-un cmp de editare ce apare o dat cu formularul sau poate fi selectat prin
intermediul unei casete de tip File Upload sau Choose File care apare la apsarea
butonului Browse din formular;
l atributul enctype precizeaz metoda utilizat la criptarea fiierului de expediat. Valoarea
acestui atribut este multipart/form-data.
Exemplul 13_7. Un formular cu casete checkbox
<h1>Un formular cu casete checkbox
</h1><hr>
<form method=post
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>
<input type=reset>
<input type=submit>
</form>
</body></html>
Exemplul 13_8. Un formular cu caset de fiiere.
<h1>Un formular cu caseta file
</h1><hr>
<form method=post
Alegeti fisierul:
<input type=file name=fisier
value=c:\html\p2.html
enctype=multipart/form-data><br>
<input type=reset>
<input type=submit>
</form>
</body></html>
Lecia 13 Formulare
88
Imagini
In lecia 12 am discutat despre hrile de imagini. n acest paragraf vom studia un alt
mod de a utiliza o imagine pe post de hart (un clic pe diferite zone ale ei va determina
diferite aciuni).
Pentru aceasta, utilizm eticheta <input> avnd atributul type configurat la valoarea
image. Urmtoarele atribute sunt utile cnd se include acest element ntr-un formular:
l atributul src primete ca valoare adresa URL a imaginii care va fi folosit pe post de
hart;
l atributul name primete ca valoare un nume ce va fi folosit la expedierea datelor ctre
server;
l atributul align este folosit pentru alinierea imaginii n cadrul paginii Web; el primete
aceleai valori i cu aceleai semnificaii ca acelea utilizate la alinierea unei imagini.
Harta de imagini este de tip server i funcioneaz n felul urmtor:
l Utilizatorul efectueaz clic ntr-o anumit zon pe suprafaa imaginii.
l Imediat sunt trimise date ctre serverul de pagini Web la care utilizatorul este conectat.
Aceste date sunt de forma nume.x = valoare_x i nume.y = valoare_y, unde nume este
valoarea atributului name, iar valoare_x i valoare_y reprezint coordonatele n pixeli ale
punctului n care s-a executat clic pe imagine, fa de colul din stnga-sus al imaginii.
l O aplicaie dedicat de pe server analizeaz aceste date i, n funcie de coordonatele x
i y ale punctului n care utilizatorul a efectuat clic pe imagine, se ncarc diferite pagini
Web.
Observaie: Harta de imagini menionat anterior este de tip server deoarece deciziile privind paginile
care se vor ncrca sunt luate de o aplicaie aflat pe server.
Observaii:
l n exemplul de mai sus lipsesc butoanele Reset i Submit Query, ntruct formularul cu date este
expediat ctre server ori de cte ori utilizatorul efectueaz clic cu mouse-ul pe imagine. n acest fel, o
imagine poate fi folosit pe post de buton de expediere a formularului.
l Exemplul anterior este numai pe jumtate funcional. La efectuarea unui clic pe imagine, datele sunt
incluse ntr-un mesaj e-mail i expediate la adresa menionat n formular. n realitate, datele sunt
expediate ctre server n alt format (nu prin e-mail), sunt analizate imediat de o aplicaie aflat pe server
(un script CGI) care formuleaz i trimite un rspuns utilizatorului. Configurarea serverului i scrierea
unei asemenea aplicaii depesc scopurile acestei cri.
l O serie de atribute ale elementul <img> (de exemplu align) sunt aplicabile i n cazul elementului
<input image>.
Exemplul 13_9. Un formular cu o hart de imagini de tip server
<html><head>
</head><body>
<h1>Un formular cu o harta de imagini
de tip server</h1><hr>
<form method=post
<input type=image src=harta de
imagine.gif>
</form>
</body></html>
HTML prin exemple
89
Butoane
ntr-un formular pot fi afiate butoane. Cnd utilizatorul apas un buton, se lanseaz n
execuie o funcie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor
astfel de funcii (acest lucru este posibil dac se utilizeaz limbajele JavaScript sau Java).
Pentru a insera un buton ntr-un formular, se utilizeaz eticheta <input> avnd atributul
type configurat la valoarea button. Alte dou atribute utile ale elementului button sunt:
l atributul name, care permite ataarea unui nume butonului;
l atributul value, care primete ca valoare textul ce va fi afiat pe buton.
Exemplul 13_10. Un formular cu un buton de apsat
<h1>Un formular cu un buton de
apasat</h1><hr>
<form action=mailto:tgugoiu@edu.ro>
Acesta este un buton:
<input type=button name=butonul1
value=apasa aici><br>
</form>
</body></html>
Observaii: La apsarea butonului din exemplul anterior, nu se execut nimic ntruct n pagina HTML
nu exist un script JavaScript care s trateze evenimentul de apsare a butonului. Scrierea unui astfel de
script depete scopurile acestei cri.
Elementul hidden
Un element hidden este un cmp ascuns ntr-un formular, n sensul c valoarea lui nu
va fi afiat n pagina Web.
Elementul hidden este inserat n formular cu ajutorul etichetei <input>, al crui atribut
type primete valoarea hidden. Un atribut esenial al unui element de tip hidden este
value. Valoarea acestui atribut poate fi stabilit la crearea elementului sau de ctre un
script JavaScript sau un appplet Java.
La expedierea formularului se transmite ctre server perechea nume_camp_hidden =
valoare, unde nume_camp_hidden este valoarea dat atributului name, iar valoare este
valoarea atributului value.
Exemplul 13_11. Elementul hidden
<html><head><title>Elementul hidden</title></head><body>
<h1>Un formular cu un camp hidden</h1><hr>
<input type=hidden name=secret value=10000$><br>
</form>
</body></html>
Liste de selecie
O list de selecie permite utilizatorului s aleag unul sau mai multe elemente dintr-o
list finit.
Lecia 13 Formulare
90
Lista de selecie este inclus n formular cu ajutorul etichetelor corespondente <select>
i </select>.
O list de selecie poate avea urmtoarele atribute:
l atributul name, care ataeaz listei un nume (utilizat n perechile name = value
expediate server-ului);
l atributul size, care precizeaz (printr-un numr ntreg pozitiv, valoarea prestabilit fiind
1) cte elemente din list sunt vizibile la un moment dat pe ecran (celelalte devenind
vizibile prin acionarea barei de derulare ataate automat listei).
Observaie: n mod prestabilit, un singur element din list poate fi selectat la un moment dat. Listele ce
permit selecii multiple sunt prezentate n paragraful urmtor.
Elementele unei liste de selecie sunt incluse n list cu ajutorul etichetei <option>.
Dou atribute ale etichetei <option> se dovedesc utile:
l atributul value primete ca valoare un text care va fi expediat server-ului n perechea
name = value; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce
urmeaz dup <option>;
l atributul selected (fr alte valori) permite selectarea prestabilit a unui element al listei.
Exemplul 13_12. Un formular cu o list de selecie.
<h1>Un formular cu o lista de
selectie</h1><hr>
<form method=post
Universitatea absolvita:<br>
<select name=universitate size=3">
<option value=B> Universitatea din
Bucuresti
<option value =CL selected>
Universitatea din Cluj
<option value=TM> Universitatea din
Timisoara
<option value=IS> Universitatea din
Iasi
</select><br><br>
<input type=reset>
<input type=submit>
</form>
</body></html>
List de selecie cu selecii multiple
n mod prestabilit, o list de selecie permite selectarea unui singur element din list la
un moment dat. La expedierea formularului, o singur pereche name = value va fi
expediat serverului.
Exist posibilitatea definirii unei liste de selecie care s permit selectarea la un
moment dat a mai multor elemente.
O list de selecie ce permite selecii multiple se creeaz ntocmai ca o list de selecie
obinuit. n plus, eticheta <select> are un atribut multiple (fr alte valori). Cnd
HTML prin exemple
91
Cmpuri de editare multilinie
ntr-un formular pot fi incluse i cmpuri de editare multilinie. Acest lucru se face cu
ajutorul etichetei <textarea>. Pentru a particulariza un cmp de editare multilinie, se
folosesc urmtoarele atribute:
l atributul cols, care specific numrul de caractere afiate ntr-o linie;
l atributul rows, care specific numrul de linii afiate simultan;
l atributul name, care permite ataarea unui nume cmpului de editare multilinie;
l atributul wrap (de la word wrap = trecerea cuvintelor pe rndul urmtor), care
determin comportamentul cmpului de editare fa de sfritul de linie. Acest atribut
poate primi urmtoarele valori:
a) off; n acest caz:
l ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd
dorete utilizatorul;
l caracterul de sfrit de linie este inclus n textul transmis serverului o dat cu
formularul;
b) hard; n acest caz:
l se produce ntreruperea cuvintelor la marginea dreapt a editorului;
l caracterul de sfrit de linie este inclus n textul transmis serverului o dat cu
formularul;
c) soft; n acest caz:
l se produce ntreruperea cuvintelor la marginea dreapt a editorului;
l nu se include caracterul de sfrit de linie n textul transmis serverului o dat cu
formularul.
formularul este expediat ctre server pentru fiecare element selectat al listei care este se
insereaz cte o pereche name = value unde name este numele listei.
Exemplul 13_13. Un formular cu o list de selectie ce accept selecii multiple
<h1>Un formular cu o lista de selectie
ce accepta selectii multiple</h1><hr>
Limbi straine cunoscute:<br>
<select name=limbi straine size=4">
<option value=e selected> Engleza
<option value =f>Franceza
<option value=g>Germana
<option value=s>Spaniola
<option value=i>Italiana
<option value=r>Rusa
</select><br><br>
<input type=reset>
<input type=submit>
</form>
</body></html>
Lecia 13 Formulare
92
Un formular complex
n exemplul urmtor este prezentat un formular coninnd elemente prezentate ante-
rior. Cmpurile formularului sunt incluse n celulele unui tabel pentru a obine alinierea
dorit.
Exemplul 13_14. Un formular cu un cmp de editare multilinie
<h1>Un formular cu un cmp de editare
multilinie</h1><hr>
<form method=post
<textarea name=text multilinie
cols=30 rows=5 wrap=off>
Prima linie din textul initial
Adoua linie din textul initial
</textarea>
<input type=reset>
<input type=submit>
</form>
</body></html>
HTML prin exemple
Exemplul 13_15. Un formular complex
<h1>Un formular complex</h1><hr>
<center><table bgcolor=yellow><form method=post
<caption align=top>MENIU</caption>
<tr align=left><th>Numele:<td><input type=text name=numele>
<tr align=left><th>Prenumele:<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 sucul:<td>
<input type=checkbox name=fanta>fanta
<input type=checkbox name=pepsi>pepsi
<input type=checkbox name=nectar>nectar
<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=expediaza>
</form></table></center>
</body></html>
93
Blocuri button
Un buton pentru lansarea n execuie a unei aciuni poate fi introdus ntr-un formular
prin elementul <input> avnd atributul type configurat la valoarea button, aa cum s-a
vzut mai nainte.
Exist o a doua modalitate de a introduce ntr-o pagin Web un buton de apsat, i
anume prin intermediul blocului <button></button>.
Un astfel de buton poate fi inserat ntr-un formular, n acest caz declannd aciuni
legate de acel formular, sau poate fi introdus oriunde n pagin pentru iniierea unor
aciuni independente de formulare.
Atributele posibile ale elementului button sunt:
l name acord elementului un nume;
l value precizeaz textul care va fi afiat pe buton;
l type precizeaz aciunea ce se va executa la apsarea butonului dac acesta este inclus
ntr-un formular. Valorile posibile pentru acest atribut sunt:
button;
submit;
reset.
Observaie: n corpul blocului <button></button> se poate afla un text sau un marcaj de inserare a
unei imagini.
Lecia 13 Formulare
94
Observaii finale
1. Elementul <form> poate avea un atribut target, care primete ca valoare numele unei
ferestre a browserului n care va fi ncrcat rspunsul trimis de serverul WWW la
expedierea unui formular.
2. Toate elementele cuprinse ntr-un formular pot avea un atribut disabled care permite
dezactivarea respectivului element.
3. Toate elementele de tip text cuprinse ntr-un formular pot avea un atribut read only
care interzice modificarea coninutului acestor elemente.
Exemplul 13_16. Blocul button
<h1>Blocul button</h1><hr>
Un buton simplu:<br>
<button name=butonul1">Apasa aici
</button><br>
<div style=background-color:yellow;>
<form method=post
Numele:<input type=text
name=numele><br>
Prenumele:<input type=text
name=prenumele><br>
<button name=butonul2 type=submit>
<img src=Image20.gif width=100">
</button>
</form></div>
</body></html>
HTML prin exemple
Lecia 14 Lecia 14
Cadre Cadre
Cadre sau subferestre
Pn n acest moment, n fereastra browserului era ncrcat un singur document HTML.
Cadrele ne permit s definim n fereastra browserului subferestre n care s fie ncrcate
documente HTML diferite.
Cadrele sunt definite ntr-un fiier 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
primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel frame.
Definirea cadrelor se face din aproape n aproape, prin mprirea ferestrelor (i a
subferestrelor) n linii i coloane:
l mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul
atributului cols al etichetei <frameset> ce descrie acea fereastr;
l mprirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul
atributului rows al etichetei <frameset> ce descrie acea fereastr;
l valoarea atributelor cols i rows este o list de elemente (pentru fiecare subfereastr cte
un element) separate prin virgul, care descriu modul n care se face mprirea.
Elementele listei pot fi:
a) un numr ntreg de pixeli;
b) procente din dimensiunea ferestrei (numr ntre 1 i 99 terminat cu %);
c) n*, care nseamn n pri din spaiul rmas.
Observaie: Dac mai multe elemente din list sunt configurate cu *, atunci spaiul disponibil rmas
pentru ele se va mpri n mod egal.
Exemplu 1: 200, *, 50%, * nseamn o mprire n 4 subferestre, dintre care prima are
200 de pixeli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup
n mod egal restul de spaiu rmas disponibil.
Exemplu 2: 200, 1*, 50%, 2* nseamn o mprire n 4 subferestre, dintre care prima are
200 de pixeli, a treia ocup jumtate din spaiul total disponibil, a doua i a patra folosesc
restul de spaiu rmas disponibil, care se mparte n trei pri egale, a doua fereastr
ocupnd o parte, iar a patra fereastr 2 pri.
Observaie: O subfereastr poate fi un cadru (folosind <frame>) n care se va ncrca un document
HTML sau poate fi mprit la rndul ei n alte subferestre (folosind <frameset>).
Exemplul 14_1. O pagin Web cu dou cadre verticale egale
</title></head>
<frameset cols=*,*>
<frame src=p1.html>
<frame src=p2.html>
</frameset>
</html>
96
Observaie: Exemplul anterior presupune c n prealabil au fost create dou fiiere HTML numite
p1.html i p2.html i c acestea se afl n directorul curent de lucru.
n exemplul urmtor este creat o pagin Web cu trei cadre orizontale. Pentru al doilea
cadru valoarea atributului src este adresa URL a unei imagini.
Exemplul 14_2. O pagin Web cu trei cadre orizontale
<html>
<head>
</head>
<frameset rows=100,*,10%>
<frame src=p1.html>
<frame src=cnmv.jpg>
<frame src=p3.html>
</frameset>
</html>
n exemplul urmtor este creat o matrice de 4cadre (2 x 2). Pentru a realiza acest
lucru, se folosesc simultan cele dou atribute cols i rows.
Exemplul 14_3. O matrice de 2 x 2 cadre.
<html>
<head>
</head>
<frameset rows=*,* cols=*,*>
<frame src=p1.html>
<frame src=p2.html>
<frame src=p3.html>
<frame src=p4.html>
</frameset>
</html>
n exemplul 14_4 este creat o pagin Web cu trei cadre mixte. Pentru a o crea, se
procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou subferestre
de tip coloan, dup care a doua subfereastr este mprit n dou subferestre de tip
linie.
n exemplul 14_5 pagina Web este construit cu ajutorul a dou fiiere HTML n care
sunt configurate cadrele:
HTML prin exemple
97
Culori pentru chenarele cadrelor
Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor.
Acest atribut primete ca valoare un nume de culoare sau o culoare definit n confor-
mitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataat att etichetei
<frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, ct i etichetei
<frame> pentru a stabili culoarea chenarului pentru un cadru individual.
Exemplul 14_4. O pagin Web cu trei cadre mixte
</title></head>
<frameset cols=20%,*>
<frame src=p1.html>
<frameset rows=*,*>
<frame src=p2.html>
<frame src=p3.html>
</frameset>
</frameset>
</html>
Exemplul 14_6. O pagin Web cu trei cadre mixte avnd chenare colorate
</title></head>
<frameset cols=20%,* bordercolor=red>
<frame src=p1.html>
<frameset rows=*,*>
<frame src=p2.html bordercolor=green>
<frame src=p3.html>
</frameset>
</frameset>
</html>
Exemplul 14_5. O pagin Web complex
</title></head>
<frameset cols=20%,*>
<frame src=p1.html>
<frame src=frame.html>
</frameset>
</html>
<html><head><title>Fisierul
frame.html</title></head>
<frameset rows=*,*>
<frame src=p2.html>
<frame src=p3.html>
</frameset>
</html>
Lecia 14 Cadre
98
Dimensionarea chenarului unui cadru
Atributul border al etichetei <frameset> permite configurarea limii chenarelor tuturor
cadrelor incluse la un numr dorit de pixeli.
Observaii:
l Valoarea prestabilit a atributului border este de 5 pixeli.
l O valoare de 0 pixeli va defini un cadru fr chenar.
Exemplul 14_7. Cadre cu chenare late
</title></head>
<frameset cols=20%,* border=20">
<frame src=p1.html>
<frameset rows=*,*>
<frame src=p2.html>
<frame src=p3.html>
</frameset>
</frameset>
</html>
n exemplul urmtor se utilizeaz border = 0 pentru a obine cadre fr chenar.
Exemplul 14_8. Cadre fr chenar
</title></head>
<frameset cols=20%,* border=0">
<frame src=p1.html>
<frameset rows=*,*>
<frame src=p2.html>
<frame src=p3.html>
</frameset>
</frameset>
</html>
Chenare invizibile
n mod prestabilit, chenarul unui cadru este afiat i are un aspect tridimensional.
Afiarea chenarului unui cadru poate fi dezactivat dac se utilizeaz atributul
frameborder cu valoarea no. Acest atribut poate fi ataat att etichetei <frameset>
(dezactivarea fiind valabil pentru toate cadrele incluse) ct i etichetei <frame>
(dezactivarea fiind valabil numai pentru un singur cadru).
Observaie: Valorile posibile ale atributului frameborder sunt:
l yes echivalent cu 1;
l no echivalent cu 0.
HTML prin exemple
99
Bare de defilare
Atributul scrolling al etichetei <frame> este utilizat pentru a aduga unui cadru o bar
de derulare care permite navigarea n interiorul documentului afiat n interiorul cadrului.
l yes barele de derulare sunt adugate ntotdeauna;
l no barele de derulare nu sunt utilizabile;
l auto barele de derulare sunt vizibile atunci cnd este necesar.
Exemplul 14_9. Cadre cu chenare invizibile
</title></head>
<frameset cols=20%,
* frameborder=no>
<frame src=p1.html>
<frameset rows=*,*>
<frame src=p2.html>
<frame src=p3.html>
</frameset>
</frameset>
</html>
Exemplul 14_10. Bare de derulare
</title></head>
<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>
Poziionarea documentului ntr-un cadru
Atributele marginheight i marginwidth ale etichetei <frame> permit stabilirea distanei
n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale
cadrului (vezi exemplul 14_11).
l numr de pixeli;
l procent din limea, respectiv din nlimea cadrului.
Chenare fixe
Atributul noresize al etichetei <frame> (fr nici o valoare suplimentar), dac este
prezent, inhib posibilitatea prestabilit a utilizatorului de a redimensiona cadrul cu
ajutorul mouse-ului.
Lecia 14 Cadre
100
Browsere vechi
Pentru browsere vechi care nu accept cadre exist posibilitatea ca n pagina Web s
apar un avertisment care invit utilizatorul s instaleze o versiune mai recent a
browserului.
Pentru aceasta se utilizeaz eticheta <noframes> n interiorul blocului <frameset>.
Exemplul 14_11. Poziionarea documentului ntr-un cadru
</title></head>
<frameset cols=*,*,*>
<frame src=p.html>
<frame src=p.html marginheight=20>
<frame src=p.html marginwidth=20>
</frameset>
</html>
Cadre in-line
Un cadru in-line se insereaz ntr-o pagin Web n mod asemntor cu o imagine. Pentru
a insera un cadru in-line, utilizm blocul <iframe></iframe> (vezi exemplul 14_13).
Atributele acceptate de eticheta <iframe> sunt n parte preluate de la etichetele
<frame> i <frameset>, cum ar fi:
l src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling,
name, noresize;
sau de la eticheta <img>:
l vspace, hspace, align, width, height.
inte pentru legturi
n mod prestabilit, la efectuarea unui clic pe o legtur noua pagin (ctre care indic
legtura) o nlocuiete pe cea curent n aceeai fereastr (acelai cadru).
HTML prin exemple
Exemplul 14_12. Browsere vechi
</title></head>
<frameset cols=*,*>
<frame src=p1.html>
<frameset rows=*,*>
<frame src=p2.html>
<frame src=p3.html>
</frameset>
<noframes><body>
<p>Aceasta pagina contine cadre.
<p>Pentru o varianta fara cadre a
acestei pagini vizitati:
<a href=pff.html>Pagina fara
cadre</a>
</body></frameset>
</html>
101
Acest comportament poate fi schimbat n dou moduri:
l prin plasarea n blocul <head></head> a unui element <base> care precizeaz, prin
atributul target numele ferestrei (cadrului) n care se vor ncrca toate paginile noi
referite de legturile din pagina curent conform sintaxei:
<base target = nume_fereastra/frame_de_baza>;
l prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei
(cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei:
<a href = legatura target = nume_fereastra/frame></a>.
<html><head><title>frameset.html</
title>
<frameset cols=25%, *>
<frameset rows=*, *>
<frame src=cuprins.html name=cuprins>
<frame src=exemple.html name=exemple>
</frameset>
<frame src=teorie.html name=teorie>
</frameset>
</html>
Exemplul 14_14. inte pentru legturi
<html><head>
<title>cuprins.html</title>
</head><body>
<h3>Cuprins</h3>
<a href=e1.html target=exemple>1.
Prima pagina</a><br>
Culori si fonturi</a><br>
Stilul caracterelor</a><br>
</body></html>
<html><head>
<title>e1.html</title>
</head>
<body>
<h3>Exemplele lectiei 1</h3>
<a href=t1_1.html target=teorie>1.
Prima pagina</a><br>
O pagina html standard</a><br>
Titlul unei pagini web</a><br>
</body>
</html>
Lecia 14 Cadre
Exemplul 14_13. Cadru in-line
<a href=p1.html target=ilf>Pagina
1</a><br>
1</a><br>
1</a>
<center><iframe width=60% border=2
bordercolor=red name=ilf
src=p.html>
Daca vedeti acest text inseamna ca
browserul dumneavoastra nu suporta
frame-uri in-line.
<a href=pffil.html>Pagina fara
frame-uri in-line</a>
</iframe></center></body></html>
102
Observaii: Dac este prezent att un atribut target n <base> ct 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 14_14 este prezentat o pagin Web cu trei cadre. Toate legturile din
cadrul 1 ncarc paginile n cadrul 2. Toate legturile din cadrul 2 ncarc paginile n
cadrul 3.
Valori magice pentru atributul target
Atributul target al etichetei <frame> accept anumite valori predefinite de o valoare
deosebit pentru creatorii de pagini Web. Iat aceste valori i semnificaia lor special:
l _self (ncrcarea noii pagini are loc n cadrul curent);
l _blank (ncrcarea noii pagini are loc ntr-o fereastr nou anonim);
l _parent (ncrcarea noii pagini are loc n cadrul printe al cadrului curent, dac acesta
exist, altfel are loc n fereastra browserului curent);
l _top (ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent).
HTML prin exemple
Lecia 15 Lecia 15
Stiluri Stiluri
Ce este un stil ?
Stilurile pun la dispoziia creatorilor de site-uri noi posibiliti de personalizare a
paginilor Web.
Un stil reprezint un mod de a scrie un bloc de text (adic anumite valori pentru font,
mrime, culoare, aliniere, distane fa de margini etc).
Exist dou modaliti de a defini un stil:
l sintaxa CSS (Cascading Style Sheets);
l sintaxa JavaScript.
ntruct sintaxa JavaScript presupune cunoasterea limbajului JavaScript, n aceast carte
vom utiliza exclusiv sintaxa CSS pentru definirea i utilizarea stilurilor.
Sintaxa CSS este sintaxa predefinit de utilizare a stilurilor, dar este bine s informm
browserul clientului asupra sintaxei folosite, printr-o metainformaie de genul:
<meta http-equiv = content-style-type content = text/css>
plasat n blocul <head></head> al documentului .html.
CSS, acronimul pentru Cascading Style Sheets, nseamn foi n stilul cascad.
Semnificaia acestei expresii va deveni evident n curnd.
Utilizarea unui stil presupune dou etape:
l definirea stilului;
l specificarea domeniului n care se va utiliza acest stil.
n acest capitol vom prezenta modurile n care se poate defini un stil.
Stiluri dedicate
Stilurile dedicate se aplic numai blocurilor de text pentru care sunt definite.
S presupunem c n cadrul unei pagini Web dorim ca toate titlurile de mrimea 1 s fie
de culoare roie i centrate. Pentru aceasta, procedm n felul urmtor:
n blocul <head></head> inserm un bloc <style></style> avnd urmtorul
coninut:
<style>
h1 {text-align:center; color:red;}
</style>
Atunci toate titlurile care apar n fiierul HTML ca fiind de mrimea 1 vor fi de culoarea
roie i centrate (vezi exemplul 15_1).
Observaii:
l ntr-un bloc <style></style> se introduc reguli. O regul este format dintr-un selector i o descriere.
l Un selector specific domeniul de utilizare a stilului. n exemplul anterior, selectorul este h1, care
precizeaz c stilul care urmeaz se va aplica numai elementelor de tip h1 din document.
l O descriere definete stilul utilizat. Descrierea stilului este cuprins ntre acolade {}. Stilul este definit
prin intermediul expresiilor de forma atribut: valoare, separate prin punct i virgul. Atributele posibile
i valorile lor vor fi detaliate n leciile urmtoare. n exemplul anterior, atributele utilizate sunt text-
align i color, care au valorile center, respectiv red.
104
Observaie: Dac dorim ca acelai stil s fie utilizat de ctre mai multe elemente (de exemplu h1, h2
i p) atunci se utilizeaz pe post de selector o list a acestor elemente, separate prin virgul (de
exemplu h1, h2, p).
Exemplul 15_1. Stiluri dedicate
</title>
<style>
h1 {text-align:center; color:red;}
</style>
</head><body>
<h1>Acest header de marimea 1 este de
culoare rosie si este centrat</h1>
Linia 1
<h2>Header de marimea 2 normal</h2>
Linia 2
<h1>Alt header rosu si centrat</h1>
Linia 3
</body></html>
Clase de stiluri
Clasele de stiluri permit definirea unui stil general i folosirea lui oriunde este necesar.
S definim un stil pentru scrierea blocurilor de text cu culoare roie i alinierea textului
n centrul paginii Web (vezi exemplul 15_3).
Pentru a efectua acest lucru, procedm astfel:
1. Definim o clas de stiluri rc (rou i centrat) n interiorul blocului <style></style>,
aflat la rndul lui n blocul <head></head>:
<style>
/*se defineste stilul rc ca fiind rosu si centrat*/
all.rc {text-align:center; color:red;}
</style>
2. Dac dorim ca un titlu de mrimea 2 s foloseasc clasa de stiluri rc, atunci scriem:
<h2 class = rc>Acesta este un header de marimea 2 rosu si centrat </h2>
Observaie:
l all aflat n faa clasei de stiluri rc indic faptul c aceast clas este aplicabil tuturor blocurilor de
text, atunci cnd acest lucru este necesar. Folosirea lui este opional.
l La utilizarea clasei de stiluri n cadrul unui element, se folosete atributul class avnd ca valoare
numele clasei de stil. Acesta este un atribut universal, adic este aplicabil tuturor elementelor.
HTML prin exemple
Exemplul 15_2. Gruparea selectorilor
</title>
<style>
h1, h2, p {text-align:center; color:red;}
</style>
</head><body>
<h1>Header 1 rosu si centrat</h1>
Linia 1
<h2>Header 2 rosu si centrat</h2>
Linia 3
<p>Paragraf rosu si centrat</h1>
</body></html>
105
Observaii:
l n interiorul unui bloc <style></style>, comentariile sunt blocuri delimitate de /* i */ (ca n C, C++,
JavaScript i Java).
Observaie: Dac dorim ca o clas de stiluri s fie aplicabil numai pentru anumite elemente ale
documentului (de exemplu p), atunci n construcia selectorului va aprea acest element (de exemplu
p.rc).
Stiluri identificate
Toate elementele unui document admit un atribut universal numit id. Acest atribut
nlocuiete un atribut mai vechi name i are rolul de a identifica n mod unic un element n
cadrul unui document.
Atributul id poate identifica stilul utilizat de un element.
Pentru a utiliza un stil identificat, procedai astfel:
1. n blocul <style></style>, introducei definiia stilului conform sintaxei:
<style>
#rosu {color: red;}
</style>
Lecia 15 Stiluri
Exemplul 15_3. O clas de stiluri
</title>
<style>
/*se defineste stilul rc ca fiind
rosu si centrat*/
</style></head><body>
<h1>Acesta este un header de marimea 1
normal</h1>
Linia 1
<h2 class=rc>Header de marimea 2 rosu
si centrat</h2>
Linia 2
<h3>Alt header rosu si centrat</h3>
<p class=rc>Paragraf rosu si centrat
</body></html>
Exemplul 15_4. Clas de stiluri dedicat
</title>
<style>
/*se defineste clasa dedicata rc ca
fiind rosu si centrat*/
p.rc {text-align:center; color:red;}
<p>Acesta este un paragraf normal</
h1>
Linia 1
<p class=rc>Acesta este un paragraf
rosu si centrat</h2>
Linia 2
</body></html>
106
Observaie: Dac dorim ca un stil identificat s fie aplicabil numai pentru anumite elemente ale docu-
mentului (de exemplu h2), atunci n construcia selectorului va aprea acest element (de exemplu h2#rc).
2. n elementul n care se dorete utilizarea local a acestui stil, folosii atributul id, care
primete ca valoare numele stilului definit anterior.
Stiluri contextuale
Stilurile contextuale se aplic numai ntr-un anumit context.
De exemplu, pentru ca toate blocurile de text cursiv dintr-un bloc de text de tip
paragraf s fie de culoare roie, se utilizeaz urmtoarea definiie de stil contextual:
<style>
P I {color: red;}
</style>
Exemplul 15_6. Stil identificat dedicat
</title><style>
/*se defineste stilul identificat
dedicat rc ca fiind rosu si centrat*/
h2#rc {text-align:center; color:red;}
<h2>Acesta este un header de marimea
2 normal</h1>
Linia 1
<h2 id=rc>Header de marimea 2 rosu si
centrat</h2>
Linia 2
</body></html>
HTML prin exemple
Exemplul 15_5. Stiluri identificate
</title><style>
/*se defineste clasa de stil rc ca
/*se defineste un stil dedicat*/
h3 {text-align:right;}
/*se defineste un stil identificat
verde*/
#VERDE {color: green;}
<h1 class=rc>Clasa de stil rc</h1>
Linia 1
<h2 class=rc id=VERDE> Clasa de stil
rc si stilul local VERDE</h2>
Linia 2
<h3>Stil dedicat</h3>
<h3 id=VERDE> Stil dedicat si stilul
localVERDE</h3>
</body></html>
107
Stiluri in-line
Stilurile in-line sunt definite chiar n eticheta ce iniiaz 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 .
Observaii:
l P indic un bloc de text de tip paragraf <p></p>. Se poate folosi p sau P.
l I indic un bloc de text cursiv (italic) <i></i>. Se poate folosi i sau I.
l Succesiunea P I indic un bloc cursiv coninut ntr-un bloc paragraf.
Exemplul 15_7. Stiluri contextuale
</title>
<style>
P I {color: red;}
</style>
</head><body>
<p>Paragraf fara blocuri in italic.
<p>Paragraf cu un bloc <I>italic</I>
inclus.
</body></html>
Blocuri pentru stilurile in-line
Dac dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem
acest text ntr-un bloc cu ajutorul delimitatorilor <span> i </span>, dup care utilizm
atributul style pentru eticheta <span> (vezi exemlul 15_9).
Stiluri definite n fiiere externe
Stilurile definite n interiorul unui bloc <style></style> pot fi transferate ntr-un fiier
extern, existnd astfel posibilitatea utilizrii lor n mai multe fiiere HTML.
Pentru a utiliza un stil definit ntr-un fiier extern se procedeaz astfel:
1. Se creeaz un fiier care s conin numai descrierea stilurilor i se salveaz cu extensia
.css sau .html (de exemplu stiluri.css). Coninutul acestui fiier coincide cu coninutul unui
bloc <style></style>, fr ca aceti delimitatori s fie inclui.
Exemplul 15_8. Stiluri in-line
<html><head><title>Exemplul 15_8</
title><body>
<h2>Header de marimea 2 normal</h2>
Linia 1
<h2 style=color: red; text-align:
center;>Acest header de marimea 2 este
de culoare rosie si este centrat</h1>
Linia 2
<p style=color: #0000ff>Paragraf de
culoare albastra</p>
Linia 3
</body></html>
Lecia 15 Stiluri
108
2. n fiierul HTML care utilizeaz stilurile definite n fiierul creat la punctul 1, se include
n blocul <head></head> o etichet <link> avnd trei atribute:
l atributul rel cu valoarea stylesheet;
l atributul href avnd ca valoare adresa URL a fiierului creat la punctul 1; dac acest
fiier se afl n directorul curent, atunci putem avea, de exemplu, href = stiluri.css;
l atributul type cu valoarea text/css.
3. Se utilizeaz tilurile definite n fiierul extern ca i cum ar fi definite n fiierul HTML
curent ntr-un bloc <style></style>.
Exemplul urmtor este echivalent ca efect cu Exemplul 15_3.
Exemplul 15_9. Blocuri span
</title><body>
<p>Acesta este un paragraf care
contine o propozitie de culoare
verde.<br>
<span style=color: green;>Aceasta
este propozitia de culoare verde.</
span><br>
Aici se termina paragraful.</p>
<h1>negru <span style=color: red;>
rosu</span> <span style=color:
blue;> albastru </span> negru</h1>
</body></html>
Exemplul 15_10. Stiluri definite n fiiere externe
Fiierul stiluri.css Fiierul e15_10.html
/*Acesta este continutul fisierului
stiluri.html*/
/*se defineste clasa de stil rc ca
/*se defineste stilul dedicat DREAPTA*/
h3 {text-align:right;}
/*se defineste stilul local ca fiind
verde*/
#VERDE {color: green;}
/*Aici se termina fisierul
stiluri.html*/
<html>
<head>
<link rel=stylesheet type=text/
css href=stiluri.html>
</head><body>
Linia 1
<h2 class=rc id=VERDE>Clasa de stil
rc si stilul local VERDE</h2>
Linia 2
<h3 id=VERDE>Stil dedicat si stilul
localVERDE</h3>
</body></html>
Observaie: Un fiier extern care conine descrierea stilurilor poate fi importat dac n interiorul blocului
<style></style> se insereaz o linie de forma:
@import url(stiluri.css)
Fiierul e15_10 poate fi rescris astfel:
HTML prin exemple
109
Stiluri pentru diferite medii
Este cunoscut faptul c un text afiat pe monitor cu culoarea galben se vede foarte
slab cnd este tiprit la o imprimant alb-negru. Aceast deficien poate fi corectat dac
se utilizeaz stiluri potrivite pentru fiecare mediu. Mediul pentru care este valabil un stil
este specificat prin atributul media al elementului <style>, care poate lua urmtoarele
valori posibile:
l screen (pentru monitoare);
l print (pentru imprimante);
l projection (pentru proiectoare video);
l braille (pentru terminale destinate nevztorilor);
l speech (pentru terminale audio);
l all (pentru toate tipurile de medii).
<style>
@import url(stiluri.css);
</style>
</head><body>
Linia 1
<h2 class=rc id=VERDE>Clasa de stil rc si stilul local VERDE</h2>
Linia 2
<h3 id=VERDE>Stil dedicat si stilul localVERDE</h3>
</body></html>
Exemplul 15_11. Stiluri pentru diferite medii
<style type=text/css media=screen>
p {color: yellow;}
</style>
<style type=text/css media=print>
p {color: black;}
</style>
</head><body>
<p>Acest paragraf va avea culoarea galbena pe monitor si culoarea neagra la
imprimare.
</body></html>
Amplasarea stilurilor n cascad
Este posibil ca pentru un anumit bloc de text, la un moment dat, s fie definite mai
multe stiluri care intr n conflict pentru anumite atribute. Se pune atunci ntrebarea: care
va fi stilul utilizat pentru respectivul bloc? Aici intervine amplasarea stilurilor n cascad,
care instituie regulile de prioritate pentru aplicarea stilurilor. Astfel, dac la un moment dat
sunt definite mai multe stiluri pentru un bloc de text, iar acestea intr n conflict pentru
anumite atribute, atunci stilul care va fi luat n considerare este primul stil care apare n
urmtoarea list de prioriti:
l exist un stil in-line;
l exist stiluri definite n blocul <style></style>; are prioritate stilul definit cel mai recent;
Lecia 15 Stiluri
110
l exist stiluri definite n fiiere externe; are prioritate stilul definit cel mai recent;
l dac nu sunt definite stiluri, atunci se aplic stilul predefinit pentru elementele unui
document.
Observaii:
l Atributele care nu intr n conflict se pstreaz aa cum au fost definite.
l Dac un atribut conine dup valoare precizarea ! important, atunci valoarea lui nu poate fi
supradefinit (adic va avea prioritate maxim).
Exemplul 15_12. Amplasarea stilurilor n cascad
<link rel=stylesheet type=text/css href=stiluri.html>
<style>
h3 {color: green ! important;}
h3 {color: red; text-align:right;}
#ROSU {color: red;}
<h1 class=rc>rosu si centrat (de la rc)</h1>
<h1 style=text-align: right; class=rc>rosu (de la rc) si dreapta (de la
in-line)</h1>
<h1 id=VERDE class=rc>verde (de la VERDE) si centrat (de la rc)</h1>
<h3 id=ROSU>verde (de la ! important) si dreapta (de la stilul dedicat)</h3>
<h3>verde (de la ! important)
<h3 style=text-align: center;>centru (de la in-line) si verde (de la !
important)</h3>
</body></html>
Pseudoclase
Pseudoclasele se utilizeaz pentru personalizarea legturilor. Ele se definesc n blocul
<style></style> sau ntr-un fiier extern, conform sintaxei:
a: link {}
a: active {}
a: visited {}
HTML prin exemple
111
Observaie: Identificatorul a poate fi omis n construcia selectorului.
Exemplul 15_13. Pseudoclase
Observaie: Pseudoclasele definite anterior sunt aplicabile tuturor legturilor coninute ntr-un docu-
ment. Pentru ca numai anumite legturi s utilizeze un stil se pot folosi urmtoarele dou metode:
a) a:link.CLASA1 {} combinat cu <a class = CLASA1 href = ></a>
b) a:link#ID1 {} combinat cu <a id = ID1 href = ></a>.
Pseudoelemente
Exist dou pseudoelemente care pot fi utilizate pentru a particulariza un paragraf. Ele
se definesc ntr-un <style></style> sau ntr-un fiier extern, conform sintaxei:
p: first-line {}
p: first-letter {}
i sunt utilizate pentru a stabili prima linie, respectiv prima liter a unui paragraf.
</title>
<style>
a:link {color: black; font-size:20pt;}
a:active {color: blue; font-style:
italic;}
a:visited {color:cyan; font-
family:arial;text-decoration:none;}
</style>
</head><body>
<a href=p1.html>pagina 1</a>
<a href=p2.html>pagina 2</a>
</body></html>
Exemplul 15_14. Pseudoelemente
<style>
p: first-line {font-variant:
small-caps;}
p: first-letter {font-size:400%; float: left;}
<p><p:first-line>Prima linie este cu majuscule. </p:first-line>Prima linie este
cu majuscule. Prima linie este cu majuscule. Prima linie este cu majuscule.</p>
<p><p:first-letter>P</p:first-letter>prima litera e mare, iar textul curge pe
partea dreapta. Prima litera e mare, iar textul curge pe partea dreapta.</p>
</body></html>
Browsere vechi
Browserele au n general proprietatea de a ignora etichetele a cror sintax nu o
cunosc. Ele afieaz ns coninutul cuprins ntre o etichet de nceput i eticheta
corespondent de sfrit, chiar dac semnificaia acestei etichete nu este cunoscut.
Pentru a ascunde browserelor vechi, ce nu cunosc elementul <style>, ntreg coninutul
acestei etichete (adic definiiile stilurilor), acesta se izoleaz ntr-un comentariu, conform
schemei sintactice:
Lecia 15 Stiluri
112
<style type = text/css>
<!
definitii de stiluri
>
</style>
Observaie: Atributul type cu valoarea text/css precizeaz stilul CSS pentru definirea stilurilor.
<style type=text/css>
<!
p {color: red;}
>
</style>
</head><body>
<p>Acest paragraf va avea culoarea neagra in browserele vechi!
</body></html>
HTML prin exemple
Lecia 16 Lecia 16
Stiluri. Configurarea fonturilor Stiluri. Configurarea fonturilor
n aceast lecie va fi prezentat sintaxa CSS utilizat pentru a defini stiluri de fonturi.
Uniti de msur
Pentru a exprima valoarea unui atribut se pot utiliza diferite uniti de msur:
l pt (puncte tipografice);
l pc (pica);
l px (pixeli);
l in (inci);
l mm (milimetri);
l cm (centimetri).
Observaie: ntre aceste uniti de msur exist relaiile: 1 inchi = 72 pt = 2,54 cm = 6 pc.
Mrimea unui font
Mrimea unui font este stabilit prin atributul font-size i poate fi exprimat n patru
moduri (vezi exemplul 16_1):
1. Prin mrime absolut. Valorile posibile sunt:
l xx-small;
l x-small;
l small;
l medium (valoarea prestabilit);
l large;
l x-large;
l xx-large.
2. Prin mrime relativ fa de valoarea curent. Valorile posibile sunt:
l larger;
l smaller;
3. Prin lungime. Valorile posibile sunt numere ntregi urmate de unitatea de msur.
4. Prin procente din valoarea curent. Valorile posibile sunt numere ntregi urmate de
simbolul %.
Tipul fontului
Tipul unui font este stabilit cu ajutorul atributului font-family. Valoarea acestui atribut
este o list de fonturi separate prin virgul. Browserul va folosi primul font din list
disponibil pe calculatorul client. Dac nici un font nu este disponibil, atunci se va utiliza
fontul implicit prestabilit de la configurarea browserului.
Exist cinci tipuri generice de fonturi, care sunt n general disponibile pe toate
calculatoarele:
l serif;
l sansserif;
l cursive;
l monospace;
l fantasy.
114
HTML prin exemple
Pot fi utilizate fonturi mai deosebite dac acestea sunt disponibile pe calculatorul client,
ca de exemplu:
l Times (un tip particular de font serif);
l Helvetica (un tip particular de font sans serif);
l Arial;
l Courier (un tip particular de font monospace);
l Western (un tip particular de font fantasy).
Observaii:
l Dac numele fontului este format din mai multe cuvinte, atunci trebuie ncadrat de ghilimele (de
exemplu: Times New Roman).
l Ultimul font din list este de regul un font generic.
Exemplul 16_1. Mrimea unui font
<html><head><title>Exemplu 16_1</title>
<style>
h1 {font-size: xx-large;}
p {font-size: 10px;}
b {font-size:larger;}
i {font-size:10pt ;}
blockquote {font-size:10mm;}
em {font-size:200%;}
<h1>Acest header are fontul xx-large</h1>
<p>Acest paragraf are fontul de 10px</p>
In aceasta linie cuvantul <b>bold</b> este scris cu font marit.<br>
In aceasta linie cuvantul <i>italic</i> are fontul de 10pt.<br>
<blockquote>Acest blockquote are fontul de 10mm.</blockquote>
In aceasta linie cuvantul <em>emphasize</em> are fontul de marimea 200% din
fontul curent.
</body></html>
115
Lecia 16 Stiluri. Configurarea fonturilor
Grosimea fontului
Grosimea unui font poate fi stabilit cu ajutorul atributului font-weight. Valorile
posibile sunt:
l normal;
l bold;
l bolder;
l lighter;
l valori numerice ntre 100 (pentru fontul cel mai subire) i 900 (pentru fontul cel mai
gros) (vezi exemplul 16_3).
Stilul fontului
Stilul unui font este stabilit prin atributul font-style. Valorile posibile ale acestui atribut
sunt (vezi exemplul 16_4).
Exemplul 16_2. Tipul fontului
<style>
h1 {font-family: Times New Roman, Times, serif;}
p {font-family: Arial, serif;}
b {font-family:Zapf Chancery,cursive;}
i {font-family:Courier, monospace;}
blockquote {font-family:Western, fantasy;}
em {font-family:Helvetica, sans-serif;}
<h1>Acest header are fontul Times New Roman, Times, serif</h1>
<p>Acest paragraf are fontul Arial, serif</p>
In aceasta linie cuvantul <b>bold</b> este scris cu fontul Zapf Chancery,
cursive.<br>
In aceasta linie cuvantul <i>italic</i> are fontul Courier, monospace.<br>
<blockquote>Acest blockquote are fontul Western, fantasy.</blockquote>
In aceasta linie cuvantul <em>emphasize</em> are fontul Helvetica, sans-
serif.
</body></html>
116
l normal;
l italic;
l oblique.
Variantele fontului
Variantele unui font pot fi stabilite prin intermediul atributului font-variant, care
admite valorile (vezi exemplul 16_5):
l normal;
l small-caps.
Un atribut unic pentru definirea unui font
Cu ajutorul atributului font pot fi stabilite simultan toate proprietile unui font.
Ordinea n care aceste proprietai trebuie furnizate este:
font-style font-variant font-weight font-size/line-height font-family
unde font-height este distana dintre liniile de baz a dou rnduri vecine (vezi exem-
plul 16_6)..
Exemplul 16_3. Grosimea unui font
<style>
h1 {font-weight: normal;}
p {font-weight: bold;}
b {font-weight: bolder;}
i {font-weight: lighter;}
blockquote {font- weight: 200;}
em {font-weight:800;}
<h1>Acest header are fontul de grosime normala</h1>
<p>Acest paragraf are fontul de grosime bold</p>
In aceasta linie cuvantul <b>bold</b> este scris cu fontul de grosime bolder.<br>
In aceasta linie cuvantul <i>italic</i> are fontul de grosime lighter.<br>
<blockquote>Acest blockquote are fontul de grosime 200.</blockquote>
In aceasta linie cuvantul <em>emphasize</em> are fontul de grosime 800.
</body></html>
HTML prin exemple
117
Exemplul 16_4. Stilul unui font
<style>
h1 {font-style: normal;}
p {font-style: italic;}
b {font-style: normal;}
i {font-style: italic;}
blockquote {font-style: italic;}
em {font-style: normal;}
<h1>Acest header are fontul cu stilul normal</h1>
<p>Acest paragraf are fontul cu stilul italic</p>
In aceasta linie cuvantul <b>bold</b> este scris cu fontul cu stilul normal.<br>
In aceasta linie cuvantul <i>italic</i> are fontul cu stilul italic.<br>
<blockquote>Acest blockquote are fontul cu stilul italic.</blockquote>
In aceasta linie cuvantul <em>emphasize</em> are fontul cu stilul normal.
</body></html>
Exemplul 16_5. Variantele unui font
<html><head><title>Exemplu 16_5
</title>
<style>
h1 {font-variant: normal;}
p {font-variant: small-caps;}
<h1>header 1 cu font-variant: nor-
mal</h1>
<h1 style=font-variant: small-
caps;>header 1 cu font-variant:
small-caps</h1>
<p>paragraf cu font-variant: small-
caps
<p style=font-variant:
normal;>paragraf cu font-variant:
normal;
</body></html>
Lecia 16 Stiluri. Configurarea fonturilor
118
Observaie: Anumite atribute pot lipsi din lista de mai sus.
Exemplul 16_6. Un atribut unic pentru definirea unui font
</title>
<style
p {font: italic bolder 20pt/25pt
times new roman, serif;}
h2 {font: bold 20px/25px new century
schoolbook, serif;}
<p>Paragraf scris cu italic bolder
20pt/25pt times new roman, serif.
Paragraf scris cu italic bolder
20pt/25pt times new roman, serif.
<h2>Header scris cu bold 20px/25px
new century schoolbook, serif
</body></html>
HTML prin exemple
Lecia 17 Lecia 17
Stiluri. Setarea textului Stiluri. Setarea textului
n aceast lecie vei nva sintaxa CSS utilizat pentru a defini stilul unui text.
Culoarea fontului
Culoarea unui font este definit cu ajutorul atributului color. Acest atribut poate primi
ca valori:
1. Un nume de culoare. Cel puin urmtoarele 16 nume de culori sunt disponibile: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white
i yellow. n anexa G Nume de culori este prezentat un tabel cu numele de culori
disponibile.
2. O specificaie numeric de tip RGB. n acest caz culoarea are formatul #rrggbb sau
#rgb, unde r, g sau b sunt cifrele hexazecimale: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C,
d, D, e, E, f sau F.
3. Apelul funciei rgb(r,g,b), unde r, g i b sunt numere ntregi ntre 0 i 255.
4. Apelul funciei rgb(r,g,b), unde r, g i b sunt procentaje ntre 0% i 100%.
Exemplul 17_1. Culoarea unui font
</title><style>
h1 {color: red;}
p {color: #0000ff;}
b {color: olive;}
i {color: rgb(0,255,0);}
blockquote {color: rgb(100%,100%,0%);}
em {color: #888888;}
<h1>Acest header are culoarea rosie
</h1>
<p>Acest paragraf are culoarea
albastra</p>
In aceasta linie cuvantul <b>bold</b>
este de culoare olive.<br>
In aceasta linie cuvantul <i>italic
</i> are culoarea verde.<br>
<blockquote>Acest blockquote are
culoarea galbena.</blockquote>
In aceasta linie cuvantul
<em>emphasize</em> are culoarea o
nuanta de gri.
</body></html>
Culoarea fondului textului
Culoarea fondului unui text se definete cu ajutorul atributului background-color.
Valorile posibile pentru acest atribut coincid cu valorile posibile pentru atributul color,
care sunt precizate n detaliu n paragraful precedent.
Observaie: Atributul background-color primete n mod prestabilit valoarea transparent.
120
Imaginea de fond pentru un text
Unui text i se poate ataa o imagine pentru construirea fondului. Pentru a realiza acest
lucru, se utilizeaz atributul background-image. Acest atribut primete drept valoare funcia
url, ce are ca argument adresa URL a imaginii folosite pentru a crea fondul. Valoarea
prestabilit a atributului background-image este none.
Observaie: Atributul background-attachement precizeaz comportamentul imaginii de fond n raport
cu textul documentului, prin valorile posibile:
l scroll (imaginea de fond i textul documentului se deplaseaz mpreun);
l fixed (imaginea de fond este fix);
Valoarea prestabilit este scroll.
HTML prin exemple
Exemplul 17_2. Culoarea fondului unui text
<style>
h1 {background-color: red;}
p {background-color: #0000ff;}
b {background-color: olive;}
i {background-color: rgb(0,255,0);}
blockquote {background-color: rgb(100%,100%,0%);}
em {background-color: #888888;}
<h1>Acest header are fondul de culoare rosie</h1>
<p>Acest paragraf are fondul de culoare albastra</p>
In aceasta linie cuvantul <b>bold</b> are fondul de culoare olive.<br>
In aceasta linie cuvantul <i>italic</i> are fondul de culoare verde.<br>
<blockquote>Acest blockquote are fondul de culoare galbena.</blockquote>
In aceasta linie cuvantul <em>emphasize</em> are fondul o nuanta de gri.
</body></html>
121
Lecia 17 Stiluri. Setarea textului
Observaie: Atributul background-repeat precizeaz modul de multiplicare a imaginii utilizate pentru a
realiza fondul prin valorile posibile (vezi exemplul 17_4):
l repeat (multiplicarea imaginii are loc pe orizontal i pe vertical);
l repeat-x (multiplicarea imaginii are loc numai pe orizontal);
l repeat-y (multiplicarea imaginii are loc numai pe vertical);
l no-repeat (imaginea nu se multiplic);
valoarea prestabilit fiind repeat.
Observaie: Atributul background-position determin prima poziie a imaginii de fond fa de
document. Imaginea de fond este apoi multiplicat n raport cu aceast prim poziie. Valorile posibile
sunt (vezi exemplul 17_5):
l prx% pry%, unde prx i pry sunt procente (poziionare proporional). Punctul de coordonate
prx% pry% din imagine coincide cu punctul de coordonate prx% pry% din cadrul blocului.
l nrx nry unde nrx i nry sunt numere urmate de o unitate de msur (poziionare absolut).
Aceste numere determin coordonatele colului de stnga-sus al imaginii n raport cu colul de
stnga-sus al blocului.
l top, center sau bottom (poziionarea implicit pe orizontal este center);
l left, center sau right (poziionarea implicit pe vertical este center).
Valoarea prestabilit este 0% 0%.
Exemplul 17_3. Imaginea de fond a unui text
<style>
h1 {background-image: url(cloud.gif);}
p {background-image: url(aol_wl.gif);}
b {background-image: url(cloud.gif);}
i {background-image: url(aol_wl.gif);}
blockquote {background-image: url(cloud.gif);}
em {background-image: url(aol_wl.gif);}
<h1>Acest header are imaginea de fond cloud.gif </h1>
<p>Acest paragraf are imaginea de fond aol_wl.gif </p>
In aceasta linie cuvantul <b>bold</b> are imaginea de fond cloud.gif <br>
In aceasta linie cuvantul <i>italic</i> are imaginea de fond aol_wl.gif.<br>
<blockquote>Acest blockquote are imaginea de fond aol_wl.gif.</blockquote>
In aceasta linie cuvantul <em>emphasize</em> are imaginea de fond aol_wl.gif.
</body></html>
122
Observaie: Imaginea de fond a documentului poate fi stabilit cu ajutorul unui singur atribut
background. Valoarea primit de acest atribut este o list a atributelor ntlnite anterior (separate prin
spaiu) n ordinea (vezi exemplul 17_6):
background-color background-image background-repeat background-attachement
background-position
Unele atribute pot lipsi din aceast list.
Distana dintre rnduri
Pentru a defini distana dintre dou rnduri succesive (distana dintre liniile de baz ale
celor dou rnduri) ale unui bloc de text, utilizai atributul line-height. Acest atribut
poate fi configurat astfel:
1. La valoarea normal.
2. Printr-un factor de scal. Acesta este un numr ntreg sau fracionar i nu este urmat de
o unitate de msur.
Exemplul 17_4. Multiplicarea imaginii de fond
<style>
p {background-image: url(aol_wl.gif); background-repeat: repeat-x;}
blockquote {background-image: url(aol_wl.gif); background-repeat: repeat-y;}
div {background-image: url(aol_wl.gif); background-repeat: no-repeat;}
<p>In acest paragraf imaginea de fond se repeta numai pe orizontala.<br>
In acest paragraf imaginea de fond se repeta numai pe orizontala.<br>
In acest paragraf imaginea de fond se repeta numai pe orizontala.
<blockquote> In acest blockqoute imaginea de fond se repeta numai pe verticala.<br>
In acest blockqoute imaginea de fond se repeta numai pe verticala.<br>
In acest blockquote imaginea de fond se repeta numai pe verticala.</blockquote>
<div>
In acest bloc imaginea de fond nu se multiplica.<br>
In acest bloc imaginea de fond nu se multiplica.<br>
In acest bloc imaginea de fond nu se multiplica.
</div>
</body></html>
HTML prin exemple
123
Exemplul 17_5. Poziionarea imaginii de fond
<style>
p {background-image: url(aol_wl.gif); background-position: 20% 50%;}
blockquote {background-image: url(aol_wl.gif); background-position: 1cm 5mm;}
div {background-image: url(aol_wl.gif); background-position: top;}
<p>In acest paragraf pozitionarea imaginii de fond este 20% 50%.<br>
In acest paragraf pozitionarea imaginii de fond este 20% 50%.<br>
In acest paragraf pozitionarea imaginii de fond este 20% 20%.
<blockquote> In acest blockqoute pozitionarea imaginii de fond este 1cm 5mm.<br>
In acest blockqoute pozitionarea imaginii de fond este 1cm 5mm.<br>
In acest blockquote pozitionarea imaginii de fond este 1cm 5mm.</blockquote>
<div>
In acest bloc pozitionarea imaginii de fond este top.<br>
In acest bloc pozitionarea imaginii de fond este top.<br>
In acest bloc pozitionarea imaginii de fond este top.
</div>
</body></html>
Exemplul 17_6. Un atribut unic pentru imaginea de fond
</title>
<style>
body {background: yellow
url(aol_wl.gif) repeat-y fixed 3cm 10%}
Acest document are o imagine de fond
setata astfel:<br>
background-color: yellow<br>
background-image: url(aol_wl.gif)<br>
background-repeat: repeat-y<br>
background-attachement fixed<br>
background-position: 3cm 10%
</body></html>
124
3. Prin lungime. Valorile posibile sunt numere urmate de unitatea de msur.
4. Prin procente din valoarea curent a fontului. Valorile posibile sunt numere ntregi,
urmate de simbolul %.
Observaie: O valoare a factorului de scal egal cu 2 este echivalent cu valoarea 200%.
Exemplul 17_7. Distana dintre dou rnduri succesive
</title>
<style>
p {line-height: 1.5;}
blockquote {line-height: 20pt;}
address {line-height: 200%;}
cite {line-height: normal;}
<p>randul 1 (1.2)<br>randul 2
(1.2)<br>randul 3 (1.2)</p>
<blockquote>randul 1 (20pt)<br>randul 2
(20pt)<br>randul 3 (20pt) </blockquote>
<address>randul 1 (120%)<br>randul 2
(120%)<br>randul 3 (120%)</address>
<cite>randul 1 (normal)<br>randul 2
(normal)<br>randul 3 (normal)</cite>
</body></html>
Alinierea textului
Alinierea textului ntr-un bloc se stabilete prin atributul text-align, care poate primi
urmtoarele valori:
l left (valoarea prestabilit);
l center;
l right;
l justify (aliniere la ambele margini).
Exemplul 17_8. Alinierea textului ntr-un bloc
</title>
<style>
h1 {text-align: center;}
p {text-align: right;}
blockquote {text-align: justify;}
address {text-align: left;}
<h1>Acest header este centrat</h1>
<p>Paragraf aliniat la dreapta<br>
Randul2<br>randul 3 <br>Ultimul rand</p>
<blockquote>Bloc de text aliniat
justify. Bloc de text aliniat
justify. Bloc de text aliniat justify.
Bloc de text aliniat justify. Bloc de
text aliniat justify. Bloc de text
aliniat justify. </blockquote>
<address>Adresa este aliniata
stanga:<br>Strada Pache Protopopescu
62<br> Bucuresti<br>Romania</address>
</body></html>
HTML prin exemple
125
Indentarea unui text
A indenta un bloc de text nseamn a stabili o anumit distan ntre marginea din
stnga a paginii i locul n care ncepe primul rnd al blocului de text.
Indentarea unui bloc de text se face cu ajutorul atributului text-indent, care poate
primi urmtoarele valori:
l un numr ntreg pozitiv sau negativ urmat de o unitate de msur;
l un procent din limea paginii (numr ntreg cuprins ntre 0 i 100, urmat de simbolul
%), precedat eventual de semnul + sau -.
Exemplul 17_9. Indentarea unui text
<style>
h1 {text-indent: 5 cm;}
p {text-indent: 10%;}
blockquote {text-indent: 200pt;}
address {text-indent: -10px;}
<h1>Acest header este indentat la 5 cm</h1>
<p>Paragraf indentat la 10% din latimea paginii<br>Randul2<br>Randul
3<br>Ultimul rand</p>
<blockquote>Bloc de text indentat la 200 puncte tipografice. Bloc de text
indentat la 200 puncte tipografice. Bloc de text indentat la 200 puncte
tipografice. Bloc de text indentat la 200 puncte tipografice. </blockquote>
<address>Adresa este indentata negativ cu 10 pixeli:<br>Strada Pache
Protopopescu 62<br> Bucuresti<br>Romania</address>
</body></html>
Decoraiunile unui text
Aspectul unui text poate fi stabilit la nivelul unui bloc cu ajutorul atributului
text-decoration, care primete una dintre urmtoarele valori:
l none (nici una este valoarea prestabilit);
126
l underline (subliniat);
l line-through (secionat cu o linie la mijloc);
l blink (clipitor);
l overline (cu o linie deasupra).
Exemplul 17_10. Decoraiunile unui text
<style>
h1 {text-decoration: underline;}
p {text-decoration: line-through;}
blockquote {text-decoration: none;}
address {text-decoration: blink;}
a:link, a:visited, a:active {text-decoration: none;}
div {text-decoration: overline;}
<h1>Acest header este subliniat</h1>
<p>Paragraf taiat cu o linie pe la mijlocul fiecarui rand<br>Randul2<br>Randul
3<br>Ultimul rand</p>
<blockquote>Bloc de text normal. Bloc de text normal. Bloc de text normal. Bloc
de text normal. Bloc de text normal. Bloc de text normal. Bloc de text normal.
Bloc de text normal. Bloc de text normal. Bloc de text normal. </blockquote>
<div>Acest text are o linie deasupra.</div>
<address>Adresa este clipitoare:<br>Strada Pache Protopopescu 62<br>
Bucuresti<br>Romania</address>
<a href=p1.html>Link catre pagina 1</a>
</body></html>
Transformri ale textului
Textul coninut ntr-un bloc de text poate suferi anumite modificri n momentul afirii
n pagina Web. Aceste transformri ale textului sunt stabilite cu ajutorul atributului
text-transform, care poate primi urmtoarele valori:
HTML prin exemple
127
l capitalize (primul caracter din fiecare cuvnt este scris cu litere mari);
l uppercase (toate caracterele sunt scrise cu litere mari);
l lowercase (toate caracterele sunt scrise cu litere mici);
l none (nici una este valoarea prestabilit).
Exemplul 17_11. Transformrile unui text
<style>
h1 {text-transform: uppercase;}
p {text-transform: capitalize;}
blockquote {text-transform: lowercase;}
address {text-transform: none;}
<h1>Acest header este scris cu litere mari</h1>
<p>Fiecare cuvant in acest paragraf incepe cu o litera mare<br>randul
doi<br>randul trei <br>ultimul rand</p>
<blockquote>Acest blockquote este scris numai cu litere mici. Acest blockquote
este scris numai cu litere mici. Acest blockquote este scris numai cu litere
mici. </blockquote>
<address>Adresa este scrisa normal:<br>Strada Pache Protopopescu 62<br>
Bucuresti<br>Romania</address>
</body></html>
Alinierea vertical a textului
Alinierea vertical a textului unui subbloc fa de blocul n care este inclus se
realizeaz cu ajutorul atributului vertical-align. Valorile posibile ale acestui atribut sunt:
l baseline;
l sub;
l super;
l top;
l text-top;
128
l middle;
l bottom;
l text-bottom;
l procent %.
Exemplul 17_12. Alinierea vertical a textului
<style>
.BA {vertical-align: baseline;}
.SU {vertical-align: sub;}
.SUP {vertical-align: super;}
</style></head><body><basefont size=5>
normal<span class=BA>Baseline
</span>normal<br>
normal<span class=SU>Sub
</span>normal<br>
normal<span class=SUP>Super
</span>normal<br>
</body></html>
Distana dintre litere
Distana dintre dou litere vecine ale unui text poate fi stabilit cu atributul
letter-spacing, care primete una dintre urmtoarele valori:
l normal (valoarea prestabilit);
l un numr urmat de o unitate de msur (aceast valoare se adaug la distana
prestabilit dintre litere).
Observaie: Sunt acceptate i valori negative.
Exemplul 17_13. Distana dintre litere
</title>
<style>
h1 {letter-spacing: 1cm;}
p {letter-spacing: 2mm;}
<h1>distanta 1 cm</h1>
<p>paragraf format cu litere
distantate la 2mm
</body></html>
Distana dintre cuvinte
Distana dintre dou cuvinte vecine poate fi stabilit cu atributul word-spacing, care
primete una dintre urmtoarele valori:
l normal (valoarea prestabilit);
l un numr urmat de o unitate de msur (aceast valoare se adaug la distana
prestabilit dintre cuvinte).
Observaie: Sunt acceptate i valori negative.
HTML prin exemple
129
Blocuri de text preformatat
Pentru a configura comportamentul browserului fa de caracterele spaiu, tab i
CR/LF, se utilizeaz atributul white-space, care poate primi valorile:
l normal (valoarea implicit) caracterele de mai sus sunt ignorate;
l pre caracterele de mai sus sunt luate n considerare;
l nowrap trecerea la linie nou se face explicit prin utilizarea etichetei <br>.
Exemplul 17_15. Blocuri de text preformatat
Exemplul 17_14. Distana dintre cuvinte
<style>
h1 {word-spacing: 3cm;}
p {word-spacing: 30px;}
<h1>distanta dintre cuvinte este 3 cm.</h1>
<p>paragraf format din cuvinte distantate la 30px.
</body></html>
</title>
<style>
div {white-space: pre;}
p {white-space: nowrap;}
<div>rand 1
rand 2</div>
<p>rand 1
rand 2
</body></html>
Lecia 18 Lecia 18
Stiluri. Configurarea blocurilor de text Stiluri. Configurarea blocurilor de text
n aceast lecie va fi prezentat sintaxa CSS utilizat pentru a defini stilul unui bloc de text.
Dimensiunile unui bloc
Un bloc este format din:
l coninut;
l distana dintre coninut i chenar;
l chenar;
l margini.
Coninutul are form dreptunghiular i poate fi definit n mod independent pe
orizontal i pe vertical. Celelalte trei elemente sunt fii dreptunghiulare i dimensiunile
lor pot fi stabilite independent pentru cele patru direcii: sus, dreapta, jos, stnga.
n figura urmtoare sunt prezentate aceste elemente, mpreun cu atributele care
permit dimensionarea blocului de text.
Marginile blocului
Marginile unui bloc reprezint distana minim dintre chenarele a dou blocuri vecine.
Pentru a stabili marginile unui bloc se utilizeaz atributele:
l margin-left;
l margin-right;
l margin-top;
l margin-bottom;
l margin. n acest caz pot fi specificate una, dou, trei sau patru valori separate prin
spaiu, reprezentnd dimensiunile n ordinea urmtoare: sus dreapta jos stnga. Dimen-
siunile care lipsesc preiau valorile de la elementele opuse. Dac este dat o singur
valoare, aceasta va fi folosit pentru toate direciile.
131
Observaii: Pentru a pune n eviden mai bine noiunea de margine a unui bloc, n exemplul anterior
blocurile au fost nconjurate de un chenar rou cu limea de 1 pixel.
Exemplul 18_1. Marginile blocului
l auto;
l mrime (numr urmat de o unitate de msur);
l procent din limea paginii (numr ntreg ntre 0 i 100, urmat de simbolul %);
Observaii: Valorile menionate anterior pot fi i negative (dar acest mod de utilizare nu este recomandat).
<style>
h1 {margin: 50px; border-width:1px; border-style:solid; border-color:red;}
p {margin: 10%; border-width:1px; border-style:solid; border-color:red;}
blockquote {margin: 100pt; border-width:1px; border-style:solid; border-
color:red;}
address {margin: 20px; border-width:1px; border-style:solid; border-color:red;}
<h1>Distanta de la chenarul acestui header la elementele vecine este de 50 de
pixeli. </h1>
<p> Distanta de la chenarul acestui paragraf la elementele vecine este de 10%
din latimea unei pagini </p>
<blockquote> Distanta de la chenarul acestui bloockquote la elementele vecine
este de 100 de puncte tipografice </blockquote>
<address> Distanta de la chenarul acestei adrese la elementele vecine este de
20 de pixeli:<br>Strada Pache Protopopescu 62<br> Bucuresti<br>Romania</
address>
</body></html>
Lecia 18 Stiluri. Configurarea blocurilor de text
132
Distana dintre coninut i chenar
Distana dintre coninutul unui bloc (text, imagini etc.) i chenarul acestuia se stabilete
cu ajutorul atributelor:
l padding-top;
l padding-right;
l padding-bottom;
l padding-left;
l padding. n acest caz pot fi specificate una, dou, trei sau patru valori separate prin
spaiu, reprezentnd dimensiunile n ordinea: sus, dreapta, jos, stnga. Dimensiunile care
lipsesc preiau valorile de la elementele opuse. Dac este dat o singur valoare, aceasta
va fi folosit pentru toate direciile.
l mrime (numr ntreg pozitiv urmat de o unitate de msur);
l procent din limea paginii (numr ntreg ntre 0 i 100, urmat de simbolul %).
Exemplul 18_2. Distana dintre coninut i chenar
<style>
h1 {padding: 30px; border-width:1px; border-style:solid; border-color:red;}
p {padding: 5%; border-width:1px; border-style:solid; border-color:red;}
blockquote {padding: 20pt; border-width:1px; border-style:solid; border-
color:red;}
address {padding: 20px; border-width:1px; border-style:solid; border-color:red;}
<h1>Distanta de la chenarul acestui header la continutul blocului este de 30 de
pixeli. </h1>
<p> Distanta de la chenarul acestui paragraf la continutul blocului este de 5%
din latimea unei pagini </p>
<blockquote> Distanta de la chenarul acestui bloockquote la continutul blocului
este de 20 de puncte tipografice </blockquote>
<address> Distanta de la chenarul acestei adrese la continutul locului este de
20 de pixeli:<br>Strada Pache Protopopescu 62<br> Bucuresti<br>Romania</
address>
</body></html>
HTML prin exemple
133
Limea chenarului
Limea chenarului unui bloc poate fi definit prin urmtoarele atribute:
l border-top-width;
l border-right-width;
l border-bottom-width;
l border-left-width;
l border-width. n acest caz pot fi specificate una, dou, trei sau patru valori separate
prin spaiu, reprezentnd dimensiunile n ordinea: sus, dreapta, jos, stnga. Dimensiunile
care lipsesc preiau valorile de la elementele opuse. Dac este dat o singur valoare,
aceasta va fi folosit pentru toate direciile.
Valorile posibile pentru aceste atribute sunt:
l thin, medium sau thick;
l numere ntregi pozitive (inclusiv 0) urmate de o unitate de msur.
Exemplul 18_3. Limea chenarului
<style>
h1 {border-width:10px; border-style:solid; border-color:red;}
p {border-width:10pt; border-style:solid; border-color:red;}
blockquote {border-width:1cm; border-style:solid; border-color:red;}
address {border-width:5mm; border-style:solid; border-color:red;}
<h1>Chenarul acestui header are latimea de 10 pixeli.</h1>
<p>Chenarul acestui paragraf are latimea de 10 puncte tipografice.</p>
<blockquote>Chenarul acestui bloockquote are latimea de 1 centimetru.</
blockquote>
<address>Chenarul acestei adrese are latimea de 5 milimetri:<br>Strada Pache
</body></html>
134
Stilul chenarului
Stilul chenarului se definete cu ajutorul atributului border-style, care poate primi
valorile:
l none (valoarea prestabilit);
l dotted (o linie punctat);
l dashed (o linie ntrerupt);
l solid (continuu);
l double (linie dubl);
l inset (chenar 3D);
l outset (chenar 3D);
l groove (chenar 3D);
l ridge (chenar 3D).
Exemplul 18_4. Stilul chenarului
<style>
h1 {border-style:solid; border-width:10px; border-color:red;}
p {border-style:double; border-width:10pt; border-color:red;}
blockquote {border-style:inset; border-width:1cm; border-color:red;}
address {border-style:outset; border-width:5mm; border-color:red;}
pre {border-style:groove; border-width:20pt; border-color:red;}
h2 {border-style:ridge; border-width:20px; border-color:red;}
<h1>Chenarul acestui header are stilul solid.</h1>
<p>Chenarul acestui paragraf are stilul double.</p>
<blockquote>Chenarul acestui bloockquote are stilul inset.</blockquote>
<address>Chenarul acestei adrese are stilul outset:<br>Strada Pache
<pre>Chenarul acestui bloc preformatat are stilul groove.
Text preformatat.
Ultima linie a textului preformatat.</pre>
<h2>Chenarul acestui header are stilul ridge.</h2>
</body></html>
HTML prin exemple
135
Culoarea chenarului
Culoarea chenarului se stabilete cu atributul border-color, care poate primi valorile:
1. none (nici una).
2. un nume de culoare. Cel puin urmtoarele 16 nume de culori sunt disponibile: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white
i yellow.
3. o specificaie numeric de tip RGB. n acest caz, culoarea are formatul #rrggbb, unde r,
g sau b sunt cifrele hexazecimale: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f
sau F.
4. apelul funciei rgb(r,g,b), unde r, g i b sunt numere ntregi ntre 0 i 255.
5. apelul funciei rgb(r,g,b), unde r, g i b sunt procente ntre 0% i 100%.
Exemplul 18_5. Culoarea chenarului
<style>
h1 {border-style:solid; border-width:10px; border-color:red;}
p {border-style:double; border-width:10pt; border-color:yellow;}
blockquote {border-style:inset; border-width:1cm; border-color:#0000ff;}
address {border-style:outset; border-width:5mm; border-color:#444444;}
<h1>Chenarul acestui header are culoarea rosie.</h1>
<p>Chenarul acestui paragraf are culoarea galbena.</p>
<blockquote>Chenarul acestui bloockquote are culoarea albastra.</blockquote>
<address>Chenarul acestei adrese are culoarea o nuanta de gri:<br>Strada Pache
</body></html>
Dimensiunile coninutului blocului
Dimensiunile coninutului unui bloc se stabilesc cu atributele width i height, care pot
l auto;
136
l mrime (numr ntreg pozitiv urmat de o unitate de msur);
l procent din limea paginii (numr ntreg ntre 0 i 100, urmat de simbolul %);
Observaii:
l Dac dimensiunea height este prea mic pentru a cuprinde ntreg coninutul blocului, aceast
dimensiune va fi ajustat corespunztor.
l Dac blocul este o imagine, atunci pentru a se pstra aspectul acesteia cel puin una dintre
dimensiunile width sau height trebuie s aib valoarea auto.
Exemplul 18_6. Limea blocului
<style>
h1 {border-style:solid; border-width:10px; border-color:red; width: auto;}
p {border-style:double; border-width:10pt; border-color:yellow; width: 200px}
blockquote {border-style:inset; border-width:1cm; border-color:#0000ff; width: 30%}
address {border-style:outset; border-width:5mm; border-color:#444444; width:
200pt}
<h1>Acest header are latimea auto.</h1>
<p>Acest paragraf are latimea de 200 de pixeli.</p>
<blockquote>Acest bloockquote are latimea egala cu 30% din latimea paginii.
</blockquote>
<address>Aceasta adresa are latimea de 200 de puncte tipografice:<br>Strada
Pache Protopopescu 62<br> Bucuresti<br>Romania</address>
</body></html>
Alinierea blocului
Alinierea blocului n cadrul paginii Web este stabilit de atributul float, care poate
l left (celelalte elemente ale paginii sunt dispuse la stnga blocului);
l right (celelalte elemente ale paginii sunt dispuse la dreapta blocului);
l none (blocul este poziionat chiar n punctul de inserare).
HTML prin exemple
137
Exemplul 18_7. Alinierea blocului
<style>
p {border-style:solid; border-width:2pt; border-color:blue; width: 30%; float: right;}
blockquote {border-style:solid; border-width:2pt; border-color:blue; width:
30%; float: left;}
cite {border-style:solid; border-width:2pt; border-color:blue; width: 30%;
float: center;}
Text inainte de paragraf. Text inainte de paragraf. Text inainte de paragraf.
Text inainte de paragraf.
<p>Acesta este paragraful aliniat la dreapta.<br>Randul al doilea.<br>Ultimul
rand.</p>
Text dupa paragraf. Text dupa paragraf. Text dupa paragraf. Text dupa paragraf.
Text dupa paragraf.<br>
Text inainte de blockquote. Text inainte de blockquote. Text inainte de blockquote.
<blockquote>Acesta este blockquote-ul aliniat la stanga.<br>Randul al doilea.</
blockquote>
Text dupa blockquote. Text dupa blockquote. Text dupa blockquote. Text dupa
blockquote. Text dupa blockquote. Text dupa blockquote. Text dupa blockquote.
blockquote.<br>
Text inainte de cite. Text inainte de cite. Text inainte de cite. Text inainte
de cite. Text inainte de cite. Text inainte de cite. Text inainte de cite. Text
inainte de cite.
<cite>Acest bloc este un cite centrat.<br>Randul doi din cite.</cite>
Text dupa cite. Text dupa cite. Text dupa cite. Text dupa cite. Text dupa cite.
Text dupa cite.
</body></html>
138
Dispunerea textului pe lng bloc
Dispunerea textului (a celorlalte elemente ale unei pagini Web) se stabilete cu ajutorul
atributului clear, care poate lua una dintre valorile:
l none (textul poate fi dispus pe ambele pri);
l left (dispunerea textului este interzis pe partea stng);
l right (dispunerea textului este interzis pe partea dreapt);
l both (dispunerea textului este interzis pe ambele pri).
Exemplul 18_8. Dispunerea textului pe lng bloc
<style>
p {border-style:solid; border-width:2pt; border-color:blue; width: 30%; clear:
left;}
blockquote {border-style:solid; border-width:2pt; border-color:blue; width:
30%; clear: none ;}
cite {border-style:solid; border-width:2pt; border-color:blue; width: 30%;
float: center; clear: none;}
Text inainte de paragraf.
<p>Acesta este paragraful aliniat la dreapta.<br>Randul al doilea.<br>Ultimul
rand.</p>
Text dupa paragraf.<br>
Text inainte de blockquote. Text inainte de blockquote. Text inainte de
blockquote. Text inainte de blockquote. Text inainte de blockquote. Text
inainte de blockquote. Text inainte de blockquote. Text inainte de blockquote.
Text inainte de blockquote.
<blockquote>Acesta este blockquote-ul aliniat la stanga.<br>Randul al doilea.</
blockquote>
blockquote. Text dupa blockquote. Text dupa blockquote. Text dupa blockquote.
blockquote.<br>
Text inainte de cite. Text inainte de cite. Text inainte de cite. Text inainte
de cite. Text inainte de cite. Text inainte de cite. Text inainte de cite. Text
inainte de cite.
<cite>Acest bloc este un cite centrat.<br>Randul doi din cite.</cite>
Text dupa cite.
</body></html>
Prescurtri pentru configurarea chenarului
Cu ajutorul atributelor:
l border-top
l border-right
l border-bottom
HTML prin exemple
139
l border-left
l border
pot fi stabilite simultan limea, stilul i culoarea unui chenar. Aceste valori sunt separate
prin spaiu. n cazul atributului border, valorile vor fi aceleai pentru cele patru direcii.
Exemplul 18_9. Prescurtri pentru configurarea chenarului
<style>
p {border-top: 10px outset red; border-right: 10pt groove blue;
border-bottom: 1cm solid magenta; border-left: 5mm inset yellow;}
div {border: 10px outset cyan;}
<p>Acesta este un paragraf care are chenarul setat cu border-top: 10px outset
red; border-right: 10pt groove blue; border-bottom: 1cm solid magenta; border-
left: 5mm inset yellow</p>
<div>
Acesta este un bloc al carui chenar<br>
Este setat cu border: 10px outset cyan;
</div>
</body></html>
Lecia 19 Lecia 19
Straturi. Sintaxa CSS Straturi. Sintaxa CSS
Un strat (layer) reprezint un bloc de elemente HTML.
Iat cteva motive pentru care straturile sunt foarte utilizate n paginile Web:
l ntr-o pagin Web se pot defini oricte straturi.
l Straturile pot fi suprapuse parial sau total.
l Straturile pot fi transparente sau opace.
l Straturile pot fi plasate cu precizie ntr-o pagin Web i pot avea dimensiuni exacte.
l Straturile pot fi imbricate unul n altul.
Pentru definirea straturilor sunt folosite:
l sintaxa CSS (Cascading Style Sheet);
l sintaxa LAYER.
n aceast lecie vom nva s utilizm straturile conform sintaxei CSS. n lecia
urmtoare vom nva sintaxa LAYER.
Strat definit printr-un stil identificat
Utilizarea unui strat presupune dou etape:
1. Definirea propriettilor stratului.
2. Definirea coninutului stratului.
n cazul unui strat definit printr-un stil identificat:
l Definirea proprietilor stratului are loc n blocul <style></style>, conform sintaxei:
#nume_stil {};
l Definirea coninutului stratului are loc ntr-un bloc de forma:
<div id = nume_stil></div> sau
<span id = nume_stil></span>.
Exemplul 19_1. Strat definit printr-un stil identificat
</title>
<style>
# strat1 {;}
<div id=strat1>
<h1>Un header</h1>
<p>Un paragraf in interiorul unui strat
definit printr-un stil identificat
<br>O imagine:
<img src=aol_sl.gif>
<br>Un formular:
<form><input type=text></form>
</div>
</body></html>
Poziia unui strat
Poziionarea unui strat poate fi realizat n raport cu blocul n care acest strat este
inclus sau n raport cu punctul curent din document la care se face inserarea. Pentru a
preciza tipul de poziionare folosit se introduce atributul position, care poate lua valorile:
141
l absolute, cnd stratul este poziionat n raport cu blocul (documentul sau alt strat) n
care este inclus. n acest caz nu se rezerv spaiu n document pentru strat coninutul
stratului se suprapune peste coninutul documentului.
l relative, cnd poziionarea stratului se face fa de poziia curent n blocul n care
stratul este inclus. n acest caz, n document se rezerv spaiu pentru strat, deci coninutul
stratului nu se suprapune peste coninutul documentului.
l static.
Poziia stratului este determinat prin atributele:
1. top, reprezentnd distana dintre marginea superioar a stratului i marginea superioar
a blocului n care stratul este inclus (n cazul poziionrii absolute) sau punctul curent de
inserare (n cazul poziionrii relative).
2. left, reprezentnd distana dintre marginea stng a stratului i marginea stng a
blocului n care stratul este inclus (n cazul poziionrii absolute) sau punctul curent de
inserare (n cazul poziionrii relative).
Atributele top i left pot lua urmtoarele valori:
l numere ntregi pozitive sau negative, urmate de o unitate de msur. Dac unitatea de
msur lipsete, atunci ea se consider ca fiind pixelul;
l un procent din nlimea (respectiv limea) blocului care include stratul;
l auto (valoarea prestabilit).
Valoarea prestabilit a atributelor top i left este 0.
Lecia 19 Straturi. Sintaxa CSS
Exemplul 19_2. Poziia unui strat
</title><style>
# strat1 {position: absolute; top:
50px; left:30px;}
<div id=strat1>
<h1>Un header</h1>
<p>Un paragraf in interiorul unui
strat definit printr-un stil
identificat. Pozitia stratului este
top: 50px; left: 30px;
<br>O imagine:
<img src=aol_sl.gif>
<br>Un formular:
</div>
</body></html>
Dimensiunile unui strat
Dimensiunile unui strat pot fi stabilite prin atributele:
1. width care determin limea stratului;
2. height, care determin nlimea stratului.
l numere ntregi pozitive urmate de o unitate de msur; dac unitatea de msur lipsete
atunci se consider fiind pixelul;
l procente din dimensiunea corespunztoare (limea sau nlimea) a blocului care conine stratul;
l auto (valoarea prestabilit).
142
Strat definit in-line
n cazul unui strat definit in-line, proprietile stratului sunt configurate prin atributul
style al blocului ce conine stratul. Acest bloc poate fi de tipul <div></div> sau
<span></span>.
HTML prin exemple
Observaie: n cazul n care coninutul unui strat nu ncape n spaiul indicat de atributele width i
height, atunci dimensiunea stratului este actualizat astfel nct stratul s fie vizibil n ntregime.
Exemplul 19_3. Dimensiunile unui strat
</title><style>
#strat1 {position: absolute; top:
50px; left: 50px; width: 100px;
height: 100px;}
<div id=strat1>
<p>Acesta este un strat cu latimea de
100 de pixeli si inaltimea de 100 de
pixeli.
<p>O imagine:
<img src=aol_wl.gif>
</div>
</body></html>
Straturi definite prin clase de stiluri
n cazul unui strat definit cu ajutorul unei clase de stiluri:
l Definirea proprietilor stratului are loc n blocul <style></style>, conform sintaxei:
all.nume_clasa {} sau .nume_clasa {} sau div.nume_clasa {} sau
span.nume_clasa {}.
l Definirea coninutului stratului are loc ntr-un bloc de forma:
<div class = nume_clasa></div> sau
<span class = nume_clasa></span>.
Exemplul 19_4. Strat definit in-line
<div style=position: absolute;
top: 100pt; left: 200px; width: 100mm;>
<h1>Un header</h1>
strat definit printr-un stil ad-hoc.
Latimea stratului este de 100 de mm.
Alinierea stratului este 100 de
puncte tipografice (top) si de 200 de
pixeli (left).<br>
O imagine:
<img src=aol_wl.gif><br>
Un formular:
</div>
</body></html>
143
Poziionarea relativ a unui strat
Exemplul urmtor utilizeaz poziionarea relativ a straturilor pentru a afia un text
unduitor. Pentru definirea celor dou tipuri de straturi necesare, se utilizeaz dou clase
de stiluri, up i down.
Exemplul urmtor arat, de asemenea, cum pot fi imbricate dou straturi.
Exemplul 19_5. Strat definit printr-o clas de stiluri
</title>
<style>
all.clasa1 {position: absolute; top:
50px; left: 100px; width: 400px}
<div class=clasa1>
<h1>Un header</h1>
strat definit printr-o clasa de stil.
Latimea stratului este de 400 de
pixeli. Alinierea stratului este 50
de pixeli (top) si de 100 de pixeli
(left).<br>
O imagine:<img src=aol_sl.gif><br>
Un formular:
</div>
</body></html>
Atributele unui strat motenite de la stiluri
Deoarece un strat definit prin sintaxa CSS este un bloc ale crui proprieti sunt
determinate de un stil, rezult c atributele stilurilor pot fi utilizate i pentru straturi.
n exemplul urmtor sunt definite 4 straturi n 4 moduri, avnd proprieti motenite de
la stiluri.
Pentru definirea culorii de fond a unui strat se pot utiliza att atributul background-color
motenit de la stiluri, ct i atributul specific straturilor layer-background-color; acesta
din urm respect ns valoarea atributului height.
Pentru definirea imaginii de fond a unui strat se pot utiliza att atributul background-image
motenit de la stiluri, ct i atributul specific straturilor layer-background-image; acesta
din urm respect ns valoarea atributului height.
Exemplul 19_6. Poziionarea relativ a straturilor
</title>
<style>
span.up {position: relative; top: -5px; }
span.down {position: relative; top: 5px; }
Urmatorul rand este unduitor:<br><br>
normal <span class=up>sus <span
class=up>sus-sus </span>sus </span>normal
<span class=down>jos </span>normal.
</body></html>
144
Observaii:
l Culoarea de fond apare numai n locurile n care stratul are coninut.
l Straturile 3 i 4 sunt transparente (neavnd culori sau imagini de fond) i sunt suprapuse parial.
Straturi avnd coninutul n fiiere externe
Coninutul unui strat se poate importa dintr-un fiier HTML extern utiliznd atributul
include-source, care primete ca valoare adresa URL a fiierului HTML necesar.
Exemplul 19_7. Atribute motenite de la stiluri
<style>
# strat1 {position: absolute; top: 50px; left: 100px; width: 200px; background-
color: yellow;
color: red;}
all.clasa2 {position: absolute; top: 50px; left: 400px; width: 200px; back-
ground-image: url(cloud.gif); font-size: 20pt;}
span {position: absolute; top: 250px; left: 200px; width: 200px; text-align:
right; font-family: Arial;}
<div id=strat1><h1>Stratul 1</h1><p>Culoarea de fond este galbena. Culoarea
textului este rosie.</div>
<div class=clasa2><h1>Stratul 2</h1><p>Imaginea de fond este cloud.gif.
Marimea fontului este de 20 puncte tipografice.</div>
<div style=position: absolute; top: 250px; left: 100px; width: 200px; border-
width: 5px; border-color: green;><h1>Stratul 3</h1><p>Chenarul este verde si
are latimea de 5 pixeli.</div>
<span><h1>Stratul 4</h1><p>Fontul este Arial. Alinierea textului este la
dreapta.</span>
</body></html>
HTML prin exemple
145
Vizibilitatea unui strat
Vizibilitatea unui strat este definit de atributul visibility, care poate lua valorile:
l show (pentru a face un strat vizibil);
l hide (pentru a ascunde stratul);
l inherit (pentru a moteni proprietatea de vizibilitate de la blocul printe).
n exemplul urmtor sunt definite dou straturi suprapuse, dintre care numai unul este
vizibil.
n exemplul urmtor, cele patru straturi import coninutul a patru fiiere HTML aflate
n directorul curent.
Exemplul 19_8. Straturi avnd coninutul n fiiere externe
title><style>
# strat1 {position: absolute; top:
include-source: url(p1.html);}
include-source: url(p2.html);}
span {position: absolute; top: 250px;
left: 50px; width: 200px; include-
source: url(p4.html);}
<div id=strat1></div>
<div class=clasa2></div>
<div style=position: absolute; top:
include-source: url(p3.html);></div>
<span></span>
</body></html>
Exemplul 19_9. Vizibilitatea unui strat
</title><style>
span {position: absolute; top: 50px;
left: 100px; width: 200px;
visibility: hide;}
visibility: show;}
<span><h1>Stratul 1</h1><p>Paragraf
in stratul invizibil.</span>
<div class=clasa2><h1>Stratul 2</h1>
<p>Paragraf in stratul vizibil.</div>
</body></html>
Zona vizibil a unui strat
Cu ajutorul atributului clip se poate afia numai o zon dreptunghiular a unui strat.
Acest atribut primete ca valoare:
146
1. Funcia rect (left, top, right, bottom), unde:
l top i bottom sunt distanele de la marginea de sus a stratului la marginile de sus i de
jos ale regiunii vizibile;
l left i right sunt distanele de la marginea stng a stratului la marginile din stnga i
din dreapta ale regiunii vizibile;
2. Funcia rect(right, bottom), care este echivalent cu funcia rect(0, 0, right, bottom) de
la punctul precedent.
n exemplul urmtor este definit un strat care conine o imagine, dar numai o poriune
a acesteia este vizibil n pagina Web.
Exemplul 19_10. Zona vizibil a unui strat
<html><head>
<style>
all.clasa {position: absolute; top:
50px; left: 100px; width: 300px;clip:
rect(50, 200, 300, 50);}
</style>
</head><body>
<div class=clasa>
<img src=i1.jpg>
</div>
</body></html>
Observaie: n cazul n care coninutul unui strat nu se poate ncadra n dimensiunile specificate prin
atributele width i height, atunci aceste dimensiuni sunt ajustate n mod prestabilit astfel nct ntreg
coninutul stratului s fie vizibil. Acest comportament poate fi modificat cu ajutorul atributului over-
flow, care poate primi valorile:
l none (valoarea prestabilit);
l clip (zona vizibil este strict determinat prin atributele width i height);
l scroll (dimensiunile zonei vizibile sunt determinate de atributele width i height, dar cu ajutorul
barelor de derulare poate fi examinat ntregul coninut al stratului).
</title><style>
height: 50px; overflow: clip; border-
width: 2px;}
<div id=strat1>
<p>Acesta este un strat cu latimea de
100 de pixeli si inaltimea de 100 de
pixeli.
</div>
</body></html>
Imbricarea straturilor
Un strat poate fi plasat n interiorul altui strat. n acest fel ia natere o relaie printe-
-fiu. Stratul fiu poate moteni atribute de la stratul printe. Dac poziia sau dimen-
Exemplul 19_11. Atributul overflow
HTML prin exemple
147
siunile stratului fiu sunt exprimate n procente, atunci ele exprim procente din dimen-
siunile stratului printe.
Exemplul 19_12. Imbricarea straturilor
<html><head><title>Exemplul 19_12 </title><style>
#strat1 {position: absolute; top: 50px; left: 50px; width: 400px; height:
300px;
background-color: yellow; visibility: show;}
#strat2 {position: absolute; top: 25%; left: 25%; width: 50%;
background-color: cyan; visibility: inherit;}
<div id=strat1>
Acesta este stratul parinte. Acest strat este pozitionat absolut fata de docu-
ment la 50 de pixeli de marginea superioara si la 50 de pixeli de marginea stanga.
Acest strat are latimea de 400 de pixeli.
<div id=strat2>
Acesta este stratul fiu. Acest strat este pozitionat absolut fata de stratul 1
(parinte) la 75 de pixeli de marginea superioara a stratului 1 si la 100 de pixeli
de marginea stanga a stratului 1. Latimea acestui strat este de 200 de pixeli.
</div></div>
</body></html>
Utilizarea unei imagini ca strat
Pentru a utiliza facilittile oferite de straturi la introducerea unei imagini ntr-o pagin
Web, putem insera imaginea ntr-un strat (ca n exemplele anterioare) sau putem crea un
strat direct din imagine, ca n exemplul urmtor.
Stiva de straturi
Straturile introduse ntr-o pagin Web formeaz o stiv. Ordinea straturilor n stiv
coincide cu ordinea inserrii straturilor n pagina Web, stratul aflat deasupra fiind ultimul
inserat n pagin.
148
Pentru a schimba aceast ordine prestabilit se utilizeaz atributul z-index, care ia ca
valoare un numr ntreg pozitiv reprezentnd coordonata pe axa OZ la care se afl stratul
n stiv. Cu ct valoarea acestui atribut este mai mare, cu att stratul se va afla mai sus n
stiva de straturi.
Exemplul 19_13. Imagine i strat
</title><style>
50px; left: 50px;}
<img id=strat1 src=aol_sl.gif>
</body></html>
Exemplul 19_14. Stiva de straturi
<html><head><title>Exemplul 19_14 </title><style>
#strat1 {position: absolute; top: 100px; left: 50px; width: 200px; z-index:3;
background-color: red;}
#strat2 {position: absolute; top: 50px; left: 100px; width: 75px; z-index: 2;
background-color: cyan;}
#strat3 {position: absolute; top: 150px; left: 125px; width: 200px; z-index: 1;
background-color: magenta;}
<div id=strat1>Acesta este stratul 1. El va fi dispus deasupra tuturor.
Acesta este stratul 1. El va fi dispus deasupra tuturor.</div>
<div id=strat2>Acesta este stratul 2. El va fi dispus la mijloc.
Acesta este stratul 2. El va fi dispus la mijloc.</div>
<div id=strat3>Acesta este stratul 3. El va fi dispus sub celelalte doua
straturi.
Acesta este stratul 3. El va fi dispus sub celelalte doua straturi.</div>
</body></html>
HTML prin exemple
149
Un efect special
Straturile ofer posibiliti pentru crearea unor efecte speciale ntr-o pagin Web.
Exemplul urmtor ne arat cum se poate crea efectul de umbr pentru un text cu ajutorul
a dou straturi suprapuse.
Exemplul 19_15. Efectul de umbr
</title><style>
5px; left: -15px; font-size: 80pt;
color: #000000;}
50px; left: 50px; font-size: 80pt;
color: #aaaaaa;}
<div id=strat2>
TITLU
<div id=strat1>
TITLU
</div>
</div>
</body></html>
Lecia 20 Lecia 20
Straturi. Sintaxa LAYER Straturi. Sintaxa LAYER
n aceast lecie vom prezenta utilizarea straturilor conform sintaxei LAYER. n lecia
precedent a fost prezentat sintaxa CSS.
Sintaxa de tip layer pentru un strat. Atribute importante
Un strat (layer) se poate defini ca un bloc delimitat de etichetele <layer>, respectiv
</layer>.
Dei sunt opionale, urmtoarele atribute se dovedesc a fi importante:
1. top determin distana dintre marginea superioar a stratului i marginea superioar a
subblocului n care este inclus stratul (marginea superioar a paginii Web dac stratul nu
este inclus n alt subbloc);
2. left determin distana dintre marginea stng a stratului i marginea stng a
subblocului n care este inclus stratul (marginea stng a paginii Web dac stratul nu este
inclus n alt subbloc);
3. width determin limea stratului.
Valorile primite de aceste atribute pot fi:
l Numere ntregi pozitive. Unitatea de msur este pixelul.
l Procente din limea subblocului n care stratul este inclus (pentru left i width)
respectiv din nlimea subblocului (pentru top).
Observaii:
l Valoarea prestabilit a atributelor top i left este 0.
l Dac pentru a afia coninutul stratului este nevoie de o lime mai mare dect cea precizat prin
atributul width, atunci stratul va fi afiat la dimensiunea necesar afirii complete.
l Straturile de tip layer nu rezerv spaiu n pagina Web i de aceea se pot suprapune ntre ele sau cu
celelalte elemente ale paginii Web.
Exemplul 20_1. Dou straturi simple
<layer top=50 left=50 width=200 >
<h1>Stratul 1 </h1><p>Top=50,
Left=50, Width=200.<br>
Imagine in stratul 1:
<img src=aol_sl.gif><br>
<a href=p1.html>Link in stratul 1</a>
</layer>
<h1>Stratul 2. </h1> <p>Top=50,
Left=300, Width=300.<br>
Formular in stratul 2:
</layer>
</body></html>
151
Straturi inserate la poziia curent
Pentru a insera straturi la poziia curent n pagina Web, utilizm eticheta layer fr a
stabili valorile atributelor top i left. Atributul width poate fi configurat.
Lecia 20 Straturi. Sintaxa LAYER
Exemplul 20_2. Straturi inserate la poziia curent
<h1>Header 1 in documentul principal</h1>
<p>Primul strat va fi inserat la sfarsitul acestui rand.
<layer width=200 >
<h1>Header 1 in stratul 1</h1><p>Width=200.<br>
Imagine in stratul 1: <img src=aol_sl.gif><br>
</layer>
<p>Al doilea strat va fi inserat imediat<br>dupa imaginea urmatoare.<br>
<img src=comic_sl.gif>
<layer width=100 >
<h1>Header 1 in stratul 2.</h1><p>Width=100.<br>
Formular in stratul 2: <form><input type=text></form>
</layer></body></html>
Straturi imbricate
n exemplul urmtor sunt prezentate dou straturi imbricate. Pentru stratul al doilea,
poziiile top i left sunt calculate fa de marginile de sus i din stnga ale primului strat, n
care este inclus.
Observaie: Datele au fost alese astfel nct straturile s se suprapun ntre ele sau cu alte componente
ale paginii Web.
152
Straturi in-line
Straturile in-line sunt straturi delimitate de etichetele <ilayer> i </ilayer>. Spre
deosebire de straturile layer, straturile in-line au proprietile:
l rezerv spaiu n pagina Web;
l poziionarea lor se face n raport cu localizarea curent n pagin i nu fa de blocul
printe n care sunt incluse.
n exemplul 20_4 se utilizeaz straturi imbricate in-line pentru a afia un text unduitor.
n exemplul 20_5 se creeaz un bloc de tip blockquote cu ajutorul unui strat in-line.
Acest bloc de text este indentat fa de marginea stng a paginii Web cu 10% din limea
paginii. Pentru ca stratul in-line s nceap de la captul unui rnd, este inclus ntr-un bloc
<div></div>.
Straturi avnd coninutul n fiiere externe
Coninutul unui strat se poate importa dintr-un fiier HTML extern utiliznd atributul
src, care primete ca valoare adresa URL a fiierului HTML necesar.
Observaie: Dac n blocul <layer></layer> se afl i alte elemente, atunci afiarea lor se va face dup
afiarea elementelor coninute n fiierele externe.
HTML prin exemple
Exemplul 20_3. Straturi imbricate
<h1>Documentul principal</h1>
<h2>Stratul 1 in document</h2><p>Width=200<br>
Imagine in stratul 1: <img src=aol_wl.gif><br>
<h3>Stratul 2 in stratul 1</h3><p>Width=100<br>
Formular in stratul 2: <form><input type=text></form>
</layer>
</layer></body></html>
153
n exemplul urmtor, cele trei straturi import coninutul a trei fiiere HTML aflate n
directorul curent.
Exemplul 20_4. Straturi imbricate in-line
<layer top=50 left=50>
Normal
<ilayer top=-10>
Sus
</ilayer>
Normal
<ilayer top=10>
Jos
</ilayer>
Normal
</layer>
</body></html>
Exemplul 20_5. Blockquote realizat cu straturi in-line
title></head><body>
<p>Urmatorul bloc de text este un
blockquote realizat cu ajutorul
unui strat in-line.
<div><ilayer width=80% left=10%>
Acesta este un blockquote realizat
cu ajutorul unui strat in-line.
<p>Acest text se afla dupa blockquote.
</ilayer></div>
</body></html>
Exemplul 20_6. Straturi avnd coninutul n fiiere externe
<layer src=p1.html top=100 left=100
width=200></layer>
width=200></layer>
width=200></layer>
</body></html>
154
HTML prin exemple
Vizibilitatea unui strat
Vizibilitatea unui strat este definit de atributul visibility, care poate lua valorile:
l show (pentru a face un strat vizibil);
l hide (pentru a ascunde stratul);
l inherit (pentru a moteni vizibilitatea blocului printe).
n exemplul urmtor sunt definite dou straturi suprapuse, dintre care numai unul este
vizibil.
Exemplul 20_7. Vizibilitatea unui strat
<layer top=50 left=50 width=200
visibility=hide>
<h1>Stratul 1.</h1>
<p>Acest strat este ascuns.
</layer>
visibility=show>
<h1>Stratul 2.</h1>
<p>Acest strat este vizibil.
</layer>
</body></html>
nlimea unui strat
nlimea unui strat poate fi stabilit prin atributul height. Valorile posibile ale acestui
atribut sunt:
l numere ntregi pozitive; unitatea de msur este pixelul.
l procente din nlimea blocului care conine stratul.
Observaie: n cazul n care coninutul unui strat nu ncape n spaiul indicat de atributul height, atunci
dimensiunea stratului este ajustat astfel nct stratul s fie vizibil n ntregime (vezi exemplul urmtor).
Exemplul 20_8. nlimea unui strat
height=200>
randul 1<br> randul 2<br> randul
3<br> randul 4<br> randul 5<br>
randul 16<br> randul 17<br>
</layer>
</body></html>
n exemplul urmtor sunt desenate ntr-o pagin Web diferite dreptunghiuri colorate,
cu ajutorul unor straturi. Straturile au dimensiuni precizate, dar coninutul lor este vid.
155
Zona vizibil a unui strat
Cu ajutorul atributului clip se poate afia numai o zon dreptunghiular a unui strat.
Acest atribut primete ca valoare:
1. Lista left, top, right, bottom, unde:
l top i bottom sunt distanele de la marginea de sus a stratului la marginile de sus i de
jos ale regiunii vizibile;
l left i right sunt distanele de la marginea stng a stratului la marginile din stnga i
din dreapta ale regiunii vizibile;
2. Lista right, bottom, care este echivalent cu lista 0, 0, right, bottom de la punctul
precedent.
n exemplul urmtor este definit un strat care conine o imagine, dar numai o poriune
a acesteia este vizibil n pagina Web.
Exemplul 20_9. Dreptunghiuri colorate
height=100 bgcolor=red>
</layer>
height=100 bgcolor=yellow>
</layer>
</body></html>
Exemplul 20_10. Zona vizibil a unui strat
<html>
<head>
</head>
<body>
<layer clip=50, 50, 200, 300">
O imagine:<img src=i1.jpg>
</layer>
</body>
</html>
Atribute motenite
O serie de atribute sunt aplicabile i straturilor definite prin <layer> sau <ilayer>, ca de
exemplu:
l bgcolor definete culoarea de fond a stratului;
l background determin imaginea de fond a stratului.
Straturi poziionate fa de pagina Web
Pentru a poziiona un strat fa de pagina Web se utilizeaz atributele:
l pagex;
l pagey.
156
Observaie: Atributele pagex i pagey reprezint coordonatele n pixeli ale vrfului de stnga-sus al
stratului fa de vrful de stnga-sus al paginii Web.
Aceste atribute nu au echivalent n sintaxa CSS de definire a straturilor.
Exemplul 20_11. Straturi avnd culoare i imagine de fond
bgcolor=yellow>
Un strat avand culoarea de fond
galbena.
</layer>
background=cloud.gif>
Un strat avand imagine de fond cloud.gif.
</layer>
</body></html>
Exemplul 20_12. Straturi poziionate fa de pagina Web
<layer pagex=50 pagey=50 width=100
bgcolor=yellow>
Un strat avand culoarea de fond
galbena.
</layer>
<layer pagex=100 pagey=100 width=100
background=cloud.gif>
Un strat avand imaginea de fond cloud.gif.
</layer>
</body></html>
Stiva de straturi
Straturile introduse ntr-o pagin Web formeaz o stiv, n vrful acesteia fiind aezate
straturile cele mai recent introduse n document.
Exemplul 20_13 creeaz patru staturi care se suprapun. Culorile acestor straturi sunt (n
ordinea inserrii n pagin): rou, verde, albastru i galben.
Schimbarea ordinii stivei de straturi
Ordinea stivei de straturi (care n mod prestabilit este ordinea de inserare a straturilor
n cadrul fiierului HTML) poate fi schimbat cu ajutorul atributelor:
l z-index specific n mod absolut poziia stratului n stiv. Cu ct valoarea dat acestui
atribut este mai mare, cu att stratul se afl mai sus n stiv.
l above specific stratul (prin identificatorul acestuia) care va fi deasupra noului strat
inserat.
l below specific stratul (prin identificatorul acestuia) care va fi sub noul strat inserat.
HTML prin exemple
157
Exemplul 20_13. Stiva de straturi
bgcolor=red>s1 s1 s1 s1 s1 s1 s1 s1
s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1
s1 s1 s1 s1 s1 s1 </layer>
bgcolor=green>s2 s2 s2 s2 s2 s2 s2 s2
s2 s2 s2 s2 s2 s2 s2 s2 s2 s2 s2 s2
bgcolor=blue>s3 s3 s3 s3 s3 s3 s3 s3
s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3
bgcolor=yellow>s4 s4 s4 s4 s4 s4 s4
s4 s4 s4 s4 s4 s4 s4 s4 s4 s4 s4 s4
s4 s4 s4 s4 s4 s4 s4 </layer>
</body></html>
Exemplul 20_14. Schimbarea ordinii stivei de straturi
<layer top=25 left=25 width=200 bgcolor=red id=strat1 above=strat2>s1 s1 s1 s1
s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1
s1 s1 s1 s1 s1 s1 s1 s1 s1 </layer>
<layer top=50 left=50 width=50 bgcolor=green id=strat2 z-index=4>s2 s2 s2 s2 s2
s2 s2 s2 s2 s2 s2 s2 s2 </layer>
<layer top=50 left=150 width=50 bgcolor=blue id=strat3 below=strat1>s3 s3 s3 s3
s3 s3 s3 s3 s3 s3 s3 s3 s3 </layer>
<layer top=125 left=25 width=200 bgcolor=yellow id=strat4 above=strat2>s4 s4 s4
s4 s4 s4 s4 s4 s4 s4 s4 s4 s4 </layer>
</body></html>
158
Observaii:
l Fiecare strat poate primi un nume sau un identificator cu ajutorul atributului id.
l Atributele above i below nu au echivalent n sintaxa CSS de definire a unui strat. Dac exist
conflicte ntre aceste atribute, atunci ultimele au prioritate.
l Atributul z-index poate primi i valori ntregi negative, caz n care stratul va fi poziionat sub blocul
printe care conine stratul;
n exemplul 20_14, ordinea straturilor 2, 3 i 4 este stabilit cu ajutorul atributelor
z-index, above i below.
Combinarea sintaxei CSS cu sintaxa LAYER
Cele dou sintaxe utilizate n crearea unui strat, CSS i LAYER pot fi combinate. Astfel,
n exemplul urmtor, un strat este definit prin sintaxa CSS, dar coninutul lui se afl ntr-un
bloc <layer></layer>.
Exemplul 20_15. Combinarea sintaxelor
</title>
<style>
.strat1 {top:20mm; left: 30pt; width:
200px; border-width: 10px; border-
style: outset; background-color:
yellow;}
</style>
</head><body>
<layer class=strat1>
<p>Acest paragraf se afla in
interiorul unui strat definit prin
sintaxa CSS. Continutul stratului se
afla intr-un bloc layer.
</layer>
</body></html>
Browsere vechi
Browserele vechi care nu cunosc semnificaia etichetelor <layer>, <ilayer>, </layer> i
</ilayer> vor ignora aceste etichete, dar vor afia n pagina Web coninutul cuprins ntre etichete.
Cu ajutorul blocului <nolayer></nolayer>, se poate preciza exact care va fi
coninutul pe care un browser vechi l va afia ntr-o pagin Web.
n exemplul urmtor se prezint un model de strat care funcioneaz corect att cu
browserele vechi, ct i cu cele noi.
<layer>
<!
Acest continut va fi afisat de browserele noi.
>
<nolayer>
Acest continut va fi afisat de browserele vechi.
</nolayer>
</layer>
</body></html>
HTML prin exemple
Anexa A Anexa A
Crearea primei pagini Web Crearea primei pagini Web
Prezentm n continuare un scenariu pentru realizarea primei pagini HTML. Pentru a
funciona fr alte modificri, trebuie s dispunei de un calculator cu sistemul de operare
Windows 95/98 i cu un browser instalat (Netscape Communicator, Internet Explorer etc.):
1. Porniti calculatorul.
2. Efectuai clic pe Start, apoi Programs, Accessories, Notepad pentru a lansa n execuie
cel mai simplu editor de text, Notepad. La lansarea n execuie, acest editor ncarc
automat un document nou numit Untitled.
3. Scriei n document: Prima Pagina!
4. Pentru a salva documentul, efectuai clic pe File apoi pe Save As Va aprea caseta de
dialog Save As. Cu ajutorul cmpului Save in:, alegei directorul n care va fi salvat fiierul.
n cmpul File name:, tastai numele fiierului care trebuie s aib extensia .htm sau .html
(de exemplu: p1.html). n caseta Type alegei All files. Apsai apoi butonul Save.
5. Pentru a vizualiza pagina creat, efectuai clic pe Start, apoi pe Documents. Cutai n
lista care va fi afiat numele fiierului tastat la punctul 4 i efectuai clic pe el. Datorit
extensiei .htm sau .html a fiierului, sistemul Windows lanseaz n execuie browserul
prestabilit i pagina este vizualizat (va aprea o fereastr ce conine textul Prima
Pagina!, introdus de dumneavoastr la punctul 3).
Observaie: Acest pas poate fi parcurs i altfel: Lansai n execuie browserul preferat (Netscape
Communicator sau Internet Explorer). n cmpul Location (respectiv Address), tastai file://c:/
html/p1.html, apoi apsai tasta Enter. Am presupus c fiierul p1.html a fost salvat n directorul c:/
html.
Observaie: Pe alte platforme (Macintosh, Linux etc.), algoritmul de mai sus trebuie adaptat, ns ideile
de baz rmn aceleai.
Anexa B Anexa B
Cutarea fiierelor imagine Cutarea fiierelor imagine
Pentru ca imaginile inserate ntr-un document HTML s apar i n pagina Web, trebuie
ca browserul s cunoasc exact unde se afl fiierul imagine referit.
n continuare vom arta cum se gsesc fiierele de tip imagine disponibile pe
calculatorul dumneavoastr i le vom muta pe cele necesare n fiierul de lucru (am
recomandat ca acest fiier s se afle n directorul c:\html).
Pentru a afla care sunt fiierele de tip imagine de pe calculatorul dumneavoastr,
utilizai algoritmul prezentat n continuare.
Observaie: Dac pe calculatorul dumneavoastr nu este instalat sistemul de operare Windows 95/98/
NT, atunci algoritmul trebuie modificat corespunztor.
1. Efectuai clic pe butonul Start, apoi pe Find, Files or Folders
2. Va aprea fereastra Find. n cmpul Named, tastai *.gif (pentru a cuta toate fiierele
cu extensia .gif), iar n cmpul Look in: alegei My Computer (pentru a cuta fiierele pe
tot calculatorul, inclusiv pe CD). Efectuai apoi clic pe butonul Find now i ateptai pn
cnd aplicaia gsete toate fiierele cu extensia .gif de pe calculatorul dumneavoastr.
3. Selectai un fiier i efectuai clic cu butonul din dreapta pe el, dup care alegei Copy.
4. Deschidei fereastra My Computer i identificai directorul n care se gsesc fiierele
dumneavoastr HTML (de exemplu c:\html).
5. Efectuai clic cu butonul din dreapta pe directorul respectiv, dup care apsai Paste.
Acum fiierul copiat cu comanda Copy va fi inserat cu comanda Paste n directorul
dumneavoastr de lucru (de exemplu c:\html).
Anexa C Anexa C
Hri de imagini Hri de imagini
Construirea unei hri de imagini
n aceast anex vei nva cum s construii o hart de imagini pas cu pas, folosind
utilitare Windows obinuite.
Explicaiile urmtoare presupun c pe calculatorul dumneavoastr este instalat sistemul
de operare Windows 95/98/NT i c utilizai editorul de texte Microsoft Word 97.
1. Lansai n execuie editorul de texte Word i deschidei un document nou.
2. Apsai butonul Drawing pentru a afia bara cu instrumente de desenare.
3. Apsai butonul Draw, apoi Grid i va
aprea caseta de dialog Snap to grid. n aceast
caset:
l selectai caseta Snap to grid;
l stabilii pentru Horizontal spacing i Vertical
spacing la 1 cm;
l apsai butonul OK.
4. Apsai butonul Text box i desenai un cadru
de 6 cm x 5 cm.
5. n interiorul cadrului desenai tot ce vedei n
figura alturat (mai puin liniile punctate, care
sunt ajuttoare). Fiecare ptrat are latura de 1 cm.
Observaie: Alegnd axa OX (orizontal) i axa OY (vertical) cu originea n colul de stnga-sus al
imaginii, cele trei figuri au urmtoarele coordonate, n cm (vezi lecia 12 pentru modul n care se
determin coordonatele figurilor geometrice ntr-o hart de imagini):
l 1,1,2,2 pentru dreptunghi;
l 4,2,1 pentru cerc;
l 1,3,2,3,4,4,1,4 pentru poligon.
6. Apsai butonul Select Objects, selectai toat figura i apsai Draw, urmat de Group,
pentru a forma un singur obiect din toate elementele desenate.
7. Selectai figura i efectuai clic cu butonul din dreapta, dup care apsai Cut pentru a
decupa figura i pentru a o copia n clipboard.
8. Apsai Insert, apoi Object. Va aprea o caset de dialog n care vei alege n
cmpul Object type tipul Microsoft Word Picture.
9. Apare o nou fereastr Microsoft Word Picture i, n chenarul punctat, executai clic cu
butonul din dreapta i apoi Paste. Figura va fi reafiat; nchidei apoi fereastra Microsoft
Word Picture.
10. Se va reveni imediat n documentul Word iniial, care va conine acum imaginea sub
forma unui obiect Microsoft Word Picture.
11. Salvai fiierul cu File, Save As HTML, pentru a-l converti ntr-un fiier cu extensia
.html.
12. ncrcai n browserul Internet Explorer fiierul .html creat la punctul 11.
13. Figura va aprea n pagina Web n format .gif. Executai clic cu butonul din dreapta
pe ea, apoi selectai Save Picture As ca s o salvai pentru utilizare ulterioar.
1 3 4 5 2
1
3
4
5
2
6
Anexa D Anexa D
URL URL
URL vine de la Uniform Resource Locator, care n traducere nseamn identificator
uniform al resurselor.
Adresele URL reprezint un standard de identificare i accesare a resurselor din Internet.
O adres URL este format din trei pri care sunt concatenate ntr-un unic ir de
caractere:
1. Identificatorul serviciului (protocolului) Internet utilizat pentru accesarea resursei.
Exist mai multe metode (protocoale) de acces la informaia stocat pe un calculator
conectat la Internet i, corespunztor, mai muli identificatori de servicii (protocoale):
l http:// pentru Hiper Text Transfer Protocol (protocolul de transfer bazat pe hipertext);
l ftp:// pentru File Transfer Protocol (protocolul de transfer de fiiere);
l file:// pentru accesul la fiierele stocate pe calculatorul local.
2. Identificatorul calculatorului ce stocheaz resursa (host-ul sau gazda).
Acesta are forma nume_calculator.domeniu_internet, unde nume_calculator este
numele calculatorului care trebuie s fie unic n domeniul domeniu_internet. Domeniile
din Internet sunt structurate sub forma unui arbore, ca n figura urmtoare:
Pentru a forma un domeniu, se
parcurge arborele de jos n sus,
insernd un punct ntre nivele. De
exemplu, domeniul developer din
figura de mai sus are sintaxa complet
developer.netscape.com.
Astfel, calculatorul cu numele www
din domeniul edu.ro are identificatorul
www.edu.ro.
3. Identificatorul resursei (fiierului) pe
calculatorul gazd (server).
Acesta se compune din:
l /, reprezentnd directorul rdcin. Fiecare metod de acces are stabilit un director
radcin fa de care se exprim n mod relativ calea spre directorul n care se afl
fiierul cu informaie.
l cale_relativa/, care reprezint calea relativ spre directorul n care se afl fiierul
destinaie.
l nume_fisier, care reprezint numele fiierului destinaie.
l #nume_ancora, unde nume_ancora este numele unei ancore definit n fiierul
destinaie prin <a name = nume_ancora>. Acest ultim termen este corect pentru
metoda de acces http://.
Observaie:
l Nu toate componentele enumerate anterior sunt necesare n construcia unei adrese URL.
Componentele care lipsesc iau valori prestabilite rezultate din context.
Exemple de adrese URL:
1. http://www.edu.ro/news/index.html#ancora1, unde:
l http:// identific protocolul;
163
l www.edu.ro identific sistemul numit www din domeniul edu.ro;
l Dac directorul rdcin pentru serviciul http pe calculatorul www.edu.ro este /etc/
httpd/, atunci /etc/httpd/news/ va reprezenta calea absolut spre directorul n care se
afl fiierul destinaie.
l #ancora1 reprezint o ancor n fiierul destinaie ncepnd cu care se va afia pagina
n browser.
2. ../html/b/pag3.html, unde:
l ../ reprezint directorul printe al directorului curent.
l html/b/ reprezint calea relativ fa de directorul menionat anterior n care se afl
fiierul destinaie.
l pag3.html reprezint fiierul HTML solicitat.
3. #ancora2, unde:
l #ancora2 reprezint o ancor n fiierul HTML curent ncepnd cu care se va reafia
pagina curent n browser.
Anexa D URL
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen
Anexa E Anexa E
Nume de culori Nume de culori

HTML Prin Exemple

Î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 Prin Exemple

Încărcat de

Drepturi de autor:

Formate disponibile

Cuprins Cuprins

S-ar putea să vă placă și