Tehnologii WEB

Cursul 2
Notiuni introductive
Tehnologiile utilizate n aplicaiile Web reprezint n general, acele limbaje de
programare utilizate la crearea de site-uri web complexe, interactive, al cror concept
presupune stpnirea ct mai detaliat a unor limbaje de scripting sau de programare i baze
de date.
n categoria tehnologii Web se pot include:
a) o multitudine de limbaje de programare, cum ar fi PHP, JavaScript, ASP, etc.
b) iar ca baze de date pot fi utilizate MySQL, MsSQL, Access, ORACLE, etc.
Cteva aplicaii Web ntalnite mai des sunt:
portal-uri
forum-uri
magazine virtuale
formulare de nscriere
licitaii on-line, etc.
Acum civa ani, tehnologiile Web erau folosite doar de marile companii datorit, n
principal, costurilor ridicate ale licenelor programelor de dezvoltare.
n prezent, datorit dezvoltrii tot mai accentuate a soluiilor Open Source, oricine i
poate permite realizarea de aplicaii web.
Se pot enumera o serie de tehnologii folosite mai des n programarea aplicaiilor web
dinamice, i anume:
html- Aprut la nceputul anilor '90, datorit lipsei unui limbaj universal care s
permit publicarea informaiei la nivel global, html a determinat dezvoltarea spectaculoas a
Internetului. Marcajele de tip html din cadrul documentului spun browserului cum s afieze
coninutul util al fiierului;
xhtml - reprezint prescurtarea de la EXtensible HyperText Markup Language
(denumirea oficiala a standardului). Practic este un nlocuitor modern al mai vechiului limbaj
html;
css - Fiierul CSS (cascading style sheet - foi de stil n cascad). Un fiier CSS
este un fiier text cu extensia ".css" definind stiluri pentru paginile html. Fiierele CSS permit
stilizarea n bloc a documentelor html cu un efort semnificativ mai mic dect n cazul stilizrii
elementelor de pagin n cadrul fiecrui document html n parte, prin intermediul atributelor
tagurilor.
javascript - este un limbaj de scripting dezvoltat la origine de Netscape,
permind scrierea de secvene de program care se execut la apariia unui eveniment
utilizator.
flash - este un mediu de lucru dezvoltat de compania Macromedia; cu ajutorul
FLASH-ului se poate realiza un design de calitate, coninut interactiv, animaii profesionale.
mysql - este un sistem de gestiune a bazelor de date relaionale, fiind o
component cheie a limbajului PHP.
cgi - Common Gateway Interface - sunt script-uri scrise n orice limbaj de
programare indiferent dac sunt compilate sau interpretate, script-uri care sunt executate pe
server;

 isapi - Internet Server API - reprezint alternativa celor de la Microsoft la CGI

(Common Gateway Interface), rulabil bineneles pe platforme Windows. Acesta poate fi
scris n orice limbaj cu suport pentru dll-uri.
php i asp aprute n 1994, respectiv 1996, sunt dou limbaje puternice care au
adus o schimbare n design-ul aplicaiilor web. Acestea, dei sunt diferite, au totui o serie de
similariti: ambele sunt interpretate, ambele genereaz scripturi (.php respectiv .asp), care pot
fi combinate cu html, date de tip text, etc. Limbajele ofer suport i pentru lucrul cu baze de
date (MySQL, MsSQL, PostgreSQL, Oracle) - de fapt sunt intens folosite n acest sens.
Limbajul ASP nu este un concept nou ci se bazeaz pe limbajele VBScript i JScript.
Principalul dezavantaj al acestor doua limbaje este viteza. Acestea sunt lente deoarece fiecare
accesare presupune procesarea i interpretarea lor i nu pot construi controale reutilizabile.
jsp - Java Server Pages - reprezint o tehnologie de design al aplicaiilor web ce
permite crearea acestor aplicaii independente de platform. Tehnologia se bazeaz pe
limbajul de programare Java i marcatori XML Avantajul JSP este reprezentat de
administrarea facil, independent de platform, separarea logicii aplicaiei de partea de
interfa utilizator, performana
asp.net - este o nou tehnologie pentru aplicaii web elaborat de Microsoft, dar
despre care nu se poate spune dac este o urmare a ASP-ului, cu toate c pstreaz
compatibilitatea cu acesta.

