Imagens

No HTML, imagens são definidas com a tag <img>. É usada sempre com o atributo src, que especifica a localização da imagem.

Sintaxe da imagem

A tag <img> tag é vazia, e sem o atributo src é incompleta. O atributo src é usado para definir o endereço da imagem que se quer exibir.

<img src="endereco/imagem.jpg" alt="Imagem belíssima">

Atributo ALT

O atributo Alt provê uma maneira alternativa de exibir texto caso a imagem não possa ser exibida para seu usuário.

Os motivos de natureza técnica podem ser os mais variados: desde a imagem não existe mais em seu servidor de hospedagem, até conexão lenta por parte do seu usuário. Utilizando o atributo, a tag <img> ficará dessa forma:

 

<img src="foto-da-camila.jpg" alt="Foto da Camila">

Controlando a dimensão da imagem

Neste ponto, você pode controlar a dimensão (altura e largura) utilizando duas formas. Através do atributo style e dos atributos width e height.

Usando o atributo Style

Basta utilizar o código abaixo

 

<img src="camila.jpg" alt="Imagem da Camila" style="width:200px;height:300px;">

Usando os atributos Width e Height

Você também pode fazer através dos atributos width e height.

<img src="camila.jpg" alt="Camila" width="200" height="300">

Usando imagens como link

Para usar a imagem como link, basta utilizar o código abaixo.

 <a href="pagina.html">
  <img src="botao.gif" alt="Acessar a página" style="width:42px;height:42px;border:0;">
</a>