2 cursul 2

19
Tehnologii WEB Cursul 2 Notiuni introductive Tehnologiile utilizate în aplicaţiile Web reprezintă în general, acele limbaje de programare utilizate la crearea de site-uri web complexe, interactive, al căror concept presupune stăpânirea cât 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. Câteva aplicaţii Web întalnite mai des sunt: • portal-uri • forum-uri • magazine virtuale • formulare de înscriere • licitaţii on-line, etc. Acum câţiva ani, tehnologiile Web erau folosite doar de marile companii datorită, în principal, costurilor ridicate ale licenţelor programelor de dezvoltare. În prezent, datorită dezvoltării tot mai accentuate a soluţiilor Open Source, oricine îşi poate permite realizarea de aplicaţii web. Se pot enumera o serie de tehnologii folosite mai des în programarea aplicaţiilor web dinamice, şi anume: html - Apărut la începutul anilor '90, datorită lipsei unui limbaj universal care să permită publicarea informaţiei la nivel global, html a determinat dezvoltarea spectaculoasă a Internetului. Marcajele de tip html din cadrul documentului spun browserului cum să afişeze conţinutul util al fişierului; xhtml - reprezintă prescurtarea de la EXtensible HyperText Markup Language (denumirea oficiala a standardului). Practic este un înlocuitor modern al mai vechiului limbaj html;

Upload: octavian-enache

Post on 25-Dec-2015

241 views

Category:

Documents


1 download

DESCRIPTION

curs 2 yehnici

TRANSCRIPT

Tehnologii WEBCursul 2

Notiuni introductive

Tehnologiile utilizate în aplicaţiile Web reprezintă în general, acele limbaje de programare utilizate la crearea de site-uri web complexe, interactive, al căror concept presupune stăpânirea cât 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.

Câteva aplicaţii Web întalnite mai des sunt:• portal-uri• forum-uri• magazine virtuale• formulare de înscriere• licitaţii on-line, etc.

Acum câţiva ani, tehnologiile Web erau folosite doar de marile companii datorită, în principal, costurilor ridicate ale licenţelor programelor de dezvoltare.

În prezent, datorită dezvoltării tot mai accentuate a soluţiilor Open Source, oricine îşi poate permite realizarea de aplicaţii web.

Se pot enumera o serie de tehnologii folosite mai des în programarea aplicaţiilor web dinamice, şi anume:

• html- Apărut la începutul anilor '90, datorită lipsei unui limbaj universal care să permită publicarea informaţiei la nivel global, html a determinat dezvoltarea spectaculoasă a Internetului. Marcajele de tip html din cadrul documentului spun browserului cum să afişeze conţinutul util al fişierului;

• xhtml - reprezintă prescurtarea de la EXtensible HyperText Markup Language (denumirea oficiala a standardului). Practic este un înlocuitor modern al mai vechiului limbaj html;

• css - Fişierul CSS (cascading style sheet - foi de stil în cascadă). Un fişier CSS este un fişier text cu extensia ".css" definind stiluri pentru paginile html. Fişierele CSS permit stilizarea în bloc a documentelor html cu un efort semnificativ mai mic decât în cazul stilizării elementelor de pagină în cadrul fiecărui document html în parte, prin intermediul atributelor tagurilor.

• javascript - este un limbaj de scripting dezvoltat la origine de Netscape, permiţând scrierea de secvenţe de program care se execută la apariţia unui eveniment utilizator.

• flash - este un mediu de lucru dezvoltat de compania Macromedia; cu ajutorul FLASH-ului se poate realiza un design de calitate, conţinut interactiv, animaţii profesionale.

• mysql - este un sistem de gestiune a bazelor de date relaţionale, 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ă bineînţeles pe platforme Windows. Acesta poate fi scris în orice limbaj cu suport pentru dll-uri.

• php şi asp apărute în 1994, respectiv 1996, sunt două limbaje puternice care au adus o schimbare în design-ul aplicaţiilor web. Acestea, deşi sunt diferite, au totuşi o serie de similarităţi: 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 aplicaţiilor web ce permite crearea acestor aplicaţii 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 aplicaţiei de partea de interfaţă utilizator, performanţa

• asp.net - este o nouă tehnologie pentru aplicaţii web elaborată de Microsoft, dar despre care nu se poate spune dacă este o urmare a ASP-ului, cu toate că păstrează 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, conţinând 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 aplicaţii 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 atât structura documentului, cât şi aspectul acestuia.