Limbajul HTML
Html este prescurtarea de la HyperText Markup Language, limbajul utilizat n World
Wide Web pentru descrierea hipertextelor.
Html nu este un limbaj de programare propriuzis, ci doar un limbaj de descriere,
coninnd elemente ce permit construirea paginilor Web.
Documentele html sunt exclusiv de tip text (ASCII); prin urmare ele pot fi editate
direct, prin comenzi specifice sistemului de operare folosit.
De exemplu, pentru crearea unui document html n Windows XP se pot utiliza unul din
editoarele de texte incluse n sistemul de operare (Notepad, Wordpad) sau orice alt editor de
texte.
Documentele descrise n html pot fi vizualizate cu ajutorul unor aplicaii speciale
denumite browser-e, care lucreaz pe diferite tipuri de sisteme de calcul; prin urmare,
documentele html sunt independente de platforma de lucru.
Html utilizeaz pentru descrierea documentelor Web etichete (denumite i tag-uri)
specifice pentru fiecare element descris; etichetele stabilesc att structura documentului, ct i
aspectul acestuia.
O etichet (tag) este un identificator care furnizeaz browser-ului instruciuni de
formatare a documentului. Pentru a fi delimitate, etichetele html sunt ncadrate ntre
paranteze unghiulare (< >).
Structura unui document html
Un document html este delimitat de perechea de etichetele <html> i </html> i este
constituit din:
a) Antetul documentului, delimitat de etichetele <head> i </head>, care conine
informaii generale referitoare la document, cum ar fi titlul documentului, autorul acestuia etc.
b) Corpul documentului, care conine textul propriuzis al documentului, precum i
elementele specifice de descriere a formatului acestuia.

n antet este recomandat s precizai titlul documentului, care va fi afiat n bara

titlu a ferestrei browser-ului. Pentru a preciza titlul documentului, care nu poate depi 64 de
caractere, se utilizeaz n seciunea antet etichetele pereche <title> i </title>, ntre care se
scrie titlul documentului.
De exemplu:
Putem scrie aceste etichete
aplicaia Notepad:

Apoi
putem
vizualiza rezultatul n
browser:

Corpul documentului poate fi

delimitat de: etichetele <body> i
</body> sau (n cazul n care este
descris
structura
cadrelor
din
document) de etichetele pereche
<frameset> i </frameset>.
Astfel, structura general a unui
document html poate fi:

EXERCIIU:
Pasul 1: Lansai n execuie editorul de texte Notepad i introducei urmtorul text,
care reprezint descrierea n limbaj html a unei pagini Web foarte simple:
<html>
<head>
<title> Prima mea pagina Web </title>
</head>
<body bgcolor=GREEN text=RED>
<i> <b>Scriu in fereastra browser-ului un text rosu pe fond verde...</i> </b>
</body>
</html>
Pasul 2: Salvai documentul cu numele Prim.html, utiliznd opiunea Save As din
meniul File!
Pasul 3: Lansai n execuie Internet Explorer.

