Home » Resurse Web Design » Imagini in limbaj HTML

 
 
 

Imagini in limbaj HTML

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate 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;
  • BM (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 culori posibile) si JPEG (24biti pentru o culoare, 16777216 de culori posibile).

homeimg
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.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> („image” = imagine). Pentru a putea identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei si anume src („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.

<html>
<head>
<title> O pagina cu imagine</title>
</head>
<body>
O pagina care contine o imagine.
<img src=”/../../imagini/pic3.jpg”> Text dupa imagine.
</body>
</html>

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei. Valorile acestor atribute sunt numere intregi pozitive. O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul 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.

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 partea 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; partea de jos a imaginii se aliniaza cu linia de baza a textului.

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. La pozitionarea mouse-ului deasupra imaginii apare textul declarat la atributul alt.

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.

<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background=”../../ imagini/pic3.jpg”>
</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. In mod prestabilit imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi. Daca stabilim pentru atributul border al etichetei 0 acest chenar dispare.

Eticheta:

Comentariile sunt inchise

Ne pare rau, dar nu poti lasa un comentariu pentru acest post.

Resurse web design