O etichetă (tag) este un identificator care furnizează browser-ului instrucţiuni 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 conţine informaţii generale referitoare la document, cum ar fi titlul documentului, autorul acestuia etc.

b) Corpul documentului, care conţine textul propriuzis al documentului, precum şi elementele specifice de descriere a formatului acestuia.

În antet este recomandat să precizaţi titlul documentului, care va fi afişat în bara titlu a ferestrei browser-ului. Pentru a preciza titlul documentului, care nu poate depăşi 64 de caractere, se utilizează în secţiunea antet etichetele pereche <title> şi </title>, între care se scrie titlul documentului.

De exemplu: Putem scrie aceste etichete în aplicaţia 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:

EXERCIŢIU:Pasul 1: Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul 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: Salvaţi documentul cu numele Prim.html, utilizând opţiunea Save As din

meniul File!Pasul 3: Lansaţi în execuţie Internet Explorer.

Vizualizaţi pagina Web creată, apelând opţiunea Open . . . din meniul File al ferestrei browser-ului (în fereastra de dialog care va apărea pe ecran trebuie să specificaţi complet pagina pe care doriţi să o vizualizaţi - deci introduceţi calea, numele şi extensia fişierului ce o conţine).

Elementul <body> admite următoarele atribute:

BACKGROUND=URLURL este un şir de caractere ce reprezintă adresa Web a unei imagini care va fi

utilizată de către browser ca fundal (background) pentru document. Dacă imaginea nu ocupa întreaga zonă din fereastra browser-ului destinată vizualizării paginii respective,ea va fi multiplicată, ca într-un mozaic.

BGCOLOR=culoareAtributul BGCOLOR (BackGround COLOR) stabileşte culoarea fundalului (culoarea

zonei din fereastra browser-ului în care este vizualizat documentul). În html culorile se pot specifica în două moduri: utilizând denumiri predefinite asociate unor culori (de exemplu RED semnificând roşu, GREEN verde, BLUE albastru etc.) sau "construind" culori proprii prin combinarea a trei culori de baza - roşu, verde şi albastru (modelul RGB). În acest caz, specificarea unei culori se face indicând în ordinea roşu, verde, albastru trei valori hexazecimale cuprinse între 00 şi FF, câte una pentru fiecare culoare de bază, astfel: #rrggbb.

Se poate specifica culoarea roşie fie prin denumirea predefinită: BGCOLOR=RED, fie utilizând valoarea RGB: BGCOLOR=#FF0000.

TEXT = culoareAtributul TEXT stabileşte culoarea textului.

LINK = culoareAtributul LINK stabileşte culoarea cu care vor fi marcate în text link-urile nevizitate.

VLINK = culoareAtributul VLINK stabileşte culoarea cu care vor fi marcate în text link-urile vizitate.

ALINK = culoareAtributul ALINK stabileşte culoarea cu care va fi marcat în text link-ul activ (cel

asupra căruia este plasat cursorul mouse-ului).

EXERCIŢIU:Editaţi şi vizualizaţi următoarea pagina Web, în care acelaşi text este scris pe un fond

gri în nuanţe care variază de la negru către 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 întâmplă dacă greşim ? 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)

Diferenţele principale dintre cele două tipuri de formatare sunt:• elementele de formatare la nivel de bloc pot conţine alte elemente de formatare (la

nivel de bloc sau la nivel de caracter), în timp ce elementele de formatare la nivel de caracter conţin 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ă veţi apela la facilităţile oferite de stilurile de formatare text (stilurile CSS), deoarece veţi putea aplica acelaşi stil simultan tuturor elementelor din grup.

Formatarea paragrafelor

În tehnoredactare, prin paragraf se înţelege 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 sfârşit </p> fiind opţională.

Descriere:<p> Paragraful 1 </p><p> Paragraful 2 </p>. . .

Efect:Paragraful 1Paragraful 2. . .

Cel mai utilizat atribut admis de eticheta <p> este align, care stabileşte modul de aliniere stânga - dreapta a textului paragrafului.

align = LEFT | CENTER | RIGHT | JUSTIFYSe observă că atributul align admite patru valori predefinite :