Vizualizai pagina Web creat, apelnd opiunea Open . . . din meniul File al ferestrei
browser-ului (n fereastra de dialog care va aprea pe ecran trebuie s specificai complet
pagina pe care dorii s o vizualizai - deci introducei calea, numele i extensia fiierului ce o
conine).
Elementul <body> admite urmtoarele atribute:
BACKGROUND=URL
URL este un ir de caractere ce reprezint adresa Web a unei imagini care va fi
utilizat de ctre browser ca fundal (background) pentru document. Dac imaginea nu ocupa
ntreaga zon din fereastra browser-ului destinat vizualizrii paginii respective,ea va fi
multiplicat, ca ntr-un mozaic.
BGCOLOR=culoare
Atributul BGCOLOR (BackGround COLOR) stabilete culoarea fundalului (culoarea
zonei din fereastra browser-ului n care este vizualizat documentul). n html culorile se pot
specifica n dou moduri: utiliznd denumiri predefinite asociate unor culori (de exemplu
RED semnificnd rou, GREEN verde, BLUE albastru etc.) sau "construind" culori proprii
prin combinarea a trei culori de baza - rou, verde i albastru (modelul RGB). n acest caz,
specificarea unei culori se face indicnd n ordinea rou, verde, albastru trei valori
hexazecimale cuprinse ntre 00 i FF, cte una pentru fiecare culoare de baz, astfel: #rrggbb.
Se poate specifica culoarea roie fie prin denumirea predefinit: BGCOLOR=RED, fie
utiliznd valoarea RGB: BGCOLOR=#FF0000.
TEXT = culoare
Atributul TEXT stabilete culoarea textului.
LINK = culoare
Atributul LINK stabilete culoarea cu care vor fi marcate n text link-urile nevizitate.
VLINK = culoare
Atributul VLINK stabilete culoarea cu care vor fi marcate n text link-urile vizitate.
ALINK = culoare
Atributul ALINK stabilete culoarea cu care va fi marcat n text link-ul activ (cel
asupra cruia este plasat cursorul mouse-ului).
EXERCIIU:
Editai i vizualizai urmtoarea pagina Web, n care acelai text este scris pe un fond
gri n nuane care variaz de la negru ctre alb.
<html>
<head>
<title> Test de culoare </title>
</head>
<body bgcolor=#777777>
<font COLOR=#000000> Test de culoare </font>
<font COLOR=#111111> Test de culoare </font>
<font COLOR=#222222> Test de culoare </font>
<font COLOR=#333333> Test de culoare </font>
<font COLOR=#444444> Test de culoare </font>

<font COLOR=#555555> Test de culoare </font>

<font COLOR=#666666> Test de culoare </font>
<font COLOR=#777777> Test de culoare </font>
<font COLOR=#888888> Test de culoare </font>
<font COLOR=#999999> Test de culoare </font>
<font COLOR=#AAAAAA> Test de culoare </font>
<font COLOR=#BBBBBB> Test de culoare </font>
<font COLOR=#CCCCCC> Test de culoare </font>
<font COLOR=#DDDDDD> Test de culoare </font>
<font COLOR=#EEEEEE> Test de culoare </font>
<font COLOR=#FFFFFF> Test de culoare </font>
</body>
</html>
Comentarii html
n cadrul unui document este bine s inserati comentarii, pe care browser-ul nu le va
afisa, dar care pot fi utile celor care citesc sau editeaza documentul. Comentariile html incep
cu <! i se termina cu ->. De exemplu, <! Acesta e un comentariu. Browser-ul nu l "vede"! ->
Comentariile pot fi inserate oriunde n document! Ce se ntmpl dac greim ? Nimic!
Mai exact, nimic grav! Browser-ele ignor elementele care nu respect sintaza html i nu le
interpreteaz.
Formatarea textului
Formatarea textului care apare n corpul unui document html se poate face la:
1. nivel de bloc (block-level)
2. sau la nivel de caracter (text-level sau inline)
Diferenele principale dintre cele dou tipuri de formatare sunt:
elementele de formatare la nivel de bloc pot conine alte elemente de formatare (la
nivel de bloc sau la nivel de caracter), n timp ce elementele de formatare la nivel de caracter
conin doar text sau alte elemente de formatare la nivel de caracter;
elementele de formatare la nivel de bloc ncep de obicei de la linie nou.
Gruparea mai multor elemente html la nivel de bloc se realizeaz cu ajutorul
etichetelor <div> i </div>.
Pentru gruparea mai multor elemente dintr-un bloc la nivel de caracter (inline) se
utilizeaz perechea de etichete <span> i </span>.
Gruparea mai multor elemente prin <div> sau <span> va fi deosebit de util dac vei
apela la facilitile oferite de stilurile de formatare text (stilurile CSS), deoarece vei putea
aplica acelai stil simultan tuturor elementelor din grup.
Formatarea paragrafelor
n tehnoredactare, prin paragraf se nelege o zon de text cuprins ntre dou caractere
de trecere la linie noua denumite NewLine sau Enter).
n html, delimitarea paragrafelor se realizeaz cu ajutorul etichetei <p>, eticheta de
sfrit </p> fiind opional.

