15. Imagini in HTML

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 alt="imagine exemplu" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"  />

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 „Show Image”.

<img alt="imagine exemplu" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />

HTML – inaltimea si latimea unei imagini

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

<img alt="imagine exemplu" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"  width="120" height="75" />

HTML – Alinierea orizontala si verticala a unei imagini

In acest sens, sunt folosite atributele align si valign. Optiunile oferite de aceste atribute sunt:

1. Align (orizontal)

  • right
  • left
  • center

2. Valign (vertical)

  • top
  • bottom
  • center
<img alt="" align="right" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> 
<p>Acesta este primul paragraf, este doar un exemplu pentru a putea intelege mai bine alinierea unei imagini.</p>
<p>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,</p>

HTML – Folosirea imaginilor ca link

Imaginile sunt foarte utile pentru link-uri si se pot forma cu ajutorul codului urmator:

<a href="http://www.google.com/" title="Exemplu de link imagine in html">
    <img alt="imagine exemplu" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="120" height="75" />
</a>