LEFT - textul este aliniat la marginea din stângaRIGHT - textul este aliniat la marginea din dreaptaCENTER - textul este centrat (plasat la egală distanţă de marginea din stânga şi cea

din dreapta)JUSTIFY - textul este aliniat şi la stânga şi la dreapta (prin mărirea spaţiului între

cuvinte)

Valoarea implicită a modului de aliniere a textului depinde de direcţia acestuia: dacă textul este scris de la stânga la dreapta, valoarea implicită a modului de aliniere este LEFT; dacă textul este scris de la dreapta la stânga, valoarea implicită a modului de aliniere este RIGHT.

EXEMPLU:Descriere:

<p align=CENTER> Alinierea paragrafelor </p><p align=LEFT> Primul paragraf este aliniat la stânga </p><p align=RIGHT> Al doilea paragraf este aliniat la dreapta </p><p align=JUSTIFY> Al treilea paragraf este aliniat la stânga şi la dreapta, prin

mărirea spatiilor dintre cuvintele de pe aceeaşi linie. </p><p> Ultimul paragraf utilizează modul implicit de aliniere – în cazul nostru

stânga, deoarece direcţia textului este LTR. </p>

Efect:Alinierea paragrafelor

Primul paragraf este aliniat la stângaAl doilea paragraf este aliniat la dreapta

Al treilea paragraf este aliniat la stânga şi la dreapta, prin mărirea spatiilor dintre cuvintele de pe aceeaşi linie.

Ultimul paragraf utilizează modul implicit de aliniere - în cazul nostru Stânga, deoarece direcţia textului este LTR.

Pentru a stabili acelaşi mod de aliniere pentru mai multe paragrafe, trebuie să le grupăm î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 utilizaţi etichete <p> </p> fără conţinut, deoarece majoritatea browser-elor le

ignoră.Dacă doriţi să inseraţi într-un document html o linie vidă, utilizaţi eticheta <br/>.Aceasta va genera un marcaj de sfârşit de linie (caracterele ASCII Carriage Return

/Line Feed).

Utilizarea paragrafelor titlu

Documentele html pot fi structurate pe şase niveluri, existând şase etichete care definesc nivelul paragrafului titlu în structura documentului:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.Etichetele de sfârşit sunt obligatorii.Nivelul delimitat de etichetele <h1> şi </h1> este cel mai important, iar nivelul

delimitat de etichetele <h6> şi </h6> cel mai puţin important.Browser-ul vizualizează de obicei paragrafele titlu mai importante cu litere mai mari

decât cele mai puţin 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 secţiune 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 informaţiilor 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 informaţii referitoare la font, browser-ul va utiliza fontul său implicit.

Atributele admise de eticheta <font> sunt:

SIZE = valoarestabileşte dimensiunea caracterelor. Valoarea dimensiunii fontului poate fi specificată:

• în mod absolut (un număr natural cuprins între 1 şi 7)• sau relativ la dimensiunea curentă a caracterelor:

• dacă valoarea este +n, caracterele vor fi cu n mărimi mai mari• dacă valoarea este -n, caracterele vor fi cu n mărimi mai mici

• Dimensiunea efectivă cu care sunt vizualizate caracterele depinde de browser.

COLOR = culoare

stabileşte culoarea textului.

FACE = listă_fonturiDefineşte o listă de fonturi separate prin virgulă, dintre care browser-ul îl va alege pe

