Aula 17/08 Imagens

Agora que já sabemos como preparar nossa página, dando cor e imagem para o fundo e formatando os textos de maneira bem eficiente, vamos aprender a inserir imagens em meio ao nosso texto, dando um conteúdo mais vivo e vibrante ao site.

A tag IMG
A tag responsável pelas imagens é a tag img, é uma tag super fácil de usar pois possui poucas propriedades, elas são:
src: o nome e caminho da imagem (caminho somente se não estiver na mesma pasta).
alt: o texto que aparece enquanto a imagem não é carregada.
height: altura em pixels
width: largura em pixels

Vamos praticar?
Considere que existe uma imagem "teste.jpg" na pasta de seu site.

<img src="teste.jpg" width="250" />

No exemplo acima mostramos a imagem com 250px de largura.

PS: Vejam que a tag img não precisa de inicio+fim, basta uma tag com barra antes do sinal de maior.

Mais exemplos:
Uma imagem que está em outro caminho:
<img src="http://www.teste.com.br/teste.jpg" />

Uma imagem com altura definida em 300px:
<img src="teste.jpg" height="300" />

Exercício:
Agora já estamos prontos para criar uma página completa e bem formatada com textos e imagens.
Já preparei uma pasta com um documento vazio e algumas imagens, também possui alguns textos que podem ser usados.
Baixe esta pasta clicando aqui.

Analisem o conteúdo dela e tentem trabalhar um documento html que ao final se pareça com o abaixo: