Tutorial HTML - Imagini

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

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

Vizualizare

Imagine Albastra

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 nivel cu fisierul .html
src="../image.jpg" fotografia este situata pe un nivel anterior fisierului .html.
src="../img/image.jpg" fotografia este situata in folderul "img" pe nivelui anterior fisierului .html

Se poate folosi deasemenea adresa completa a fotografie. De exemplu scr="http://www.tutorialehtml.com/img/image.jpg". Acest model de URL nu este recomandat deoarece la schimbarea domeniului va trebui 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 - Atribute 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

Imagine Albastra

HTML - inaltimea si latimea unei imagini

Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.

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

Vizualizare

Imagine Albastra

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:

<p>Acesta este primul paragraf ...</p>
<p>
<img src="../img/image.jpg" align="left">
Acesta este cel deal doilea paragraf...
</p>
<p>Acesta este cel de-al treilea paragraf...</p>

Vizualizare

Acesta este primul 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 partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta,

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


HTML - Folosirea imaginilor ca link

Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte 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 calitate mult mai scazuta cu dimensiuni reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.

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

Vizualizare


Tutorialul HTML anterior
Tutorialul HTML urmator


Comentarii


lola

NU MERGE|! OFFFFF
09-Jan-2015 - 17:44


Grigore

Am o intrebare , cum poti atasa o imagine la contact care sa-ti vina prin email este vreun script ceva?Multumesc.
24-Nov-2014 - 00:18


Alexandra

Buna ziua,
Incerca sa fac o postare facebook in care poza incarcata sa ma redirectioneze catre un anumit site. Din pacate nu reusesc sa ajustez marimea pozei astefl incat sa se vada toata imaginea. Cum pot sa fac?
14-Oct-2014 - 14:14


Gabriella

vreau sa stiu cum se rezolva cerinta urmatoare:
Încadrati imaginea din pagina web cu o bordură având grosimea de 10 pixeli.
20-May-2014 - 22:07


ciara

sal cum fac sa scriu in dreptul unei imagini?
17-May-2014 - 18:46


Octa

cum poti sa faci ca o imagine de exemplu sa coboare odata cum dai in jos si sa ramana in acelasi loc ?
10-May-2014 - 00:45


Sandra

Vreau să știu dacă are vreo legătură cu tipul de windows. Am lucrat mai de mult o pagină html, când aveam windows xp, și nu am avut probleme, dar acum pe windows 7 nu-mi merge exemplul din tutorial.
07-May-2014 - 17:09


valera

se poate
09-Jan-2014 - 17:57


lucian

tutoriale expicate la fel de bine aveti si pt c++ trimite-ti-mi url

08-Oct-2013 - 16:38


Catalin

@maria

Da, este posibil sa scri peste imagine, dar cred ca ceea ce vrei se obtine mai usor folosid background.

http://www.tutorialehtml.com/htmlt/background.php
http://www.tutorialehtml.com/tutoriale-css/bsckground.php
22-Jul-2013 - 15:55


Preto

Am si eu o dilema. Cand pun imaginea, aceasta este foarte mare adica trebuie sa dau pe rotite ca sa pot vedea particele din ea. Cum o reglez sa devina mai mica?
08-Jul-2013 - 12:49


Crystyan

Mie imi apare ca lui Leonard , un semn mic care arata o foaie de hartie rupta.Nu o vede.De ce? Am facut ce trebui.
06-May-2013 - 18:09


paul

nu pot sa pun imagie html
31-Mar-2013 - 15:37


Nicu

Buna,
sunt incepator si as vrea sa stiu cum pun scrisul pe o imagine intr-o pagina web?
11-Nov-2012 - 18:21


edi

Salut!
Vreau sa stiu daca poti adauga ca background o imagine care se misca(gen .AVI) cu un simplu cod.
Multumesc anticipat!
09-Oct-2012 - 21:39

1 23456

Next

Trimite un comentariu!

Nume *
E-mail *
Vreau sa fiu anuntat de urmatoarele mesaje la acest articol
Comentariu *

Security image