 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html Limbajul HTML permite creatorilor de pagini Web sa utilizeze, pe langa text, si elemente multimedia, cum ar fi :imagini, secvente video, applet-uri (programe compilate scrise in limbajul Java, care sunt lansate in executie pe calculatorul utilizatorului) |
Limbajul HTML permite creatorilor de pagini Web sa utilizeze, pe langa text, si elemente multimedia, cum ar fi :imagini, secvente video, applet-uri (programe compilate scrise in limbajul Java, care sunt lansate in executie pe calculatorul utilizatorului)
Limbajul HTML permite creatorilor de pagini Web sa utilizeze, pe langa text, si elemente multimedia, cum ar fi :imagini, secvente video, applet-uri (programe compilate scrise in limbajul Java, care sunt lansate in executie pe calculatorul utilizatorului). In primele versiuni ale limbajului HTML erau permise doar imaginile (care puteau fi inserate prin intermediul elementului IMG) si applet-urile scrise in limbajul Java (care puteau fi inserate prin intermediul elementului APPLET). HTML 4.0 introduce elementul OBJECT, care reprezinta o solutie generala pentru inserarea elementelor multimedia in documente HTML.
Elementul IMG
Elementul IMG este specific pentru inserarea unei imagini intr-un document HTML. Elementul IMG nu admite eticheta de sfarsit, prin urmare nu are continut. Specificarea imaginii ce urmeaza a fi inserata si informatiile necesare formatarii acesteia se realizeaza prin intermediul atributelor:
SRC URL
specifica adresa fisierului care contine imaginea. Cele mai utilizate formate de fisiere grafice sunt GIF (Graphic Interchange Format) si JPEG (Joint Photographic Expert's Group), dar si BMP(Bit Map)
ALT = text
specifica un text alternativ, care va fi afisat de browser-ele care nu pot vizualiza imagini.
HEIGHT dimensiune
defineste inaltimea imaginii.
WIDTH dimensiune
defineste latimea imaginii. Dimensiunea se poate exprima atat in numar de pixeli, cat si in procente. In cazul in care dimensiunea este exprimata in procente, procentajul se refera la spatiul disponibil pe orizontala/verticala si nu la dimensiunile originale ale imaginii. Redimensionarea imaginii se realizeaza prin scalare, nu prin decupare.
ALIGN =
valoare
specifica modul de aliniere a imaginii in raport cu textul. Valoarea poate fi:
TOP - partea de sus a imaginii este aliniata in raport cu textul;
MIDDLE - imaginea este aliniata central in raport cu textul;
BOTTOM - partea de jos a imaginii este aliniata in raport cu textul;
LEFT - imaginea este aliniata la marginea din stanga a paginii;
RIGHT - imaginea este aliniata la marginea din dreapta a paginii.
BORDER = numar-pixeli
imaginea va fi incadrata de un chenar cu grosimea specificata in numar de pixeli.
HSPACE = dimensiune specifica spatiul inserat in stanga si in dreapta imaginii.
VSPACE = dimensiune specifica spatiul inserat in partea de sus si in partea de jos a imaginii.
De exemplu:
Descriere
<HTML>
<HEAD>
<TITLE> Un pinguin </TITLE>
</HEAD>
</BODY>
<IMG SRC='pingo.gif' height=135 width=89 ALIGN=MIDDLE
ALT='un pinguin nauc'>
<I> Pe mine m-ati gasit de exemplu? <I>
</BODY>
</HTML>
Efect
Pe mine m-ati gasit de exemplu?
In exemplu am inserat o imagine de dimensiuni specificate, aliniata MIDDLE in raport cu textul. In cazul in care browser-ul nu poate vizualiza imaginea respectiva, va afisa textul alternativ „un pinguin nauc”. Daca aceiasi imagine am alinia-o BOTTOM, am preciza ca spatiul la stanga si la dreapta este de 20 pixeli si am redimensiona imaginea, am obtine:
Descriere:
<HTML>
|
<HEAD>
<TITLE> Un pinguin </TITLE>
</HEAD>
</BODY>
<IMG SRC='pingo.gif' height=75 width=50 ALIGN=BOTTOM HSPACE=20 ALT=”pinguin nauc”>
<I> Pe mine m-ati gasit de exemplu? <I>
</BODY>
</HTML>
Efect
Pe mine m-ati gasit de exemplu?
Observatii:
1) Prin utilizarea imaginilor, paginile Web ar trebui sa devina mult mai atractive. Intotdeauna se intampla asa? De multe ori, navigand, intalnim pagini cu o grafica abundenta, care lasa impresia de supraaglomerare sau de haos, imaginile fiind contrastante prin culoare, pozitie sau semnificatie. In plus, se mai incarca si ingrozitor de greu, mai ales pe la noi.
Care sunt principalele greseli pe care ar trebui sa le evitam cand inseram imagini in pagini Web ?
-
Nu considerati ca toti utilizatorii folosesc un browser grafic ! Ganditi-va cum arata
pagina in absenta imaginilor si includeti texte alternative ( cu toate ca astazi mare parte au la
dispozitie un browser grafic ).
-
Nu utilizati imagini de dimensiuni mari! Se
incarca greu! De exemplu,
puteti
controla dimensiunea imaginii reducand numarul de culori din paleta
la minimul
necesar (acest lucru va micsora numarul de
biti necesari pentru reprezentarea
fiecarui pixel si deci dimensiunea intregii imagini).
-
In cazul in care utilizati o imagine drept imagine de fundal' (background),
aceasta
va fi multiplicata si dispusa sub forma
unui mozaic pe intreaga suprafata a
ferestrei browser-ului. Daca imaginea are culori tari, textul va fi foarte greu de
citit. Utilizati culori pastelate, eventual
nuante de gri.
Daca doriti neaparat sa
includeti in pagina o imagine de calitate foarte buna (sa
spunem un fisier jpg de dimensiune mare), nu o includeti
direct! Includeti doar o
copie micsorata a imaginii, convertita
in format .gif si o scurta descriere (care sa
contina neaparat si dimensiunea imaginii originate). Creati
o legatura de la copie
catre original, astfel incat doar utilizatorii interesati sa o vizualizeze, in cunostinta
de cauza.
Inserarea unei legaturi pe o imagine
Prin utilizarea elementului IMG drept continut al elementului ancora <A> avem posibilitatea de a insera in document o legatura pe o imagine: prin actionarea imaginii printr-un clic va fi accesata resursa destinatie (cea la care am creat legatura).
De exemplu:
Descriere
<A HREF=nA2is.htm'> <IMG SRC='Clint.gif'
HEIGHT=273 WIDTH=148 ALT='Clint'> </A>
Eject
Printr-un clic pe aceasta imagine, se incarca in fereastra browser-ului documentul Azis.htm.
3. Maparea imaginilor
Efectele sunt mult mai spectaculoase atunci cand se
creeaza legaturi nu pe o intreaga imagine, ci pe anumite zone
din imagine. De exemplu, intr-o pagina Web despre
Pentru aceasta, trebuie sa atasam imaginii o descriere in care sa specificam zonele senzitive ale imaginii. Aceasta operatie, prin care se obtine o harta a imaginii, este denumita mapare.
In functie de ,,cine' interpreteaza coordonatele pixelului activat printr-un clic si executa actiunea corespunzatoare, exista doua tipuri de mapare :
a) Client (Client-side) - harta
grafica este interpretata de catre browser,
defmirea
zonelor senzitive ale imaginii si a legaturilor fund introdusa in
documentul HTML.
Cand un utilizator activeaza printr-un clic o zona
a imaginii, browser-ul calculeaza
coordonatele pixelului pe care s-a executat clic si tot browser-ul executa
actiunea
necesara.
b) Server (Server-side) - harta
grafica este interpretata de catre
server, cu ajutorul unui program (de obicei de tip CGI). Cand un utilizator
activeaza o zona a imaginii
coordonatele pixelului pe care s-a executat clic sunt transmise catre
server. Serverul
interpreteaza coordonatele si executa actiunea
necesara.
Maparea de tip client este preferabila deoarece este mai usor de construit, nu solicita serverul si deci poate fi vizualizata si lucrand off-line (neconectati, local).
Pentru a asocia unei imagini o harta grafica, se utilizeaza in cadrul elementului IMG atributul USEMAP:
USEMAP = “#nume-harta'
unde nume-harta reprezinta numele asociat hartii la descrierea ei.
Pentru a descrie harta unei imagini se utilizeaza elementul MAP. Intre eticheta de inceput <MAP> si cea de sfarsit </MAP> sunt incadrate descrierile zonelor senzitive ale imaginii. Elementul MAP admite un singur atribut (NAME), prin intermediul caruia asociem hartii grafice un nume ce poate fi utilizat de atributul USEMAP.
<MAP NAME=”nume-harta'>
descriere-zona 1
descriere-zona 2
</MAP>
Descrierea unei zone senzitive a imaginii se realizeaza cu ajutorul elementului AREA, care admire urmatoarele atribute :
SHAPE = DEFAULT | RECT | CIRCLE | POLY
specifica forma geometrica a zonei:
DEFAULT defineste intreaga zona;
RECT defineste o zona dreptunghiulara;
CIRCLE defmeste o zona circulara;
POLY defineste o zona poligonala.
COORDS = coordonate, specifica pozitia zonei pe ecran, prin coordonatele ei. Coordonatele depind de forma geometrica a zonei:
|
SHARPE |
Coordonate |
|
RECT |
4 coordonate: left-x (abscisa coltului stanga sus), top-i (ordonata coltului stanga sus). right-x (abscisa coltului dreapta jos), buttom-y (ordonata coltului dreapta jos) |
|
CIRCLE |
3 coordonate: center-x (abscisa centrului), center-y (ordonata centrului), radius (raza) |
|
POLY |
2n coordonate, unde n reprezinta numarul de varfuri: x1, y1, x2, y2, . , xn, yn (abscisa si ordonata fiecarui varf al poligonului) |
Valorile coordonatelor sunt relative la coltul stanga sus al imaginii si se precizeaza in ordinea din tabelul de mai sus, separate prin virgula.
Pentru zonele de forma circulara, raza cercului poate fi specificata si in procente. in acest caz, procentul se calculeaza din minimul dintre inaltimea si latimea imaginii.
NOHREF cand este precizat, acest atribut specifica faptul ca acestei zone nu i se asociaza nici o legatura.
HREF=URL
specifica adresa resursei la care se creeaza legatura corespunzatoare zonei.
ALT=sir-de-caractere
specifica un text alternativ, o scurta descriere a zonei, ce va fi afisata intr-o mica fereastra cand cursorul mouse-ului intarzie asupra zonei respective.
De exemplu, sa consideram ca dorim ca realizam un tutorial on-line despre Netscape Communicator. Pentru a prezenta meniul ferestrei Netscape Communicator, vom utiliza un utilitar de captura a imaginilor (Corel Capture, WinCopy etc.) sau vom capta imaginea folosind tasta Print Screen pentru a crea un fisier gif cu imaginea meniului. Vom insera in tutorial aceasta imagine mapata, astfel incat un clic pe oricare din meniuri sa deschida in fereastra browser-ului un document cu informatii despre toate optiunile din meniul respectiv.
Descriere
<IMG SRC= 'Meniu.gif' ALT='Meniul Netscape Communicator”
Height=20 Width=231 USEMAP='#hmenu'>
<MAP NAME='hmenu'>
<AREA HREF='file.htm' ALT='Meniul File'
SHAPE='rectn
COORDS='0,0,30,19'>
<AREA HREF=nedit.htm' ALT='Meniul Edit'
SHAPE='rectn
COORDS='31,0,57,19n>
<AREA HREF=Bview.htm' ALT='Meniul View'
SHAPE='rect'
COORDS='58,0,92,19'>
<AREA HREF='go.htm' ALT='Meniul Go'
SHAPE='rect'
COORDS='93,0,120,19'>
<AREA HREF='communic.htmn ALT='Meniul Communicator'
SHAPE='rect'
COORDS='121,0,200,19'>
<AREA HREF='help.htm' ALT='Meniul Help'
SHAPE='rect'
COORDS='201,0,237,19'>
</MAP>
Observatii:
Zonele definite prin intermediul
elementului AREA in cadrul
aceluiasi element MAP nu au obligatoriu aceeasi forma
geometrica.
Daca doua sau mai multe zone
se suprapun, are prioritate cea
defmita prima.
| Contact |- ia legatura cu noi -| |  |
| Adauga document |- pune-ti documente online -| |  |
| Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| |  |
| Copyright © |- 2025 - Toate drepturile rezervate -| |  |
 |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
Proiecte pe aceeasi tema | ||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
|
||||||||||||||||||||||||