 |
|
 |
 | Imagini in HTML |  |
 Trimis: 26/07/2007 13:43 |
 |
|
| Ad_Infinitum |
| Administrator |
 |
 |
| Data inscrierii: 23/Iun/2007 |
| Mesaje: 212 |
|
|
|
|
|
 |
|
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (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;
Cele mai raspandite formate sunt GIF(8biti pentru o culoare, 256 nuanțe posibile) si JPEG (24biti pentru o culoare, 16777216 de colorații posibile).
Adresa URL a unei imagini
URL ( "Uniform Resourse Locator" = identificator unic al resursei ) este un standard întrebuințat 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.
Pentru a insera o fotografie intr-o pagina, se utilizeaza eticheta <img> (de la "image"=imagine).
Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei <img> si anume src (de la "source"=sursa).
Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia.
| Citat: |
<html>
<head><title> O pagina cu imagine</title></head> <body> O pagina care contine o imagine
<img src="w3.gif"> Text dupa imagine.
</body>
</html>
|
Chenarul si dimensionarea unei imagini
Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>.
Valorile acestor semne sunt numere intregi pozitive.
O imagine are anumite mărimi pe orizontala si verticala, stabilite in timpul crearii ei.
Daca nu se cere altfel , aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web.
Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height.
| Citat: |
<html>
<head><title> Imagine cu chenar si marit</title></head> <body> O poză cu chenar si de 200 pixeli X 15 %
<img src="w3.gif" border="5" width="350" height="25%"> Text dupa imagine.
</body>
</html>
|
Alinierea unei imagini
Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori:
" left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta;
" right " - aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga;
" top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu bucată de sus a textului ce precede imaginea;
" middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea.
" bottom " - aliniere la baza; porțiunea de jos a imaginii se aliniaza cu linia de baza a textului.
| Citat: |
<html>
<head><title> Alinierea unei imagini</title></head> <body> Alinieri:
<br> Pe verticala:
<img src="w3.gif" align="top">
La mijloc: <img src="w3.gif" align="center">
Jos: <img src="w3.gif" align="bottom"> Text dupa imagine.
</body>
</html>
|
Alinierea textului in jurul imaginii
Atributele hspace si vspace precizeaza distanta in pixeli pe orizontala , respectiv pe verticala, dintre imagine si restul elementelor din pagina.
Atributul alt admite ca valoare un text care va fi afisat in locul imaginii.
| Citat: |
<html>
<head>
<title> Alinierea textului</title></head> <body> <h5>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.
</h5><p> Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.
<img src="w3.gif" align="left" hspace="30" vspace="30" alt="Universitatea de Nord Baia Mare">
Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.
</body>
</html>
|
Imagini pentru fondul unei pagini
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei <body>, avand ca valoare adresa URL a imaginii.
Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.
| Citat: |
<html> <head><title> Pagina cu imagine de fond</title></head> <body background="w3.gif">
1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
|
Imagini folosite ca legaturi
O legatura (link) introduce in pagina Web o zona activa.
Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarca o alta pagina.
Pentru a utiliza imaginea "ubm1.jpg" drept legatura catre pagina index.html utilizam sintaxa:
| Citat: |
<a href ="index-2.html"><img src= "w3.gif"></a>
|
In mod prestabilit imaginea utilizata pe post de zona activa este inconjurata de un chenar avand colorit unei legaturi.
Daca stabilim pentru atributul border al etichetei <img> 0 acest chenar dispare.
| Citat: |
<html> <head><title> Imagini folosite ca legaturi</title></head> <body><h5>Imagini folosite ca legaturi</h5>
Text inainte de imagine.<a href="index-2.html"><img src="w3.gif"></a>
Text dupa imagine.
</body> </html>
|
Utilizari distincte ale imaginilor
Imaginile pot fi utilizate pentru a obtine efecte diferite intr-o pagina web.
Printre aceste utilizari speciale putem enumera:
Linii orizontale formate cu ajutorul imaginilor .
Simboluri unice pentru elementele unei liste neordonate ( vezi ). |
|
|
|
|
|
|
Fa-ti si tu propriul forum GRATUIT, pe www.myforum.ro
|
|
