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:.
- 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.
- 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).
- 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