Sunteți pe pagina 1din 46

CAPITOLUL 1

NOTIUNI GENERALE

- INTERNET
- HTML
- JAVA
- URL
PROGRAMARE HTML, XML

- 6-
PROGRAMARE HTML, XML

CAPITOLUL I
NOTIUNI GENERALE [13, 28, 78, 77]

1.1 INTERNET

Internet-ul, sau reŃeaua mondială de calculatotore, reprezintă un puternic in-


strument pentru facilitarea afacerilor. TradiŃional, Internet-ul a avut patru ap-
licaŃii principale: poşta electronică, ştiri, conectarea la distanŃă şi transferul
de fişiere. Odată cu amploarea luată de reŃeaua mondială de calculatoare
numărul acestor aplicaŃii este în continuă creştere.
Web-ul (World Wide Web sau WWW – pânza de păianjen mondială), in-
strument care a revoluŃionat accesul la Internet, este o reŃea de calculatoare
bazată pe tehnologiile Internet care permite utilizatorului unui calculator să
acceseze informaŃii aflate pe un alt calculator din reŃea. Fiind un sistem cli-
ent/server, WWW este o colecŃie imensă de documente (numite pagini)
răspândite în toată lumea. Fiecare pagină conŃine link-uri (legături) la alte
pagini. Documentele Web sunt realizate cu ajutorul limbajului HTML (Hyper-
Text Markup Language) si includ text, grafică şi indicatori către alte pagini de
Web. Utilizând HTML se pot crea documente statice. Cu ajutorul limbajului
JavaScript se adaugă dinamism paginilor Web.
Pe langa WWW exista si alte servicii in Internet precum: chat, sevicii de tele-
fonie simpla sau cu imagine, (VoIP), televiziune, jocuri, e-commerce, etc.
JavaScript este un limbaj de programare simplu, asemanator cu limbajul C,
utilizat pentru definirea comportamentului elementelor dintr-o pagină Web.
JavaScript poate specifica, în doar câteva rânduri, răspunsurile la acŃiuni
sau evenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului
într-un anumit punct sau ştergerea unui câmp dintr-un formular.

- 7-
PROGRAMARE HTML, XML

Internet este reŃeaua publică ajunsă la scară planetară. Este alcătuit dintr-
un conglomerat de reŃele de diverse complexităŃi, de la cele multinaŃionale la
cele regionale sau zonale, toate vorbind o aceeaşi limbă, statuată de familia
de protocoale TC/IP.
Internet-ul a crescut extrem de rapid. Dacă in 1981 erau doar 213 calcula-
toare gazdă în cadrul reŃelei, prin 1990, avea cca 320 000 calculatoare
gazdă, ajungând în 1993 la cca 2,1 milioane. Acum, numărul calculatoarelor
gazdă a explodat practic, în plină eră a sistemului Web.
Principiul director care a făcut reteaua publică Internet atât de populară este
cel al adoptării unor standarde deschise.
Pe lânga stiva TCP/IP obligatorie, în memoria staŃiei de lucru, vor mai fi
programe sau “servicii TCP/IP” ca de exemplu: e-mail, ftp, telnet, archie, go-
pher, WAIS, finger, WWW, etc.
Internet poate fi definit astfel:
Numele propriu Internet (scris cu majusculă) se referă la reteaua
mondială unică de calculatoare interconectate prin protocoalele
(regulile) de comunicare Transmission Control Protocol şi Internet
Protocol, numite pe scurt TCP/IP. Cuvântul "Internet" provine din îm-
preunarea artificială şi parŃială a două cuvinte englezeşti: intercon-
nected = interconectat şi network = reŃea [wiki].
Naşterea, în martie 1989 şi creşterea sistemului World Wide Web a schim-
bat practic felul de comunicare al majorităŃi utilizatorilor planetei. Tim
Barners-Lee, s-a gândit să uşureze modul de comunicare al celor neiniŃiaŃi,
si in 1992 a proiectat şi implementat un sistem care să permită legături şi
asocieri multiple între documente. Sistemul constă dintr-un program interac-
tiv numit browser care ajută la “răsfoirea” acestui păienjeniş de documente,
utilizând legăturile dintre ele (links).
In ianuarie 1993, existau aproximativ 50 de servere Web sau Web sites.
Toate foloseau acelaşi protocol pentru hipertexte, cunoscut sub acronimul

- 8-
PROGRAMARE HTML, XML

HTTP (HyperText Transfer Protocol ). HTTP este un protocol, adica un set


de reguli “ştiut” de protagoniştii celui care îl întrebuinŃează, respectiv două
programe care dialoghează, clientul pe de o parte şi server-ul Web pe de
alta. O tranzacŃie sub protocolul HTTP trece prin 4 faze: conectarea, cere-
rea, răspunsul şi închiderea. În cursul acestor faze clientul caută să contac-
teze server-ul Web:
- Dacă tentativa eşuează, apare o casetă de dialog care anunta: “conexi-
unea nu a putut fi stabilită”
- Dacă tentativa reuşeşte, clientul emite o cerere către server-ul Web
(alias server-ul http), care contine obiectul cerut şi protocolul pe baza că-
ruia trebuie să-i răspundă server-ul respectiv.
o Dacă server-ul http prelucrează cererea, el va pregăti răspunsul,
o Daca nu, apare mesaj de eroare.
Vom numi “obiecte” piesele de informaŃie care împreună alcătuiesc răspun-
sul la cerere. Pe măsura sosirii unui obiect acesta este afişat.

