Aula 9 - Como incluir imagens no Site em Html

A TAG utilizada é: <img src="nome da imagem+extensão"(gif,jpg,bmp,etc)>

Atributos da Imagem:

·  WIDTH - Define a largura da imagem.

·  HEIGHT - Define a altura da imagem.

·  ALT - Texto que aparece quando é passado o mouse sobre a imagem

·  BORDER - É um valor atribuido à largura da borda da imagem (Contorno).

Veja alguns exemplos:
<img src="zero.gif" alt="Seu texto" border="0">
<img src="zero.gif" alt="Seu texto" border="1">
<img src="zero.gif" alt="Seu texto" border="2" width="20" height="20">

Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem.
O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar.
Alinhamento texto de imagens:

·  <img src="zero.gif" align="top">

·  <img src="zero.gif" align="middle">

·  <img src="zero.gif" align="left">

·  <img src="zero.gif" align="right">

Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10" VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10" HSPACE="30">