Pagina de start a forumului ImperiumSv.MyForum.ro ImperiumSv.MyForum.ro
Bine ati venit pe Forumul Aliantei ImperiumSv
 
 FAQFAQ   CautareCautare   MembriMembri   GrupuriGrupuri   InregistrareInregistrare 
 ProfilProfil   Mesaje privateMesaje private   AutentificareAutentificare 

Imagini

 
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului ImperiumSv.MyForum.ro -> Limbajul HTML
Subiectul anterior :: Subiectul urmator  
Autor Mesaj
marin
Founder
Founder
marin

Data inscrierii: 04/Apr/2008
Mesaje: 48
Localitate: suceava
MesajTrimis: 09/04/2008 11:21    Titlul subiectului: Imagini Raspunde cu citat (quote)
Imaginile sunt stocate in fisiere cu diferite 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
Cod:
<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.

Cod:
 <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>


[url=http://www.worklance.com/htmltutorial/exemple/imagini/img_ex1.html]vezi acest exemplu[/url]

Chenarul si dimensionarea unei imagini

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>.
Valorile acestor semnale sunt numere intregi pozitive.

O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in timpul crearii ei.
Daca nu se cere altfel , aceste mărimi sunt respectate in momentul afisarii ei in pagina Web.

Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height.

Cod:
<html>
    <head><title> Imagine cu chenar si marit</title></head> <body> O imagine cu chenar si de 200 pixeli X 15 %
    <img src="w3.gif" border="5" width="350" height="25%"> Text dupa imagine.
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/imagini/img_ex2.html]vezi acest exemplu[/url]

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 ingrediente sunt dispuse pe in porțiunea stanga;
* " top " - aliniere deasupra; fracțiune 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; bucată de jos a imaginii se aliniaza cu linia de baza a textului.

Cod:
<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>


[url=http://www.worklance.com/htmltutorial/exemple/imagini/img_ex3.html]vezi acest exemplu[/url]

Alinierea textului in jurul imaginii

Atributele hspace si vspace precizeaza distanta in pixeli pe orizontala , respectiv pe verticala, dintre poză si restul elementelor din pagina.
Atributul alt admite ca valoare un text care va fi afisat in locul imaginii.

Cod:
 <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>


[url=http://www.worklance.com/htmltutorial/exemple/imagini/img_ex4.html]vezi acest exemplu[/url]

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.

Cod:
<html> <head><title> Pagina cu imagine de fond</title></head> <body>
    1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/imagini/img_ex5.html]vezi acest exemplu[/url]

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:

Cod:
<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.

Cod:
<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>


[url=http://www.worklance.com/htmltutorial/exemple/imagini/img_ex6.html]vezi acest exemplu[/url]

[/u]Utilizari distincte ale imaginilor[/u]

Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.
Printre aceste utilizari unice putem enumera:

1. Linii orizontale formate cu susținerea imaginilor .
2. Simboluri speciale pentru elementele unei liste neordonate ( [url=http://www.worklance.com/htmltutorial/exemple/list/listex_11.html]vezi[/url] ).
Sus
Vezi profilul utilizatorului Trimite mesaj privat
Afiseaza mesajele pentru a le previzualiza:   
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului ImperiumSv.MyForum.ro -> Limbajul HTML Ora este GMT + 2 ore
Pagina 1 din 1

 
Mergi direct la:  
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum


Powered by phpBB © 2001, 2002 phpBB Group
Fa-ti si tu propriul forum GRATUIT, pe www.myforum.ro