1.2 HTML

HTML este un limbaj simplu de descriere a documentelor. Limbajul va avea


ca “output” un fişier de tip text, ce poate fi prelucrat cu cel mai simplu editor.
Comenzile HTML se insereaza în jurul blocurilor de text dintr-un document
WWW, pentru a descrie tipul textului: diferite niveluri de antet, paragraf sim-
plu, header sau footer, etc. Există şi alte comenzi ce permit specificarea
legăturilor către diferite documente sau către alt text din acelaşi document şi
de asemenea comenzi care permit importul altor medii (sunet, imagine, ani-
maŃie). Clientul browser primeşte documentul de la server-ul WWW, inter-
pretează comenzile HTML şi formatează fiecare structura din document în
modul cel mai favorabil posibil pentru monitorul respectiv.
Limbajul poate fi definit astfel:

- 9-
PROGRAMARE HTML, XML

HyperText Markup Language (HTML) este un limbaj de marcare


utilizat pentru crearea paginilor web ce pot fi afişate într-un browser
(sau navigator). Scopul HTML este mai degrabă prezentarea
informaŃiilor – paragrafe, fonturi, tabele ş.a.m.d. – decât descrierea
semanticii documentului. [wiki].

SpecificaŃiile HTML sunt dictate de World Wide Web Consortium (W3C).

1.3 JAVA

Java [77] este un limbaj orientat spre obiecte creat de Sun Microsystem,
destinat mediului de reŃea, robust, care oferă un acces securizat la infor-
maŃie, neutru din punct de vedere architectural, portabil, prevăzut şi cu me-
canismul de multi threading. Cu el se obtin aplicaŃii, denumite în engleză ap-
plets. Orice browser existent azi ştie să interpreteze programe Java, în sen-
sul că printre componentele sale suplimentare (plug-ins), conŃine şi acest
interpretor al codului intermediar sub care “circula” applet-urile. Java conferă
interactiviate Web-ului ca şi JavaScript. Java economiseşte munca de scri-
ere a programului. Întocmai ca munca unui stilist care creează modele în in-
dustria textilă şi în programare găsim obiecte şi clase gata făcute de pro-
gram, pe care le includem în programele realizate cu Java. Fară să avem
cunostinte de programare putem interacŃiona cu mediul şi astfel impresiona
pe cei ce vizitează pagina utilizînd o serie de efecte de animaŃie sau sonore.
Java este primul limbaj de programare dezvoltat pentru mediul de reŃea, un
limbaj de nivel înalt, precum C++. Limbajul contine o colecŃie de rutine pen-
tru protocoalele TCP/IP cum ar fi HTTP sau FTP. Applet-ul Java poate înle-
sni accesul oriunde în Internet, prin sistemul URL (Universe Resource Loca-
tor). Compilatorul Java va genera un aşa-zis cod neutru, de fapt un fişier
obiect, care nu conŃine instructiuni maşină. Din această cauză se spune că
este arhitecture-neutral , adică independent de arhitectură. Cel care face
- 10 -
PROGRAMARE HTML, XML

translaŃia din acest cod intermediar în codul maşină propriu platformei este
aşa numitul just-in-time compiler, un program de interpretare a codului in-
termediar. Pentru fiecare dintre platforme, acesta va genera instrucŃiunile
maşină specifice, chiar la momentul încarcarii aplicaŃiei compilate cu Java,
adică applet-ului.
Pentru a putea lucra cu HTML, Java sau JavaScript, trebuie să ştim ce este
un URL.

1.4 URL

URL sunt iniŃialele cuvintelor Uniform Resource Locator - mijlocul de local-


izare a unei resurse în Internet, adică a unui calculator gazdă din mediul
Web. El poate fi considerat drept un fel de căsuŃă poştală sau o adresă de
post restant.
Fiecare mesaj URL permite browser-ului să intre în legatură cu un server
Web, spre a avea acces la tot felul de fişiere, ajuta la identificarea paginii
anume cautată, adresează o resursă şi, în plus, indică metoda prin care se
poate accesa resursa respectivă.
Forma generală a marcajului URL este:
metoda de acces://nume-server/specificaŃia-de-cale/nume-fisier.html
ex: http://ro.wikipedia.org/wiki/JAVA
URL-ul este un caz particular al unei specificaŃii mai ample numita URI
(Uniform Resource Identifier), specificaŃie a W3C. Schema folosită este:
<protocol>://<nume_DNS>/<nume_local>
unde
• protocol este protocolul folosit (de cele mai multe ori http),
• nume_DNS este numele domeniului pe care se află resursa,
• nume_local este format din calea şi numele resursei de pe discul lo-
cal. [wiki].

- 11 -
PROGRAMARE HTML, XML

În mediul Web protocolul standard este:


