INSERINDO IMAGENS:
O tag <IMG>:
Para inserirmos uma imagem em uma página, basta utilizarmos a tag <IMG>.
EX: <IMG SRC="meninas.gif">
Neste exemplo, inserimos a imagem de um arquivo chamado meninas.gif.
Veja como ficou:
OBS: Toda imagem que for inserida em uma página, tem que ser de extensão .gif ou .jpg, pois somente esses formatos são aceitos nos navegadores. Outra coisa é quando tivermos inserido uma imagem, que não esteja no mesmo diretório que você gravou sua página, para você inserí-la, é necessário indicar o diretório onde ela se encontra.
EX: <IMG SRC="imagens/meninas.gif">
Neste exemplo, inserimos o arquivo meninas.gif, que está dentro do diretório imagens.
ALINHAMENTO DE IMAGENS:
O atributo <ALIGN>:
Para alinharmos uma imagem, basta usarmos o atributo <ALIGN> dentro do tag <IMG>. O alinhamento padrão é sempre à esquerda. (O alinhamento tanto tem a ver com a disposição dela na tela, como também, com os textos que estão ao redor)
ALIGN="TOP" - Este atributo alinha o texto adjacente com o topo da imagem.
(Com linhas muito compridas o resultado não fica muito bom)
EX: <IMG ALIGN="TOP" SRC="meninas.jpg">
ALIGN="BOTTOM" - Este atributo alinha o texto adjacente com o rodapé da imagem.
(Com linhas muito compridas o resultado não fica muito bom)
EX: <IMG ALIGN="BOTTOM" SRC="meninas.jpg">
ALIGN="MIDDLE" - Este atributo alinha o texto adjacente com o meio da imagem.
(Com linhas muito compridas o resultado não fica muito bom)
EX: <IMG ALIGN="MIDDLE" SRC="meninas.jpg">
ALIGN="RIGHT" - Este atributo alinha a imagem à direita, e tudo que houver ao redor.
(É preciso testar o resultado, para ver se resulta o efeito desejado no browser)
EX: <IMG ALIGN=RIGHT SRC="meninas.jpg">
ALIGN="LEFT" - Este atributo alinha a imagem à esquerda, e tudo que houver ao redor.
(é preciso testar o resultado, para ver se resulta o efeito desejado no browser)
EX: <IMG ALIGN="LEFT" SRC="meninas.jpg">
CLEAR="ALL" - Este atributo é utilizado dentro da tag <BR>, e serve para interromper o fluxo de texto ao lado da imagem, ou seja, interrompe o atributo ALIGN.
EX: <BR CLEAR="ALL">
BORDAS EM IMAGEM:
O atributo BORDER:
É possível colocarmos bordas em uma imagem, para isso usamos esse atributo, dentro do tag <IMG>.
EX: <IMG SRC="poneys.jpg" BORDER="5">
Veja como ficou:
TEXTO ALTERNATIVO PARA IMAGENS:
De nada adiantará você caprichar em sua home page, inserindo imagens, gifs, fotos e etc., se a pessoa que está vendo as páginas utiliza um navegador incapaz de mostrar imagens (eles existem, e muitas pessoas utilizam, o linux é um deles). Existem usuários também que ajustam o navegador para não carregar imediatamente as imagens. É ai que entra, o texto alternativo, colocamos um título ou uma descrição da imagem com o atributo ALT, e a pessoa escolhe as imagens que quer carregar. Esse atributo comporta até 256 caracteres, contando com os espaços. Mas calma, não vá exagerar!
O atributo ALT:
Utilizamos o atributo ALT, dentro da tag <IMG>.
EX: <IMG SRC="gira.gif" ALT="GIRASSOL">
Coloque o mouse em cima da imagem e veja como ficou:
DIMENSÕES DE IMAGENS:
O atributo WIDTH:
Este atributo é usado dentro do tag <IMG>, e faz com que a imagem aumente ou diminua para os lados esquerdo e direito. (largura)
O atributo HEIGHT:
Este atributo também é usado dentro do tag <IMG>, e faz com que a imagem aumente ou diminua para cima e para baixo. (altura)
EX: <IMG SRC="menino.gif" WIDTH="150" HEIGHT="200">
Veja como era:
Veja como ficou:
PERSONALIZANDO O SEGUNDO PLANO
O atributo BACKGROUND:
Com certeza você deve morrer de vontade de que o fundo de sua página seja diferente, com fotos ou texturas diferentes. A maioria das pessoas preferem adicionar texturas, pois fotos demoram demais a serem carregadas. Para acrescentar uma textura ou uma foto em seu fundo da página, é necessário que você tenha o arquivo pronto e com extensão .gif ou .jpg, tendo isso você utiliza o atributo BACKGROUND, na tag <BODY>.
EX: <BODY BACKGROUND="espaço.gif" ALT="Voando no espaço">
Essa textura se multiplicará, formando um fundo de página com o aspecto de um vôo pelo espaço. O nome do arquivo dessa textura é "espaço.gif" e para você inserí-la em sua página, clique com o botão direito do mouse e escolha "Salvar figura como" e salve no diretório de sua preferência. Insira essa figura na sua página e veja o resultado.
O tag <IMG>:
Para inserirmos uma imagem em uma página, basta utilizarmos a tag <IMG>.
EX: <IMG SRC="meninas.gif">
Neste exemplo, inserimos a imagem de um arquivo chamado meninas.gif.
Veja como ficou:
OBS: Toda imagem que for inserida em uma página, tem que ser de extensão .gif ou .jpg, pois somente esses formatos são aceitos nos navegadores. Outra coisa é quando tivermos inserido uma imagem, que não esteja no mesmo diretório que você gravou sua página, para você inserí-la, é necessário indicar o diretório onde ela se encontra.
EX: <IMG SRC="imagens/meninas.gif">
Neste exemplo, inserimos o arquivo meninas.gif, que está dentro do diretório imagens.
ALINHAMENTO DE IMAGENS:
O atributo <ALIGN>:
Para alinharmos uma imagem, basta usarmos o atributo <ALIGN> dentro do tag <IMG>. O alinhamento padrão é sempre à esquerda. (O alinhamento tanto tem a ver com a disposição dela na tela, como também, com os textos que estão ao redor)
ALIGN="TOP" - Este atributo alinha o texto adjacente com o topo da imagem.
(Com linhas muito compridas o resultado não fica muito bom)
EX: <IMG ALIGN="TOP" SRC="meninas.jpg">
ALIGN="BOTTOM" - Este atributo alinha o texto adjacente com o rodapé da imagem.
(Com linhas muito compridas o resultado não fica muito bom)
EX: <IMG ALIGN="BOTTOM" SRC="meninas.jpg">
ALIGN="MIDDLE" - Este atributo alinha o texto adjacente com o meio da imagem.
(Com linhas muito compridas o resultado não fica muito bom)
EX: <IMG ALIGN="MIDDLE" SRC="meninas.jpg">
ALIGN="RIGHT" - Este atributo alinha a imagem à direita, e tudo que houver ao redor.
(É preciso testar o resultado, para ver se resulta o efeito desejado no browser)
EX: <IMG ALIGN=RIGHT SRC="meninas.jpg">
ALIGN="LEFT" - Este atributo alinha a imagem à esquerda, e tudo que houver ao redor.
(é preciso testar o resultado, para ver se resulta o efeito desejado no browser)
EX: <IMG ALIGN="LEFT" SRC="meninas.jpg">
CLEAR="ALL" - Este atributo é utilizado dentro da tag <BR>, e serve para interromper o fluxo de texto ao lado da imagem, ou seja, interrompe o atributo ALIGN.
EX: <BR CLEAR="ALL">
BORDAS EM IMAGEM:
O atributo BORDER:
É possível colocarmos bordas em uma imagem, para isso usamos esse atributo, dentro do tag <IMG>.
EX: <IMG SRC="poneys.jpg" BORDER="5">
Veja como ficou:
TEXTO ALTERNATIVO PARA IMAGENS:
De nada adiantará você caprichar em sua home page, inserindo imagens, gifs, fotos e etc., se a pessoa que está vendo as páginas utiliza um navegador incapaz de mostrar imagens (eles existem, e muitas pessoas utilizam, o linux é um deles). Existem usuários também que ajustam o navegador para não carregar imediatamente as imagens. É ai que entra, o texto alternativo, colocamos um título ou uma descrição da imagem com o atributo ALT, e a pessoa escolhe as imagens que quer carregar. Esse atributo comporta até 256 caracteres, contando com os espaços. Mas calma, não vá exagerar!
O atributo ALT:
Utilizamos o atributo ALT, dentro da tag <IMG>.
EX: <IMG SRC="gira.gif" ALT="GIRASSOL">
Coloque o mouse em cima da imagem e veja como ficou:
DIMENSÕES DE IMAGENS:
O atributo WIDTH:
Este atributo é usado dentro do tag <IMG>, e faz com que a imagem aumente ou diminua para os lados esquerdo e direito. (largura)
O atributo HEIGHT:
Este atributo também é usado dentro do tag <IMG>, e faz com que a imagem aumente ou diminua para cima e para baixo. (altura)
EX: <IMG SRC="menino.gif" WIDTH="150" HEIGHT="200">
Veja como era:
Veja como ficou:
PERSONALIZANDO O SEGUNDO PLANO
O atributo BACKGROUND:
Com certeza você deve morrer de vontade de que o fundo de sua página seja diferente, com fotos ou texturas diferentes. A maioria das pessoas preferem adicionar texturas, pois fotos demoram demais a serem carregadas. Para acrescentar uma textura ou uma foto em seu fundo da página, é necessário que você tenha o arquivo pronto e com extensão .gif ou .jpg, tendo isso você utiliza o atributo BACKGROUND, na tag <BODY>.
EX: <BODY BACKGROUND="espaço.gif" ALT="Voando no espaço">
Essa textura se multiplicará, formando um fundo de página com o aspecto de um vôo pelo espaço. O nome do arquivo dessa textura é "espaço.gif" e para você inserí-la em sua página, clique com o botão direito do mouse e escolha "Salvar figura como" e salve no diretório de sua preferência. Insira essa figura na sua página e veja o resultado.