Descriere:
<p> Paragraful 1 </p>
<p> Paragraful 2 </p>
...
Efect:
Paragraful 1
Paragraful 2
...
Cel mai utilizat atribut admis de eticheta <p> este align, care stabilete modul de
aliniere stnga - dreapta a textului paragrafului.
align = LEFT | CENTER | RIGHT | JUSTIFY
Se observ c atributul align admite patru valori predefinite :
LEFT - textul este aliniat la marginea din stnga
RIGHT - textul este aliniat la marginea din dreapta
CENTER - textul este centrat (plasat la egal distan de marginea din stnga i cea
din dreapta)
JUSTIFY - textul este aliniat i la stnga i la dreapta (prin mrirea spaiului ntre
cuvinte)
Valoarea implicit a modului de aliniere a textului depinde de direcia acestuia: dac
textul este scris de la stnga la dreapta, valoarea implicit a modului de aliniere este LEFT;
dac textul este scris de la dreapta la stnga, valoarea implicit a modului de aliniere este
RIGHT.
EXEMPLU:
Descriere:
<p align=CENTER> Alinierea paragrafelor </p>
<p align=LEFT> Primul paragraf este aliniat la stnga </p>
<p align=RIGHT> Al doilea paragraf este aliniat la dreapta </p>
<p align=JUSTIFY> Al treilea paragraf este aliniat la stnga i la dreapta, prin
mrirea spatiilor dintre cuvintele de pe aceeai linie. </p>
<p> Ultimul paragraf utilizeaz modul implicit de aliniere n cazul nostru
stnga, deoarece direcia textului este LTR. </p>
Efect:
Alinierea paragrafelor
Primul paragraf este aliniat la stnga
Al doilea paragraf este aliniat la dreapta
Al treilea paragraf este aliniat la stnga i la dreapta, prin mrirea spatiilor dintre
cuvintele de pe aceeai linie.
Ultimul paragraf utilizeaz modul implicit de aliniere - n cazul nostru Stnga,
deoarece direcia textului este LTR.
Pentru a stabili acelai mod de aliniere pentru mai multe paragrafe, trebuie s le
grupm ntr-un singur bloc, cu ajutorul etichetei <div>:
<div align=RIGHT>
<p> . . . Primul paragraf . . . </p>
<p> . . . al doilea paragraf . . . </p>

<p> . . . al treilea paragraf . . . </p>

</div>
Observatie:
Nu utilizai etichete <p> </p> fr coninut, deoarece majoritatea browser-elor le
ignor.
Dac dorii s inserai ntr-un document html o linie vid, utilizai eticheta <br/>.
Aceasta va genera un marcaj de sfrit de linie (caracterele ASCII Carriage Return
/Line Feed).
Utilizarea paragrafelor titlu
Documentele html pot fi structurate pe ase niveluri, existnd ase etichete care
definesc nivelul paragrafului titlu n structura documentului:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Etichetele de sfrit sunt obligatorii.
Nivelul delimitat de etichetele <h1> i </h1> este cel mai important, iar nivelul
delimitat de etichetele <h6> i </h6> cel mai puin important.
Browser-ul vizualizeaz de obicei paragrafele titlu mai importante cu litere mai mari
dect cele mai puin importante.
EXEMPLU
<html>
<head> <title> aaaaaaaaaaaa </title> </head>
<body>
<h1> Internet si retele de calculatoare </h1>
<p> n acest document discutam despre INTERNET</p>
<h2> Retele de calculatoare </h2>
<p> n aceasta seciune analizam principalele tipuri de retele </p>
<h3> Retea de tip BUS </h3>
<p> Retea de tip TOKEN-RING</p>
<h4> Retea de tip magistrala </h4>
<p> Protocol TCP/IP </p>
<h5> Configurarea modem-ului</h5>
<p> Conectarea la distanta ca terminal </p>
<h6> Aplicatia TELNET</h6>
<p> Limbajul html </p>
<p> . . . </p>
</body>
</html>

Efect:

Formatarea la nivel de caracter

