Rotutorial
www.rotutorial.3xforum.ro Aici gasesti Tutoriale Photoshop,MUonline,Counter-Strike,HTML,PhP,CSS,si multe altele

Nou pe simpatie:
Anne98

Femeie
25 ani
Buzau
cauta Barbat
27 - 52 ani

Rotutorial Inregistrare Login PozeNu sunteti logat. Lista Forumurilor Pe Tematici

Rotutorial / HTML si CSS /

Standardul HTML

Pagini: 1

Admin
Administrator
Postari: 67

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:

Code:

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

Code:

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

Code:

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

Code:

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

Code:

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

Code:

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

Pagini: 1

Mergi la