- http, cu varianta sa care asigură transferul securizat, întâlnită sub pres-
curtarea https, s de la secure shell.
Sunt şi alte protocoale, spre exemplu:
- ftp, protocolul de transfer al fisierelor (file transport protocol). Prin FTP
sunt accesibile milioane de fişiere din Internet. Un URL de tip FTP are
forma următoare: ftp://gazdă/cale-director;
- news, pentru acces in Usenet newsgroup (adică la unul din cluburile de
discuŃii axate pe cele mai diferite domenii);
- gopher, acces la un serviciu de tip cautare pe bază de indecşi şi meniuri
cu opŃiuni selectabile prin cifre şi litere;
- telnet, accesul la un calculator sub forma sesiunii clasice de lucru sub
UNIX, argumentele cozii telnet referindu-se la denumirea sesiunii sub
care se lucrează, la parola de acces (password) şi la ce calculator gazdă
(host), sub forma: user:password@host;

- 12 -
PROGRAMARE HTML, XML

CAPITOLUL II
MARCAJE DE FORMATARE
A DOCUMENTULUI HTML [13, 28, 30, 32]

2.1 MARCAJUL <HTML>

Limbajul de Marcare HiperText (HyperText Markup Language - HTML) este


un set de coduri speciale care se inserează într-un text, pentru a adăuga
informaŃii despre formatare şi despre legături. HTML se bazează pe Limbajul
Generalizat Standard de Marcare (Standard Generalized Markup Language
- SGML ).
Prin convenŃie, toate informaŃiile HTML:
- încep cu o paranteză unghiulară deschisă (<)
- se termină cu o paranteză unghiulară închisă (>)
Aceste paranteze se numesc tag-uri, marcaje sau etichete .
Exemplu, <HTML> -.Acest marcaj comunică unui interpretor HTML (program
de navigare - browser) că documentul este scris şi formatat în limbajul
HTML standard.
Deşi multe marcaje HTML sunt unităŃi de sine stătătoare, unele din ele
sunt perechi, având controale de început şi sfârşit. Marcajul <HTML> este
de tip pereche:
- marcajul de început <HTML> se numeşte marcaj de deschidere.
- marcajul de închidere se adauga la sfârşitul documentului, este la fel ca
marcajul de deschidere, dar este precedat de /: </HTML>.
Marcajele HTML nu Ńin seama de litere mari sau mici.
Documentul HTML este format din blocuri, marcajul <HTML>, </HTML>
reprezentand blocul cel mai cuprinzator sau blocul exterior.

- 13 -
PROGRAMARE HTML, XML

2.2 MARCAJELE <HEAD> ŞI <BODY>

Orice document HTML este împărŃit în două secŃiuni:


- informaŃia care va fi tipărită în antet
- corpul propriu-zis al mesajului.
Similar, fişierele HTML sunt de obicei împărŃite în două secŃiuni:
- antetul (sau header-ul) care conŃine informaŃia introductivă de formatare
a paginii
- corpul mesajului (sau body).
Pentru a delimita fiecare secŃiune se utilizeză marcajele pereche <HEAD>
</HEAD> şi respectiv <BODY> </BODY>.
de respectiva pagina Web.
<HEAD> </HEAD> şi respectiv <BODY> </BODY> sunt doua blocuri stan-
dard ale documentului HTML. Blocul exterior cuprinde aceste doua blocuri
standard.
<HEAD> - intre aceste tag-uri se scriu, langa titlul paginii, diverse informatii
folositoare pentru browser-ul de internet.
</HEAD> - tag-ul de incheiere al tag-ului <HEAD>
<BODY> - tag-ul de inceput continutul paginii web.
</BODY> - tag-ul de incheiere al informatiilor cuprinse in pagina WEB. In-
formatiile scrise in afara marcajului <BODY></BODY> nu vor mai fi afisate
de brouser.
Cea mai simpla modalitate de a
scrie un fisier HTML este sa se
deschida un editor de text
simplu, ex. NOTE PAD in care
sa se tasteze codul HTML.
Exemplu de utilizare a marcajelor pereche: html, head si body.

- 14 -
PROGRAMARE HTML, XML

Pentru a nu uita sa inchizi toate tag-urile pe care le-ai deschis este indicat sa
scrii dupa fiecare tag deschis si tag-ul de incheiere (in cazul in care tag-urile
sunt pereche), si apoi sa completezi informatiile din interiorul acestora.
Salvarea fisierului HTML creat se face
astfel:
- meniul File
- comanda Save As,
- se da nume documentului si se pune
extensia htm.
- Apoi butonul Save.
Marcajele pot avea diferite atribute sau proprietati, care se scriu numai in
tag-ul de inceput. Atributele au valori implicite si daca nu se specifica nimic
de catre proiectantul paginii web, brauser-ul va utiliza automat valorile im-
plicite Daca un tag nu are nici un atribut, atunci browser-ul va lua in consid-
erare valorile implicite ale tag-ului respectiv.
Exemplu de atribut al marcajului <BODY></BODY>:

- 15 -
PROGRAMARE HTML, XML

2.3 MARCAJUL <P>

Un element situat între marcajul de deschidere şi cel de închidere capătă


atributul acelui marcaj.
Cele mai folosite marcaje specifică faptul că se vrea trecerea la un nou
paragraf sau la o nouă linie. Există diverse variante ale acestora, dar se pot
crea documente Web lizibile şi utilizând doar două marcaje: <P> si <BR>.
Marcajul <P> este utilizat pentru trecerea la un nou paragraf .
Exemplu de utilizare a marcajului <p>:

Implicit alinierea textului pentru paragraful nou creat este la stanga. Marca-
jul <p> poate contine si atribute de aliniere, astfel:
- <p align=”right”> va alinia textul la dreapta
- <p align=”center”> va centra textul
- <p align=”justify”> va aseza centrul dintr-o margine in cealalta a paginii
web .
In exemplul urmator textul va fi centrat.

- 16 -
PROGRAMARE HTML, XML

2.4 MARCAJUL <BR>

Marcajul <BR> este utizat pentru trecerea la linie nouă (break). Deosebirea
dintre marcajul <BR> si marcajul <P> este ca prin utilizarea lui <BR> se
trece pe urmatorul rand, iar prin utilizarea lui <P> se ltrece la urmatorul rand
si se lasa un rand liber intre texte.
Sa revenim la primulexemplu de la marcajul <P>. Se vor folosi ambele tag-
uri, <BR> si <P>, pentru a se vedea diferenta dinre ele.
Ca orice marcaj, <BR> poate apărea oriunde în text, inclusiv la sfârşitul liniei
ce urmeaza a fi întrerupta. Deoarece marcajele HTML nu Ńin seama de lite-
rele mari sau mici, înseamnă că <BR> şi <br> sau chiar <bR> sunt exact la
fel.

- 17 -
PROGRAMARE HTML, XML

2.5 MARCAJUL <PRE>

Marcajul <PRE> sau marcajul de informaŃie preformatată este şi el de tip


pereche, deci acŃionează asupra oricarui număr de linii şi trebuie încheiat cu
</PRE>.

Exemplu de text fara marcajul <pre> :


Se observa ca oricate spatii ar fi, browser-ul va pastra doar unul, pierzand
astfel preformatarea.
Reluand exemplul cu marcajul <pre>, se obtine textul preformatat dorit.

- 18 -
PROGRAMARE HTML, XML

Un alt exemplu de text preformatat ar fi introducerea in pagina web a expli-


catiei: “Marcajul <BODY> </BODY> contine in interiorul sau informatiile
prezentate de respectiva pagina Web” . Preformatarea in acest caz va fi
diferita, astfel, utilizand sau nu marcajul <pre></pre> textul va arata :

Interpretorul nu va afisa marcajul <BODY> </BODY>, deoarece va incerca


sa-l interpreteze la nivel de limbaj. Pentru a-l afisa ca text, cele doua carac-
tere < si > vor fi inlocuite cu &lt; si &gt; .

- 19 -
PROGRAMARE HTML, XML

2.6 MARCAJUL <TITLE>

Pentru ca pagina de
Web să arate mai elevat
ii putem da un titlu
adecvat, folosind marca-
jul <TITLE>. Titlul apare
de obicei pe bara de sus
a ferestrei afişate de
calculator. Marcajul <TITLE> permite definirea titlului documentului. Este un
marcaj pereche şi apare în cadrul blocului de informaŃii <HEAD> </HEAD>,
ca in exemplul
urmator:
<HEAD>
<TITLE></TITLE>
</HEAD>
Textul din
<TITLE> este
folosit şi ca
informaŃie de legătură atunci când utilizatorul salvează un document Web
într-o listă de pagini (bookmark) sau listă favorită. Astfel, un <TITLE> semni-
ficativ pentru fiecare pagină creată poate fi de un real ajutor. In exemplu
apare si marcajul <PRE></PRE> care in acest caz nu are un rol anume dar
prezenta lui dupa cum se observa nu supara interpretorul.

2.7 MARCAJUL <ADRESS>


Aşa cum titlul este plasat în antetul fiecărui document Web, unele informaŃii
sunt plasate de obicei la sfârşit, de exemplu cele legate de datele de contact

- 20 -
PROGRAMARE HTML, XML

ale autorului paginii. Marcajul utilizat pentru asemenea informaŃii de contact


este de obicei <ADRESS> . Acesta este un marcaj pereche si are formatul:
<ADRESS> informaŃii_de_adresă</ADRESS>.

2.8 MARCAJUL <H>

InformaŃiile de formatare
discutate până acum permit
crearea de documente
atractive. Dacă pagina trebuie
organizată în secŃiuni sau

- 21 -
PROGRAMARE HTML, XML

chiar subsecŃiuni, fiecare nivel de subtitlu are un control de deschidere şi


unul de închidere. Marcajul pentru nivelul cel mai înalt este <H1> iar pentru
nivelul cel mai scăzut este <H6>. Pentru a specifica un subtitlu pe nivelul cel
mai de sus, se utilizează <H1>Primul nivel de subtitlu</H1>.

2.9 MARCAJUL <HR>

Un marcaj HTML util pentru organizarea vizuală a documentului este marca-


jul de riglă orizontală: <HR>. Plasat oriunde într-un document Web, acesta
produce o linie subŃire orizontală afişată pe întrega lăŃime a paginii care
poate fi folosită de mai multe ori într-un document Web. Utilizat judicios,
marcajul <HR> este extrem de util pentru crearea paginilor interesante. O
listă a marcajelor de bază HTML se găseşte în Anexa 1.