Un font este caracterizat de urmatoarele atribute:
culoare (stabilita prin atributul color)
tipul sau stilul (stabilit prin atributul face)
marimea (definita prin atributul size)
marimea in puncte tipografice (stabilita prin atributul point-size)
grosime (definita prin atributul weight)
Toate aceste atribute apartin etichetei, care permite inserarea de blocuri de texte
personalizate.
Precizarea informaiilor referitoare la fontul utilizat de browser pentru vizualizarea
textului se realizeaz cu ajutorul etichetelor pereche <font> i </font>.
Dac n document nu sunt precizate nici un fel de informaii referitoare la font,
browser-ul va utiliza fontul su implicit.
Atributele admise de eticheta <font> sunt:
SIZE = valoare
stabilete dimensiunea caracterelor.
Valoarea dimensiunii fontului poate fi specificat:
n mod absolut (un numr natural cuprins ntre 1 i 7)
sau relativ la dimensiunea curent a caracterelor:
dac valoarea este +n, caracterele vor fi cu n mrimi mai mari
dac valoarea este -n, caracterele vor fi cu n mrimi mai mici
Dimensiunea efectiv cu care sunt vizualizate caracterele depinde de browser.
COLOR = culoare

stabilete culoarea textului.

FACE = list_fonturi
Definete o list de fonturi separate prin virgul, dintre care browser-ul l va alege pe
primul disponibil n ordinea preferinelor.
Dac nici unul din fonturile din list nu este instalat pe calculatorul utilizatorului,
browser-ul va utiliza fontul implicit.
<p align=center> Text de diferite dimensiuni cu fontul COURIER NEW </p>
<p> <font SIZE=1 FACE=COURIER NEW> font COURIER NEW cu dimensiune 1
</font></p>
<p> <font SIZE=2 FACE=COURIER NEW> font COURIER NEW cu dimensiune 2
</font></p>
<p> <font SIZE=3 FACE=COURIER NEW> font COURIER NEW cu dimensiune 3
</font></p>
<p> <font SIZE=4 FACE=COURIER NEW> font COURIER NEW cu dimensiune 4
</font></p>
<p> <font SIZE=5 FACE=COURIER NEW> font COURIER NEW cu dimensiune 5
</font></p>
<p> <font SIZE=6 FACE=COURIER NEW> font COURIER NEW cu dimensiune 6
</font></p>
<p> <font SIZE=7 FACE=COURIER NEW> font COURIER NEW cu dimensiune 7
</font></p>
<p> <font FACE=COURIER NEW> font COURIER NEW cu dimensiune implicita
</font></p>
<p> <font SIZE=+2 FACE=COURIER NEW> font COURIER NEW cu dimensiune
cu 2 marimi mai mare decat dimensiunea implicita </font></p>
<p align=CENTER> Text de diferite dimensiuni cu fontul Arial </font></p>
<p> <font SIZE=3 FACE=Arial> font Arial cu dimensiune 3 </font></p>
<p> <font SIZE=1 FACE=Arial> font Arial cu dimensiune 1 </font></p>
<p> <font FACE=Arial> font Arial cu dimensiune implicita </font></p>
<p> <font SIZE=-2 FACE=Arial> font Arial cu dimensiune cu doua marimi mai mica
decat dimensiunea implicita </font></p>
Aplicarea unor efecte asupra textului
Pentru a aplica unei zone un anumit efect, se incadreaza textul ntre eticheta de nceput
i cea de sfrit, corespunzatoare efectului respectiv.
Cele mai utilizate efecte ce se pot aplica asupta textului n html sunt:
<I> Textul este scris cursiv </I>
<U> Textul este scris subliniat </U>
<B> Textul este scris ingrosat </B>
<BIG> Textul este scris mai mare </BIG>
<SMALL> Textul este scris mai mic </SMALL>
<STRIKE> Textul este scris taiat </STRIKE>

Grosimea unui font

Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei.
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900
(100 pentru fontul cel mai subtire si 900 pentru cel mai gros).
<html>
<head>
<title> Grosimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale. <br/>
<font weight="100">fonturi de grosime 100.</font> <br/>
<font weight="500">fonturi de grosime 500.</font> <br/>
<font weight="900">fonturi de grosime 900.</font>
</body>
</html>

Inserarea imaginilor
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere
pentru fisierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif
JPPEG (Joint photographic Experts Group) cu extensia .jpeg sau .jpg
XPM (X pixMap) cu extensia .xmp
XBM (X BitMap) cu extensia .xbm
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer)
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff
PNG (Portable Network Graphic) cu extensia .png
Cele mai raspandite formate sunt:
GIF (8 biti pentru o culoare, 256 culori posibile) si
JPEG (24 biti pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini
URL ("Uniform Resourse Locator) = identificator unic al resursei este un standard
folosit in identificarea unica a unei resurse in Internet.
Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de
directorul ce contine documentul HTML care face referire la imagine.
Elementul img se utilizeaz pentru a ataa unei pagini o imagine.
Forma general a acestui element este: <img atribute>
Atributele sunt:
SRC identific fiierul care conine imaginea respectiv (de tip .jpg, .gif etc.).
Fiierul care conine imaginea se va gsi ntr-un folder oarecare (n exemplul urmtor
el se gsete n acelai folder n care gsim i fisierul cu extensia .html (cel care conine
pagina). Din acest motiv, sursa nu conine i calea, dar, dac este cazul, calea poate fi
coninut.
ALIGN - tipul de aliniere - reine una din valorile de mai jos i specific browser-ului
modul n care va alinia imaginea n raport cu textul: Right, Left, Top, Middle, Bottom
Fie fiierul text de mai jos (scris n Notepad):

<p> Un paragraf asezat inaintea imaginii</p>

<p> <img src=mihai24.jpg align=right>
Se observ cum se alinieaz imaginii n al doilea paragraf </p>
<p> alt text este scris pentru a evidentia alinierea !!</p>
Observm c am scris un prim paragraf care nu conine nici o imagine. Apoi, am scris
un paragraf care, la nceput, conine o imagine, apoi text. n final, avem un paragraf numai cu
text.
Right dac ALIGN reine aceast valoare, imaginea se aliniaz n dreapta, iar textul
care urmeaz este scris n locul rmas.
Top numai primul rnd al textului este scris n dreapta imaginii, n partea de sus.
Apoi, textul continu dup imagine, ocupnd ntreaga lime a ecranului.
Left dac ALIGN reine aceast valoare, imaginea se aliniaz n stnga, iar textul
care urmeaz este scris n locul rmas.
Middle numai primul rnd al textului este scris n dreapta imaginii, la jumtatea
nlimii ei. Apoi, textul continu dup imagine, ocupnd ntreaga lime a ecranului.
Bottom numai primul rnd al textului este scris n dreapta imaginii, n partea de jos.
Apoi, textul continua dupa imagine, ocupand intreaga latime a ecranului.
alt="nume" - exist posibilitatea ca imaginea s nu sepoat ncrca. Pentru astfel de
situaii este folosit parametrul ALT, unde nume conine un text (alternativ) care va fi afiat n
locul imaginii.
Exemplu:
Fie tag-ul img urmtor i presupunem c imaginea nu se afieaz.
<img src=mihai24.jpg alt =Mihai >
lat ce apare:
height="numar pixeli" - nlimea imaginii.
width="numar pixeli" - limea imaginii.
border ="nr_pixeli" - Opional, imaginea poate fi nconjurat de un chenar.
<img src=mihai.jpg"> <img src="mihai.jpg" border=5>
hspace="nr_pixeli"- determin distana minim care separ imaginea de celelalte
obiecte pe orizontal.
vspace="nr_pixeli"- determin distana minim care separa imaginea de celelalte
obiecte pe vertical.

Inserarea legturilor n documente HTML

Principala caracteristic a hipertextelor o constituie utilizarea legturilor (links).
Un link este o conexiune ctre o alt resurs Web (un alt hipertext sau o imagine, o
secven video sau audio, un program etc.), resurs care poate fi accesat din fereastra
browser-ului printr-un simplu clic.
Limbajul HTML conine multiple elemente prin intermediul crora se poate crea o
legtur ctre resurse Web:
1. img (creeaz o legtur ctre o imagine)
2. LINK (specific legturi ctre resurse utile)
3. A (creeaz o legtur ctre o resurs Web ntr-un document HTML)
4. Applet (creeaz o legtur ctre un program executabil pe calculatorul
utilizatorului)

Elementul A
Pentru a insera un link ntr-un document HTML se utilizeaz elementul A (anchor ancor). Textul cuprins ntre eticheta de nceput <A> i cea de sfrit </A> va aprea
evideniat n fereastra browser-ului subliniat, colorat n funcie de valorile atributelor LINK,
VLINK, ALINK sau n funcie de modul de configurare a browser-ului.
Atributele specifice elementului A sunt:
href = URL specific adresa resursei la care se face legtura.
name = ir-de-caractere asociaz un nume ancorei curente, astfel nct s poat
constitui inta unui alt link. Numele trebuie s fie unic n cadrul documentului.
title = ir-de-caractere asociaz un nume resursei la care se face legtura. Browserul va putea afia titlul resursei cnd utilizatorul deplaseaz mouse-ul deasupra legturii.
Exemplu 1:
Descriere
Informaii suplimentare in <A HREF="cap5. htm" > Capitolul5 - Inserarea
legaturilor in documente HTML </A>.
Efect

n acest exemplu a fost creat un link ctre documentul HTML cap5.htm. Observai c
adresa resursei int a fost specificat relativ la locaia curent.
Exemplu 2:
Descriere
<A name="utcb" href="http://www.utcb.ro">Universitatea Tehnica de Constructii
din Bucuresti </A>
n acest exemplu, adresa resursei destinaie (pagina Web a Universitatea Tehnica de
Constructii din Bucuresti) a fost specificat n mod absolut. Aceast ancor a fost denumit
utcb.
Exemplu 3:
Descriere
<A NAME="nceput"></A>
....
<A HREF="#Inceput">Ia-o de la nceput!</A>
Efect

n exemplul de mai sus am definit o ancor vid, pe care am denumit-o nceput. La

sfritul documentului am inserat o legtur ctre ancora nceput, care permite utilizatorul s
revin n poziia acestei ancore. Observai c n acest ultim caz, pentru specificarea adresei am
utilizat caracterul #, urmat de numele ancorei.
Exemplu 4:
Descriere

<A HREF="Curs.htm#Link"> Curs Retele de calculatoare. Cap. Legaturi in

documente HTML.</A>
Efect

n acest exemplu am definit o legtur ctre documentul HTML Curs.htm. Prin

activarea acestei legturi se va deschide n fereastra browser-ului documentul Curs.htm, la
ancora denumit Link. Observai c pentru a specifica drept int o ancor dintr-un alt
document se utilizeaz notaia: adres#nume-ancora.
Exercitiu:
Creai o legtur astfel nct acionnd printr-un clic pe numele unei persoane s i
putei scrie un mesaj e-mail.
Solutie:
Pprotocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare se
numete mailto. Prin urmare, URL-ul destinaie const din mailto: adres-destinatar.
Elementul LINK
Ca i elementul A, elementul LINK permite specificarea unor legturi ctre alte
documente. Spre deosebire de A, elementul LINK poate fi plasat numai n antetul
documentului (n seciunea HEAD), deci prin urmare corespunztor acestui element nu se
afieaz nimic n pagina vizualizat de ctre browser.
Din punct de vedere sintactic, elementul LINK admite aceleai atribute ca i elementul
A, dar nu admite etichet de sfrit. Prin utilizarea elementului LINK pot fi furnizate diferite
informaii, cum ar fi informaii despre autor, informaii despre versiunile anterioare ale
documentului sau versiuni n alte limbi etc.
Exemplu:
<HEAD>
<TITLE> Capitolul 7 </TITLE>
<LINK TITLE = "Author" HREF = "utcb.ro/ing">
<LINK TITLE = "previous Version" KREF =
"../last/man1.htm">
</HEAD>
Elementul BASE
Specificarea adreselor resurselor Web la care se creeaz legturi n documente HTML
se poate face att n mod absolut, ct i n mod relativ. n cazul specificrii relative a
adreselor, se consider implicit c adresa de baz este locaia curent. Prin intermediul
elementului BASE exist posibilitatea de a specifica explicit adresa de baz a URL-urilor
specificate n mod relativ.
<BASE HREF=URL>
Valoarea atributului URL al etichetei <BASE> trebuie s fie o adres specificat n
mod absolut. Observai c elementul BASE nu admite etichet de sfrit.Dac apare,
elementul BASE trebuie plasat n antetul documentului HTML.
Exemplu:

<HTML>
<HEAD>
<TITLE> Cuprins </TITLE>
<BASE HREF="http://www.utcb.ro/ing">
</HEAD>
<BODY>
...
<A HKEF="curs/cap1.htm"> Capitolul 1 </A>
...
</BODY>
</HTML>
Prin urmare, prin activarea legturii Capitolul 1, browser-ul va ncrca documentul de
la adresa http://www.utcb.ro/ing/curs/cap1.htm.