Inserindo imagens em HTML & explicação sobre atributos.

Nossa 2ª aula de HTML! Se você não viu a 1ª e/ou não entende nada de HTML, clique aqui e veja a introdução de HTML  ;D E hoje vou te mostrar como inserir imagens usando os códigos HTML.
Eu gosto dessas tag's porque são muito práticas, não apenas para sites, mas também para blogs e até para recados no orkut.
Atributos
Para inserir imagem, usamos a tag <img>. Mas precisamos de um atributo. Antes que você pense: "legal, é um amigo seu?", eu vou explicar: Imagine você ter que abrir uma tag para cada pequena função e depois ter que fechar todas... Seria um grande trabalho, que custaria muito tempo e daria muita dor de cabeça. Por isso, existem os ATRIBUTOS, um tipo de complemento para uma tag. Depois você vai entender melhor, mas vou dar um exemplo:
Dentro da tag <img> eu vou colocar o atributo SRC, que determina qual a imagem que aparecerá. Depois, eu coloco o atributo BORDER, que determina o tamanho das bordas da imagem. Então, dentro de uma unica tag, você adiciona quantos atributos forem necessários para configurar sua tag como você precisa.


TAG de imagem

Agora vamos à imagem; A tag é essa:

<IMG SRC="NOMEDAIMAGEM">

No atributo SRC você determina qual imagem será inserida. Para isso, dê um espaço depois do nome da tag^?, escreva o atributo SRC=" dentro das aspas^? digite o nome da imagem e depois feche as aspas.
OBS:.

1. Se você está fazendo o teste no bloco de notas, sua página deve ser salva na mesma pasta do computador que a imagem a ser inserida.
2. O nome da imagem deve ser exatamente que você digita na tag deve ser exatamente igual ao nome da imagem salva, inclusive com extensão (.JPG, .PNG, .GIF, etc).
3. Se você está fazendo o código direto na internet, no nome da imagem coloque o endereço dela dentro de um site. (Para ver isso, clique na imagem com o botão direito, depois em PROPRIEDADES. O código que você deverá por na tag é esse descrito como ENDEREÇO ou como URL, dependendo do seu navegador).

Exemplos:

     <IMG SRC="cachorro.JPG"> para paginas criadas no bloco de notas
     <IMG SRC="http://dicasedietas.com/wp-content/uploads/2010/11/Cachorro.JPG"> para tag digitada na internet
Lembrando que estou usando a cor azul apenas para diferenciar o nome da tag dos atributos.
Agora, vamos adicionar mais atributos à tag:
Novamente, dê um espaço para separar um atributo do outro. Nesse caso, vou colocar meu atributo BORDER depois do SRC:
     <IMG SRC="cachorro.JPG" BORDER="1">
Após o SRC, eu coloquei o BORDER que determina o tamanho das bordas, e dentro das aspas do BORDER coloquei o número 1 para que as bordas foquem do tamanho 1.
Podemos também alterar seu tamanho:
     <IMG SRC="cachorro.JPG" BORDER="1" WIDTH="500" HEIGHT="500">
WIDTH determina a largura da sua imagem (em pixels^?), e HEIGHT, a altura.

O mais importante é isso.

Qualquer dúvida, deixe um comentário  ;D

Até a próxima!!