- 22 -
PROGRAMARE HTML, XML

Dintre atributele tag-ului <HR> se pot enumera:


- ALIGN - alinierea liniei (left, center, right)
- COLOR - culoarea liniei,
- SIZE - grosimea liniei
- WIDTH - lungimea liniei
Exemplu de utilizare a atributelor tag-ului :
<HR COLOR="#00ffff" WIDTH="25%" SIZE="5%" ALIGN="center">
Culorile folosite in prezentarea paginilor WEB in multe situatii se poate sa
nu coincide cu ceea ce utilizatorii vor vedea la deschiderea paginii. In litera-
ture de specialitate, exista liste cu culorile recunoscute de brauser-e in gen-
eral. Anexa 2 cuprinde lista acestor culori.

- 23 -
PROGRAMARE HTML, XML

- 24 -
PROGRAMARE HTML, XML

CAPITOLUL III
MARCAJE DE FORMATARE A TEXTULUI
[13, 28, 32, 88, 77]

3.1 MARCAJELE <I> SI <B>

Una din cele mai importante


caracteristici in tehnoredactare
este utilizarea diverselor fonturi şi
stiluri.
Formatarea îngroşată şi înclinată
necesită marcaje HTML pereche:

- Marcajul de formatare italică (înclinată) este <I> </I>;


- Marcajul de formatare îngroşată (bold) este <B> </B>.
ObservaŃie: imediat după paranteza unghiulară deschisă a unui marcaj de
formatare HTML se scrie codul de formatare; nu sunt permise spaŃii.
- 25 -
PROGRAMARE HTML, XML

3.2 MARCAJUL <U>

Marcajul de subliniere este <U>, cu marcajul pereche </U>.


Este un marcaj rar folosit.

3.3 MARCAJUL <TT>

Marcajul monospatiu este <TT>, cu marcajul pereche </TT>;


Denumirea de monospaŃiu provine de la faptul că fiecare literă dintr-un font
de acest tip ocupă exact aceeaşi lăŃime, chiar dacă litera respectivă este
destul de îngustă. Textul scris cu un font monospaŃiu seamănă cu un text
scris la maşină.

- 26 -
PROGRAMARE HTML, XML

3.4 MARCAJELE <SUP> SI <SUB>

Indicii superiori (superscript) sunt definiŃi prin <SUP> şi </SUP>, iar cei infe-
riori (subscript) prin <SUB> şi </SUB>.

3.5 MARCAJUL <STRIKE>

Textul poate fi “tăiat” utilizând <STRIKE>, cu marcajul pereche </STRIKE>.


Este un marcaj rar folosit.

3.6 MARCAJUL <FONT>

O extensie a limbajului HTML care permite modificarea dimensiunii, culorii


si a corpului de literă al fontului utilizat. Dimensiunile fonturilor HTML variază
de la 1 la 7, 1 fiind cel mai mic, iar 7 cel mai mare. Toate caracteristicile fon-
tului se obtin prin diverse atribute ale marcajului <FONT>.

- 27 -
PROGRAMARE HTML, XML

Atributele marcajelor HTML se specifică, de obicei, prin perechi de forma


nume=valoare. Pentru a modifica dimensiunea unei porŃiuni de text se va
folosi formatarea:
<FONT SIZE=7>HTML</FONT> .
In exemplul anterior cuvăntul HTML va fi afişat cu cea mai mare dimensiune
posibilă a programului de navigare. Alte exemple pot fi văzute în continuare:

Marcajul de închidere </FONT> nu trebuie să includă atributele marcajului


de deschidere (nu a fost nevoie de </FONT SIZE=7> pentru a încheia textul
scris cu font mare). Fontul implicit al majorităŃii programelor de navigare este
SIZE=3.
In exemplul anterior se poate observa utilizarea marcajului basefont care a
pernis apoi specificarea atributelor de la valorile 1,…,7 la valorile -1, sau -4
in functie de dimensiunea fontului dorit si a fontului de baza, diferit in acest
caz de fontul implicit.
Analog se poate specifica o culoare pentru o porŃiune de text, prin folosirea
atributului color al marcajului <FONT>. SecvenŃa:
<FONT COLOR=GREEN>HTML</FONT>
va afişa textul respectiv (“HTML”) cu culoare specificată.
O proprietate utilă a limbajului de marcare pentru marcaje cu atribute este
posibilitatea specificării mai multor atribute în acelaşi marcaj. Dacă se

- 28 -
PROGRAMARE HTML, XML

doreşte un marcaj mic şi albastru, de exemplu, se poate utiliza secvenŃa


<FONT SIZE=1 COLOR=BLUE> HTML</FONT>. Nu contează ordinea în
care se specifică perechile nume=valoare, astfel <FONT COLOR=BLUE
SIZE=1 > este identic, din punctul de vedere al programului de navigare, cu
<FONT SIZE=1 COLOR= BLUE >.

In afara dimensiunii si culorii se poate specifica si corpul de litera utilizand


<FONT FACE=”arial”> spre exemplu pentru fontul arial.
Un exemplu concludent este următorul:

Limbajul HTML permite, pe lângă directivele de stil specifice şi aşa numitele


