Inserir Imagens em HTML

A tag para se inserir imagens é <img src="imagem.jpg"> .

Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:

<img src="fotos/imagem.jpg"> .

Atributo "alt"

O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está activa. A tag fica:

<img src="imagem.jpg" alt="Aniversário da Joana">


Definir Altura e Largura

Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:

<img src="imagem.jpg" width="200" height="100">


Definir Contorno da Imagem
Para o contorno usa-se o atributo "border". O valor 0 faz com que a imagem fique sem contorno. Quanto maior for o valor definido maior é a espessura do contorno. O código pode ser por exemplo:

<img src="imagem.jpg" border="5">


Múltiplos Atributos

Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:

<img src="imagem.jpg" border="5" alt="Aniversário da Joana" width="200" height="100">


Inserir Imagens em Links
Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):

<a href="http://www.outra_pagina.com"><img src="fotos/imagem.jpg"></a>

Fonte do texto: http://www.comofazerumsite.com/criarsite/tutorial_html.html
Fonte da imagem: http://www.maikbasso.com.br/2011/12/inserindo-e-manipulando-imagens-em-uma.html