| PROIECTARE SITE WEB > DOCUMENTATIE - HTML - Imagini |
Proiectare Site si Web Design - Standardul HTML
Lucrul cu Imagini
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate
de browsere pentru fisierele imagine sunt:
1. GIF (Graphics Interchange Format)
cu extensia .gif;
2. JPEG (Joint Photographic Experts Group) cu extensia
.jpeg sau .jpg;
3. XPM (X PixMap) cu extensia .xmp;
4. XBM (X BitMap) cu extensia .xbm;
5. BMP (BitMap) cu extensia .bmp (numai cu Internet
Explorer);
6. TIFF (Tagged Image File Format) cu extensia .tif
sau .tiff;
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 Resource 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>
(de la "image"= imagine).
Pentru a putea 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.
Daca imaginea se afla intr-un subdirector al directorului paginii
HTML din care este apelata, sa spunem "images", atunci aceasta
este apelata cu URL-ul: "/images/imagine1.jpg".
In schimb, daca fisierul imagine este situat intr-un director "images"
dintr-un super director al directorului paginii HTML apelante, referirea
se face cu URL-ul: "../images/imagine1.jpg".
Exemplu:
<html>
<head>
<title> O pagina cu imagine</title>
</head>
<body>
O pagina care contine o imagine in subdirectorul images dintr-un
super director al unui superdirector al directorului paginii HTML
<img src="../../images/imagine1.jpg">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 acestui
atribut 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 browser, in cadrul paginii
web. Dimensiuniile prestabilite ale unei imagini pot fi modificate
la afisarea in browser prin intermediul atributelor "width"
si "height" setate de proiectant in codul HTML
al paginii la valorile dorite. Spre
exemplu:
<html>
<head>
<title> Imagine cu chenar si marit</title>
</head>
<body>
O imagine cu chenar si de 200 pixeli X 15 %
<img src="/images/imagine1.jpg" 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:
1. "left" - aliniere la
stanga; celelalte componente sunt dispuse pe partea dreapta;
2. "right" - aliniere la dreapta; celelalte
componente sunt dispuse pe partea stanga;
3. "top" - aliniere deasupra; partea de
sus a imaginii se aliniaza cu partea de sus a textului ce precede
imaginea;
4. "middle " - aliniere la mijloc; mijlocul
imaginii se aliniaza cu linia de baza a textului ce precede imaginea.
5. "bottom" - aliniere la baza; partea de
jos a imaginii se aliniaza cu linia de baza a textului.
Exemplu:
<html>
<head>
<title> Alinierea unei imagini</title>
</head>
<body>
Alinieri:
<br> Pe verticala:
<img src="/images/img1.jpg" align="top">
La mijloc: <img src="/images/img1.jpg" align="middle">
Jos: <img src="/images/img1.jpg" 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, in
functie de setarile browserului utilizatorului:
<html>
<head>
<title> Alinierea textului</title>
</head>
<body>
<h4>Imagine aliniat la stanga inconjurata de text la distanta
de 30 de pixeli.
</h4><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="../images/img1.jpg" 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 pe post de fundal al 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. De
exemplu:
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background="../images/img1.jpg">
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 "legatura.jpg"
drept legatura catre pagina index.html utilizam sintaxa:
<a href
="index.html"><img src= "../../images/img1.jpg
"></a>
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 <img>
la 0, acest chenar dispare.
Exemplu:
<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body"><h4>Imagini folosite ca legaturi</h4>
Text inainte de imagine.<a href="index.html"><img
src="../../images/img1.jpg "></a>
Text dupa imagine.
</body>
</html>
|
Creare
si actualizare site