stiluri logice care permit definirea unor evidenŃieri ale textului. Cele mai

- 29 -
PROGRAMARE HTML, XML

cunoscute stiluri logice sunt <EM> </EM> pentru evidenŃiere text cu stil cur-
siv şi <STRONG> </STRONG> pentru evidenŃiere puternică cu stil aldin .
In exemplul urmator este prezentat stilul logic <EM></EM>.

În standardul HTML sunt specificate multe alte marcaje logice, mai rar
folosite , printre care:
<CITE> </CITE> Citare bibliografică (afisarea in stil cursv a unei
referinte)
<CODE> </CODE> Listing de program
<DFN> </DFN> DefiniŃie de cuvânt
<KBD> </KBD> Text de la tastatură
<SAMP> </SAMP> Exemplu de date introduse de utilizator
<VAR> </VAR> Program sau variabilă.
Marcajele HTML corespunzătoare acestei secŃiuni se află în Anexă.

- 30 -
PROGRAMARE HTML, XML

- 31 -
PROGRAMARE HTML, XML

ANEXA 1 [70, 84]

Marcajele limbajului HTML

Marcaje de bază
Marcaj Marcaj de SemnificaŃie
HTML închidere
<ADDRESS> </ADDRESS> InformaŃii despre adresă şi despre autor
<BODY> </BODY> Corpul paginii HTML
<BR> Linie nouă
<HEAD> </HEAD> InformaŃie de formatare HTML
<Hn> </Hn> Nivelul de subtitlu al documentului (n= 1-6)
<HR> Riglă orizontală
<HTML> </HTML> Defineşte un fişier în format Web
<P> Paragraf nou
<PRE> </PRE> InformaŃie preformatată

Marcaje logice
Marcaj Marcaj de SemnificaŃie
HTML închidere
<CITE> </CITE> Citare bibliografică
<CODE> </CODE> Listing de program
<DFN> </DFN> DefiniŃie de cuvânt
<KBD> </KBD> Text de la tastatură
<SAMP> </SAMP> Exemplu de date introduse de utilizator
<VAR> </VAR> Program sau variabilă

Marcaje de formatare a textelor


Marcaj Marcaj de SemnificaŃie

- 32 -
PROGRAMARE HTML, XML

HTML închidere
<B> </B> Afişează text îngroşat
<I> </I> Afişează text înclinat
<U> </U> Afişează text subliniat
<TT> </TT> Text cu font monospaŃiu
<CITE> </CITE> Citare bibliografică
<CODE> </CODE> Listing de program
<DFN> </DFN> DefiniŃie de cuvânt
<EM> </EM> Stil logic de evidenŃiere
<KBD> </KBD> Text de la tastatură
<SAMP> </SAMP> Exemplu de date introduse de utilizator
<STRONG> </STRONG> EvidenŃiere logică puternică
<VAR> </VAR> Program sau variabilă
<BASEFONT Specifică dimensiunea implicită a fontului din
pagină
<FONT> </FONT> Specifică atribute ale textului încadrat
Dimensiunea textului este 1:7, cu 7 cea mai
SIZE=n mare
Specifică fontul: a, dacă este disponibil, sau b
FACE=″a,b″
Culoarea textului: fie un nume de culoare, fie
COLOR=s o valoare RGB

Marcaje pentru liste


Marcaj Marcaj de SemnificaŃie
HTML închidere
<DD> Descriere de definiŃie
<DL> </DL> Listă de tip definiŃie

- 33 -
PROGRAMARE HTML, XML

<DT> Termen de definiŃie


<LI> Element de listă
<OL> </OL> Listă ordonată (numerotată)
Tipul numerotării. Valori posibile: A, a, I, I, 1
TYPE=tip
Numărul de început al listei numerotate
START=x
<UL> </UL> Listă neordonată (marcată)
TYPE=forma Forma marcajului. Valori posibile: circle,
square, disc
<!-- --> Comentariu în codul HTML

Marcaje pentru referinte


Marcaj HTML Marcaj SemnificaŃia
de
închidere
<A </A> Marcaj de tip ancoră
HREF=#nume ReferinŃă către o ancoră internă
NAME=nume DefiniŃia unei ancore interne

Marcaje pentru imagini


Marcaj HTML Marcaj SemnificaŃia
de
închidere
<IMG Marcaj de includere a imaginilor
SRC=url Sursa fişierului grafic
ALT=text Alternativă text pentru afişare, daca este ca-
zul

- 34 -
PROGRAMARE HTML, XML

ALIGN=aliniere Aliniere imagine în pagină/alinierea materialu-


lui în jurul imaginii. Valori posibile: top, middle,
bottom, left, right
HEIGHT=x ÎnălŃimea imaginii, în pixeli
WIDTH=x LăŃimea imaginii. În pixeli
BORDER=x Chenarul din jurul imaginii
HSPACE=x SpaŃiu suplimentar orizontal în jurul imaginii
VSPACE=x SpaŃiu suplimentar vertical în jurul imaginii
<BR Linie nouă
CLEAR=opt ForŃează trecerea la marginea specificată.
Valori posibile: left, right, all

Marcaje pentru tabele şi cadre