primul disponibil în ordinea preferinţelor.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 sfârşit, 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 ataşa unei pagini o imagine.Forma generală a acestui element este: <img atribute>Atributele sunt:SRC identifică fişierul care conţine imaginea respectivă (de tip .jpg, .gif etc.).Fişierul care conţine imaginea se va găsi într-un folder oarecare (în exemplul următor

el se găseşte în acelaşi folder în care găsim şi fisierul cu extensia .html (cel care conţine pagina). Din acest motiv, sursa nu conţine şi calea, dar, dacă este cazul, calea poate fi conţinută.

ALIGN - tipul de aliniere - reţine 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 fişierul 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>

Observăm că am scris un prim paragraf care nu conţine nici o imagine. Apoi, am scris un paragraf care, la început, conţine o imagine, apoi text. În final, avem un paragraf numai cu text.

Right – dacă ALIGN reţine această valoare, imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas.

Top – numai primul rând al textului este scris în dreapta imaginii, în partea de sus. Apoi, textul continuă după imagine, ocupând întreaga lăţime a ecranului.

Left – dacă ALIGN reţine această valoare, imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas.

Middle – numai primul rând al textului este scris în dreapta imaginii, la jumătatea înălţimii ei. Apoi, textul continuă după imagine, ocupând întreaga lăţime a ecranului.

Bottom – numai primul rând 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ă încărca. Pentru astfel de situaţii este folosit parametrul ALT, unde nume conţine un text (alternativ) care va fi afişat în locul imaginii.

Exemplu:Fie tag-ul img următor şi presupunem că imaginea nu se afişează.<img src=”mihai24.jpg” alt =”Mihai ”>lată ce apare:

height="numar pixeli" - înălţimea imaginii.width="numar pixeli" - lăţimea imaginii.border ="nr_pixeli" - Opţional, imaginea poate fi înconjurată de un chenar.<img src=mihai.jpg"> <img src="mihai.jpg" border=5>

hspace="nr_pixeli"- determină distanţa minimă care separă imaginea de celelalte obiecte pe orizontală.

vspace="nr_pixeli"- determină distanţa minimă care separa imaginea de celelalte obiecte pe verticală.

Inserarea legăturilor în documente HTML

Principala caracteristică a hipertextelor o constituie utilizarea legăturilor (links).Un link este o conexiune către 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 conţine multiple elemente prin intermediul cărora se poate crea o legătură către resurse Web:

1. img (creează o legătură către o imagine) 2. LINK (specifică legături către resurse utile)3. A (creează o legătură către o resursă Web într-un document HTML)4. Applet (creează o legătură către 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 sfârşit </A> va apărea evidenţiat în fereastra browser-ului subliniat, colorat în funcţie de valorile atributelor LINK, VLINK, ALINK sau în funcţie de modul de configurare a browser-ului.

Atributele specifice elementului A sunt: href = URL specifică adresa resursei la care se face legătura.name = şir-de-caractere asociază un nume ancorei curente, astfel încât 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 legătura. Browser-

ul va putea afişa titlul resursei când utilizatorul deplasează mouse-ul deasupra legăturii.

Exemplu 1:Descriere

Informaţii suplimentare in <A HREF="cap5. htm" > Capitolul5 - Inserarea legaturilor in documente HTML </A>.

Efect

În acest exemplu a fost creat un link către documentul HTML cap5.htm. Observaţi că adresa resursei ţintă a fost specificată relativ la locaţia curentă.

Exemplu 2:Descriere

<A name="utcb" href="http://www.utcb.ro">Universitatea Tehnica de Constructii din Bucuresti </A>

În acest exemplu, adresa resursei destinaţie (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 sfârşitul documentului am inserat o legătură către ancora început, care permite utilizatorul să revină în poziţia acestei ancore. Observaţi 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 legătură către documentul HTML Curs.htm. Prin activarea acestei legături se va deschide în fereastra browser-ului documentul Curs.htm, la ancora denumită Link. Observaţi că pentru a specifica drept ţintă o ancoră dintr-un alt document se utilizează notaţia: adresă#nume-ancora.

Exercitiu:Creaţi o legătură astfel încât acţionând printr-un clic pe numele unei persoane să îi

puteţi scrie un mesaj e-mail.Solutie:Pprotocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare se

numeşte mailto. Prin urmare, URL-ul destinaţie constă din mailto: adresă-destinatar.

Elementul LINK

Ca şi elementul A, elementul LINK permite specificarea unor legături către alte documente. Spre deosebire de A, elementul LINK poate fi plasat numai în antetul documentului (în secţiunea HEAD), deci prin urmare corespunzător acestui element nu se afişează nimic în pagina vizualizată de către browser.

Din punct de vedere sintactic, elementul LINK admite aceleaşi atribute ca şi elementul A, dar nu admite etichetă de sfârşit. Prin utilizarea elementului LINK pot fi furnizate diferite informaţii, cum ar fi informaţii despre autor, informaţii 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ă legături în documente HTML se poate face atât în mod absolut, cât şi în mod relativ. În cazul specificării relative a adreselor, se consideră implicit că adresa de bază este locaţia 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. Observaţi că elementul BASE nu admite etichetă de sfârşit.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 legăturii Capitolul 1, browser-ul va încărca documentul de la adresa http://www.utcb.ro/ing/curs/cap1.htm.