Sunteți pe pagina 1din 22

Imagini

Tipuri de fiiere, care pot fi folosite n


cadrul paginilor web:
GIF (Graphic Interchange Format), a fost introdus de
Compuserve. Ofer o compresie fr pierderi, maxim 256 de
culori (adncime de culoare de 8 bii). Pot fi animate i pot
avea un fundal transparent, ceea ce le face uor de plasat n
pagin.
JPEG (Joint Photographic Expert Group) ofer o compresie
variabil. Este utilizat adesea pentru fotografii cu adncime
de culoare de 24 de bii. Are ca rezultat pierderea detaliilor
fotografiei. Nu are transparen.
PNG (Portable Network Graphic) este un format mai nou care
se aseamn cu GIF, dar este mult mai flexibil. Permite
adncimi de culoare de 8 sau 24 de bii, fr animaie.
SWF - format flash, permite animaie ce poate fi vizualizat
n browser

<img src="numele imaginii.extensie">


Observaie
Imaginea va fi afiat doar dac pagina
respectiv va fi n acelai folder cu
imaginea pe care dorii s o folosii.
n caz contrar imaginea nu va fi afiat.

Atribute
alt= text specific un text alternativ,
care va fi afiat de browserele ce nu pot
vizualiza imagini;
height= dimensiune (n pixeli sau %)
definete nlimea imaginii;
width= dimensiune (n pixeli sau %)
definete limea imaginii;
border = numr imaginea va fi ncadrat
de un chenar cu grosimea specificat n
numr de pixeli;

Atribute

hspace = dimensiune, specific spaiul inserat n stnga i


n dreapta imaginii;
vspace = dimensiune, specific spaiul inserat n partea de
sus i n partea de jos a imaginii;
align= valoare, specific modul de aliniere a imaginii n
raport cu textul. Valoarea poate fi:
top (partea de sus a imaginii este aliniat n raport cu textul);
middle (imaginea este aliniat centrat n raport cu textul);
bottom (aliniere la baz; partea de jos a imaginii se aliniaz cu linia
de baz a textului);
left (imaginea este aliniat la marginea din stnga a paginii);
right (imaginea este aliniat la marginea din dreapta a paginii).

<html><head><title>Exemple de pozitionare a
imaginii</title></head>
<body>
<h3>Inserarea imaginii in document</h3>
Un exemplu de pozitionarea implicita a textului
<img src="poze/mai.jpg" width="100" height="100" border="1"
alt="">
este la baza imaginii
<p>Pozitionarea textului
<img src="poze/canta.jpg" width="100" height="100" border="0"
alt="exemplu" align="middle"> pe centrul imaginii
<p>Pozitionarea textului la baza superioara
<img src="Poze/pc.png" width="100" height="100" border="0"
alt="exemplu" align="top"> a imaginii
</body></html>

<html><head><title>Exemple de pozitionare a imaginii</title></head>


<body>
<h3>Inserarea imaginii in document</h3>
<img src="Poze/doi.jpg" width="100" height="100" border="0" align="left" alt="">
Imaginea este <br>
pozitionata in stanga documentului, lasand textul<br>
sa ocupe spatiul liber din dreapta.<br clear="left">
Acest pasaj este fortat sa coboare sub imagine!
<p>
<hr>
<img src="poze/unu.jpg" width="100" height="100" border="0" align="right"
alt="">
Imaginea este <br>
pozitionata in dreapta documentului, lasand textul sa ocupe spatiul liber din
stanga.<br clear="right">
Acest pasaj este fortat sa coboare sub imagine!
</body>
</html>

<HTML><HEAD><TITLE>Exemplu</TITLE>
<BODY><FONT face=Times New Roman color=#0000ff>
<CENTER><B>Introducere</B></CENTER></FONT><BR>
<IMG hspace=20 src="jump.gif" align=left vspace=20 border=2>
<FONT face=Arial color=#ff0000>Se va realiza analiza, n regim
permanent, a circuitelor alimentate n curent alternativ. Se vor
deduce ecuatiile caracteristice ale elementelor ideale R, L si C
functie de amplitudinile n complex si se va prezenta conceptul de
impedanta complexa. Se vor analiza circuitele RL serie si RC
serie, determinnduse tensiunile si curentii prin metoda
amplitudinilor complexe. Generalizarea conectarii impedantelor se
va face prin deducerea din conectarea rezistentelor.</FONT>
<BR></BODY></HTML>

<HTML>
<HEAD>
<TITLE>Lista personalizata</TITLE>
</HEAD>
<BODY>
<UL>
<p>Universitatea <b>Aurel Vlaicu</b> are urmatoarele facultati::
</p>
<IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Stiinte Exacte
<BR><IMG SRC="hexa.gif">&nbsp;&nbspFIATPM
<IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Stiinte Umaniste
<BR>
<IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Inginerie
<BR>
<IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Stiinte Economice
</p>
</UL>
</BODY></HTML>

Utilizarea unei imagini ca legtur


Dac dorii s utilizai o imagine ca legtur va trebui scriei adresa
imaginii ntre tag-urile <a> </a>
<a href=fisier.html><img src="adresa imaginii"</a>
Exemplu 1
<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body><h4>Imagine folosita ca legaturi</h4>
Un text oarecare.<a href="index.html">
<img src="Poze/info.gif"></a>
Un text oarecare.
</body></html>

URL relativ
Dac fiierul curent este
"index.html", pentru a referi
fiierul "poza3.gif" se folosete
expresia "Poze/ poza3.gif.
Daca fiierul curent este
"poza3.gif" pentru a referi
fiierul "index.html" se
folosete expresia
"../index.html".
Daca fiierul curent este
"poza1.gif", pentru a referi
fiierul "fisier2.html" se
folosete expresia
"../Ing/fisier2.html".

Hri de imagini

Permit ca diferite zone ale unei


imagini s fie definite drept legturi
ctre alte diverse pagini Web

Etape
1. Definirea unei imagini ca hart de
imagini
<img> cu atrib:
src=URL-ul imaginii folosite
usemap=#numele_hrii

2. Definirea hrii
<map> .</map>
Atrib:
name=numele_hrii (obligatoriu)
Zonele hrii vor fi definite cu tag-ul <area>
ce are 3 atrib obligatorii
Shape=rect, poly, circle, default
Coords
Href=URL-ul paginii indicate de legtura
zonei respective

[target] numele unei instane a


browserului n care va fi afiat
pagina ctre care indic legtura
zonei respective.