Marcaj HTML Marcaj de SemnificaŃie
închidere
<TABLE </TABLE> Tabel Web
BORDER=x Chenar în jurul tabelului
CELLPADING=x SpaŃiu suplimentar în interiorul
celulelor tabelului
CELLSPACING=x SpaŃiu suplimentar între ce-
lulele tabelului
WIDTH=x LăŃimea tabelului
FRAME=val Control detaliat al celulelor din
tabel
RULES=val Control detaliat al chenarelor
din tabel
BORDERCOLOR=cu Culoarea chenarului tabelului
loare

- 35 -
PROGRAMARE HTML, XML

BORDERCOLORLIG Culoarea deschisă dintre cele


HT=culoare două culori specificate
BORDERCOLORDA Culoarea închisă dintre cele
RK=culoare două culori specificate
<TR </TR> Linie a tabelului
BGCOLOR=culoare Culoare de fond a întregii linii
ALIGN=aliniere Alinierea celulelor în această
linie (left, center, right)
<TD </TD> Celulă de date a tabelului
BGCOLOR=culoare Culoare de fond a celulei
COLSPAN=x Numărul de coloane pe care se
va întinde această celule de
date
ROWSPAN=x Numărul de linii pe care se va
întinde această celule de date
ALIGN=aliniere Alinierea orizontală a materialu-
lui din celulă. Valori posibile:
left, center, right
VALIGN=aliniere Alinierea verticală a materialu-
lui din celulă. Valori posibile
top, middle, bottom
BACKGROUND=url Specifică imaginea de fond a
celulei
<FRAMESET </FRAMESET> Defineşte împărŃirea paginii în
cadre
COLS=x Numărul şi dimensiunea rela-
tivă a cadrelor pe orizontală
ROWS=x Numărul şi dimensiunea rela-
tivă a cadrelor pe verticală

- 36 -
PROGRAMARE HTML, XML

<FRAME </FRAME> Defineşte un cadru specific


SRC=url URL-ul sursă al cadrului
NAME=nume Numele cadrului(utilizat cu
TARGET=nume ca parte a unui
marcaj ancoră <A>)
SCROLLING=derular Defineşte opŃiuni de derulare.
e Valori posibile: on, off, auto
FRAMEBORDER=x Dimensiunea marginii din jurul
cadrului
<NOFRAMES> </NOFRAMES> SecŃiune a paginii afişată pen-
tru utilizatorii care nu pot vi-
zualiza o pagină cu cadre

Atributele marcajului TABLE


Atribut SemnificaŃie
BORDER=n LăŃimea zonei umbrite din jurul tabelului. Dacă n=0,
se elimină şi caroiajul din interiorul tabelului
CELLSPACING=n SpaŃierea dintre celule
CELLPADDING=n SpaŃierea dintre chenar şi conŃinutul celulei
WIDTH=n LăŃimea dorită, prioritară fată de lăŃimea calculată

Valori pentru atributul <TABLE FRAME=


Valoare SemnificaŃie
VOID Elimină toate muchiile exterioare ale tabelului
ABOVE Afişează o muchie în partea superioară a cadrului tabelului
BELOW Afişează o muchie în partea inferioară a cadrului tabelului
HSIDES Afişează câte o muchie în partea superioară şi inferioară a cad-
rului tabelului
LHS Afişează o muchie în partea stângă a cadrului tabelului

- 37 -
PROGRAMARE HTML, XML

RHS Afişează o muchie în partea dreaptă a cadrului tabelului


VSIDES Afişează o muchie în partea din stânga şi din dreapta a cadru-
lui tabelului
BOX Afişează câte o muchie pe toate laturile cadrului tabelului
BORDER Afişează câte o muchei pe toate laturile cadrului tabelului

Marcaje ce permit îmbunătăŃiri ale tabelelor şi cadrelor


Marcaj HTML Marcaj de SemnificaŃie
închidere
<TABLE
ALIGN=left Aliniază tabelul la marginea din
stânga a paginii, iar textul curge
prin partea dreaptă
ALIGN=right Aliniază tabelul la marginea din
dreapta a paginii, iar textul
curge prin partea stângă
HSPACE=x SpaŃiu suplimentar pe orizontală
în jurul tabelului
VSPACE=x SpaŃiu suplimentar pe verticală
în jurul tabelului
COLS=x Specifică numărul de coloane
ale unui tabel
<TD
NOWRAP Nu permite despărŃirea textului
pe linii în cadrul unri celule
ALIGN=baseline Aliniază celulele de date cu linia
de bază a textului adiacent
ALIGN=caracter Aliniază o coloană faŃă de un
anumit caracter (prestabilit este

- 38 -
PROGRAMARE HTML, XML

″.″)
ALIGN=justify Aliniază atât marginea din
stânga, cât şi din dreapta a unui
tabel
<COLGROUP> </COLGROUP> Specifică un număr de definiŃii
de coloane raelizate cu ajutorul
marcajelo COL
<COL Defineşte o anumită lăŃime de
coloană
WIDTH=x LăŃimea unei coloane
<THEAD> </THEAD> Organizarea tabelelor: acest
marcaj defineşte titlul tabelului
<TBODY> </TBODY> Defineşte corpul tabelului
<FRAMESET
BORDER=x Specifică starea ″on″ sau ″off″
pentru chenarul cadrului (1 sau
0)
FRAMEBORDER=x Specifică mărimea chenarului
FARMESPACING=x Mărimea spaŃiului dintre două
cadre adiacente
<FRAME
MARGINHEIGHT=x SpaŃiul suplimentar de deasupra
şi de dedesubtul unui anumit
cadru
MARGINWIDTH=x SpaŃiul suplimentar de la stânga
şi la dreapta unui anumit cadru
<IFRAME Cadru intern
SRC=url Sursa cadrului
NAME=s Numele ferestrei

