provocare1.MyForum.ro

vinars · Administrator Data inscrierii: 06/Aug/2009 Mesaje: 110

Imaginile sunt foarte importante intr-o pagina web. De aceea este recomandat sa le folosesti in mod corect. Inserarea lor se face cu susținerea tag-ului <img/>.

<img src="../img/image.jpg" />

Vizualizare

--------------------------------------------------------------------------------

HTML - img src
"src" este prescurtarea pentru "source" (sursa). Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am explicat in capitolul destinat linkurilor se poate folosi orice tip de URL pentru a indica adresa fisierului.

Sursa Locala Descriere
src="image.jpg" fotografia este situata pe acelasi grad cu fisierul .html
src="../image.jpg" fotografia este situata pe un indice anterior fisierului .html.
src="../img/image.jpg" fotografia este situata in folderul "img" pe nivelui anterior fisierului .html

Se poate utiliza deasemenea adresa completa a fotografie. De exemplu scr="http://www.tutorialehtml.com/img/image.jpg". Acest model de URL nu este propus deoarece la schimbarea domeniului va necesită sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata pe un alt domeniu scr="http://www.domeniu.com/image.jpg".

Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat pe domeniul pe care este stocat fisierul .html.

--------------------------------------------------------------------------------

HTML - Elemente alternative pentru imagini
Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".

<img src="http://example.com/folder/image.jpg" alt="Imagine Albastra "/>

Vizualizare

--------------------------------------------------------------------------------

HTML - inaltimea si latimea unei imagini
Pentru a stabili inaltimea si latimea unei imagini sunt utilizate atributele height si widith.

<img src="../img/image.jpg" alt="Imagine Albastra" width="100" height="50" />

Vizualizare

--------------------------------------------------------------------------------

HTML - Alinierea orizontala si verticala a unei imagini
In acest sens, sunt folosite atributele align si valign. Obtiunile oferite de aceste atribute sunt:

1. Align (orizontal)

right
left
center
2.Valigh (vertical)

top
bottom
center
Am atasat alaturat si un exemplu:

Acesta este întâiul paragraf ...

<img src="../img/image.jpg" align="left">
Acesta este cel deal doilea paragraf...

Acesta este cel de-al treilea paragraf...

Vizualizare
Acesta este inițialul paragraf, este doar un exemplu pentru a putea intelege mai bine alinierea unei imagini.

Acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in componentă dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in bucată dreapta,

Acesta este cel de-al treilea paragraf si ultimul, el nu contine nimic dar l-am pus pentru ca "da bine".

--------------------------------------------------------------------------------

HTML - Utilizarea imaginilor ca link
Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt extrem de utile pentru link-uri si se pot forma cu ajutorul codului urmator:

<a href="http://www.tutorialehtml.com">

<img src="../img/image.jpg"> </a>

Vizualizare

Imaginea de mai sus te va trimite la pagina de start. O poti schimba cu pagina ta de start si vei obtine o imagine cu cu un link catre pagina ta de start.

--------------------------------------------------------------------------------

HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o caracteristică mult mai scazuta cu dimensiuni reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de mărimi sporite.

<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a>