- 39 -
PROGRAMARE HTML, XML

HEIGHT=x ÎnălŃimea cadrului înglobat


WIDTH=x LăŃimea cadrului înglobat

Marcaje pentru formulare


Marcaj HTML Marcaj de SemnificaŃia
închidere
<FORM </FORM> Formular HTML interactiv
ACTION=url Programul CGI de pe serverul
care recepŃionează datele
METHOD=metoda Modul în care datele sunt trans-
mise serverului (GET sau
POST)
<INPUT Câmp de text sau alte date de
intrare
TYPE=opŃiune Tipul câmpului de intrare
<INPUT>. Valori posibile:text,
password, checkbox, hidden,
file, radio, submit, reset, image
NAME=nume Numele simbolic al valorii câm-
pului
VALUE=valoare ConŃinutul prestabilit al câmpului
de text
CHECKED=opŃiune Buton/casetă marcată în mod
prestabilit
SIZE=x Numărul de caractere al unui
câmp de text
MAXLENGHT=x Numărul maxim de caractere
acceptate
<SELECT </SELECT> Grup de casete de validare

- 40 -
PROGRAMARE HTML, XML

NAME=nume Numele simbolic al valorii câm-


pului
SIZE=x Numărul de articole de meniu
care se afişează odată (presta-
bilit=1)
MULTIPLE Permite selecŃia unor articole de
meniu multiple
<OPTION Alegere particulară într-un
meniu <SELECT>
VALUE=valoare Valoarea rezultantă a acestei
selecŃii din meniu
<TEXTAREA </TEXTAREA> Câmp de intrare de tip text pe
linii multiple
NAME=nume Numele simbolic al valorii câm-
pului
ROWS=x Numărul de linii al casetei de
text
COLS=x Numărul de coloane (caractere)
pe linie al casetei de text

Marcaje HTML care dispun de atributul TABINDEX


Nume mar- SemnificaŃie
caj
A Marcaj de tip ancoră
AREA Hartă de imagine la client
OBJECT Includerea uniu obiect
INPUT Câmpuri de text, buton de interblocare, casetă de validare
SELECT Meniu derulant sau cu opŃiuni multiple
TEXTAREA Casetă de intrare de tip text pe linii multiple

- 41 -
PROGRAMARE HTML, XML

BUTTON Similar cu INPUT TYPE=button

Alte marcaje pentru formulare


Marcaj HTML Marcaj de SemmnificaŃia
închidere
<INPUT
TYPE=button Buton de uz general
onCLICK=s Scriptul care se execută atunci când
se execută clic pe buton (de regulă,
un script JavaScript)
<LABEL </LABEL> Eticheta asociată unui anumit ele-
ment de formular
FOR=s Specifică elementul asociat etichetei
(se utilizează ID=s în cadrul elemen-
tului)
<FIELDSET </FIELDSET> Împarte formularul în părŃi logice
ALIGN=s Specifică alinierea legendei afişate
(top bottom, left, right)
TABINDEX=x Specifică ordinea elementelor atunci
când utilizatorul apasă tasta Tab
ACCESSKEY=c Specifică tasta care asigură comanda
rapidă de la tastatură asociată unui
anumit element
DISABLED Elementul este inactiv, dar este afişat
pe ecran
READONLY Elementul este afişat pe ecran, dar
nu poate fi editat

Marcaje pentru hărŃi de imagini

- 42 -
PROGRAMARE HTML, XML

Marcaj HTML Marcaj de SemnificaŃie


terminare
<IMG Marcajul de includere a imaginilor
ISMAP Specifică faptul că este o hartă de
imagine pe server
Utilizează harta la client specifi-
USEMAP=nume_harta cată
<MAP> </MAP> Specifică regiunile unei hărŃi de
imagine la client
Numele unei hărŃi de imagine
NAME=#nume_harta
<AREA Defineşte o regiune particulară
într-o hartă de imagine
SHAPE=forma Forma unei regiuni. Valori posi-
bile: rect, circ, point, poly
Coordonatele unei imagini: Val-
COORDS=coordonate orile variază funcŃie de forma
regiunii
HREF=url URL-ul asociat regiunii specificate

- 43 -
PROGRAMARE HTML, XML

ANEXA 2
Culoare Nume culoare Cod culoare
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9

- 44 -
PROGRAMARE HTML, XML

DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080

- 45 -
PROGRAMARE HTML, XML

Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00

- 46 -
PROGRAMARE HTML, XML

LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98

- 47 -
PROGRAMARE HTML, XML

PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080

- 48 -
PROGRAMARE HTML, XML

Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

- 49 -
PROGRAMARE HTML, XML

- 50 -