| HTML PARA INICIANTES |
Os formatos de imagens mais comuns aceitos pelos navegadores e que podem ser colocados ao lado de textos em sua página são em Bitmap, GIF ou JPEG. Existem muitos outros formatos criados mas você deve limitar o uso apenas desses.
Cada imagem em determinado formato leva um determinado tempo para ser baixada no computador do visitante, e quanto mais imagens uma página tiver, mais tempo para ser apresentada a página demandará. Portanto, seja cuidadoso quanto ao tipo, tamanho e quantidade de imagens que você coloca na sua página.
Para incluir uma imagem a codificação é esta:
| <IMG SRC=" " ALT=" "> |
Se a imagem for em formato Bitmap, após a digitação do nome da imagem deve-se colocar a extensão .xbm e para imagem GIF colocar a extensão .gif e para imagem JPEG colocar a extensão .jpg.
O atributo ALT refere-se a um texto curto que deverá aparecer no caso da imagem não ser exibida, geralmente deve-se colocar o nome da imagem (por exemplo, ALT="foto 5") ou uma explicação sobre o porquê da imagem ter sido colocada ali (por exemplo, ALT="link para foto 5"). Este atributo ALT é muito útil ao internauta quando a imagem não carrega por ser muito grande, ou por chegar danificada por um problema de servidor, ou quando a velocidade de conexão for muito lenta, também faz com que a imagem não seja exibida. O atributo ALT faz com que seja mostrado um box com um xis, mais o texto que você escolheu para ALT.
Como exemplo bem simples, veja como ficaria a codificação para uma suposta imagem chamada morenodecueca, supondo que esta imagem fica armazenada no site de hospedagem no mesmo diretório da página na qual você a esta inserindo:
Evidentemente que você deve incluir o endereço relativo da pasta onde está a imagem, no caso acima o endereço completo é o próprio nome da imagem e sua extensão, pois como foi dito, a imagem está na mesma pasta (diretório) que a página que a contém. Se a imagem ficou armazenada em outra pasta, deve-ser digitar o endereço relativo da imagem.
Acho que exemplificando ficar mais fácil de entender. Suponha que você quer colocar a imagem chamada sunga01.jpg que está hospedada na pasta (diretório) chamado Sungas, colocá-la em sua página chamada foto_do_mes.html que está guardada na pasta Galerias.
 Galerias |
| Sungas |
<IMG SRC="./sungas/sunga01.jpg" ALT="sunga01">
É extremamente recomendável que você inclua mais informações sobre a imagem, como o tamanho. Assim o navegador do internauta será informado qual o tamanho da imagem e calculará o tempo gasto para a sua baixa (tempo de downloading) e apresentação desta imagem junto com o texto da página. Enquanto a imagem ainda não aparece, o navegador reserva uma quantidade de espaço, em pixels, a ser usada pela imagem na página.
Por exemplo, imagine que uma imagem chamada morenodecueca.jpg tenha uma largura de 250 pixels (width=250) e uma altura de 400 pixels (height=400), a codificação passa a ser a seguinte:
A ordem de colocação dos atributos de tamanho não é importante, portanto, você poderia colocar como abaixo mostrado, que dá no mesmo:
Agora um detalhe: não tente colocar em determinado local de sua página uma imagem com atributos de tamanho diferentes do tamanho real, isto é, digamos que você quer colocar na sua página a imagem morenodecueca.jpg que possui largura=250 e altura=400, porém o local que você dispõe para colocá-la tem a metade do tamanho, ou seja, largura=125 e altura=200.
Ai você, usando muitos neurônios, poderia pensar assim: "ora, como onde vou colocar a foto tem dimensão proporcional ao tamanho da foto original, eu vou digitar este tamanho como se fosse o tamanho da foto e ela não sairá distorcida porque o tamanho que vou digitar na codificação é proporcional ao tamanho real".
Alguns navegadores executarão a imagem exatamente do tamanho definido na codificação, o Internet Explorer faz isso, pode 'encolher' ou 'expandir' a foto para aquele tamanho definido na codificação. Contudo, definitivamente, não é uma boa idéia digitar WIDHT e HEIGHT diferentes do real, pois nem todos os navegadores executam este artifício. Se você tem uma foto e quer mudar o tamanho dela, então mude realmente o tamanho dela usando um editor de imagens, como o ACDSee por exemplo, mas nunca 'minta' o atributo de tamanho da imagem. Cheque se a imagem que você dispõe cabe na página e use as dimensões verdadeiras nos atributos de tamanho.
Você tem flexibilidade quanto à disposição das imagens. Você pode colocar uma imagem numa página sem nenhuma obrigação de vir acompanhada de texto, pode colocar uma imagem com algum texto junto a qualquer lado da imagem ou ainda, ter uma imagem alinhada com um texto.
Vamos aprender como fazer o alinhamento de imagem e texto, usando o atributo ALIGN.
| <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" ALT="moreno de cueca"> |
O padrão que ocorre automáticamente é a parte inferior da imagem ficar alinhada com o texto, como você pode perceber neste parágrafo. Caso você não atribua nada, isto é, você não assuma na codificação um valor para ALIGN, então a imagem ficará alinhado 'por baixo' com o texto.
Se mesmo não havendo necessidade de se digitar o atributo ALIGN quando se quer que a imagem fique alinhada com o texto por baixo, você quisesse digitá-lo, escreva então ALIGN="bottom", ficando a seguinte codificação.
| <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" ALIGN="bottom" ALT="moreno de cueca"> |
Veja que este alinhamento difere do anterior pois o texto está alinhado com o topo da imagem. Note, porém, que isto acontece unicamente com uma linha de texto, as outras linhas de texto serão apresentadas na base da imagem.
| <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" ALIGN="top" ALT="moreno de cueca"> |
Por fim, há a possibilidade de fazer o alinhamento da imagem e o texto com o texto aparecendo na posição mediana da imagem, e somente uma unica linha de texto fica centralizada, as outras linhas de texto serão apresentadas na base da imagem. Você não deve estar percebendo bem isso devido a imagem ter uma altura exígua, ok?
| <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" ALIGN="center" ALT="moreno de cueca"> |
Para apresentar uma imagem, somente imagem sem texto acompanhado, por exemplo, uma página contendo uma foto, ou ainda, na parte superior de sua página você quer colocar uma imagem de um logotipo, o logotipo de seu site, então você vai se servir da tag de parágrafo <P ALIGN=" ">, podendo escolher alinhamento à esquerda, ALIGN=LEFT, alinhamento à direita, ALIGN=right, ou ALIGN=center para alinhar ao centro.
| <P ALIGN="left"> <IMG SRC="logotipo_mundo_masculino.jpg" HEIGHT="25" WIDTH="100" ALIGN="center" ALT="logotipo"> </P> |
| <P ALIGN="center"> <IMG SRC="logotipo_mundo_masculino.jpg" HEIGHT="25" WIDTH="100" ALIGN="center" ALT="logotipo"> </P> |
| <P ALIGN="right"> <IMG SRC="logotipo_mundo_masculino.jpg" HEIGHT="25" WIDTH="100" ALIGN="center" ALT="logotipo"> </P> |
Para apresentar a imagem contornada por bordas usa-se o atributo BORDER=" ", sendo entre estas aspas coloca-se valores numéricos (1, 2, 3...), quanto maior o valor, mais grossa a borda fica. Para o valor BORDER="0" (zero) nenhuma borda será colocada, o mesmo acontecendo se não se especificar o atributo border.
Quanto a cor da borda, por 'default' (padrão), a borda tem a mesma cor do TEXT=" " contido na tag BODY, sendo assim, se você quer colocar borda vermelha ao redor de uma imagem, insira um TEXT="FF0000" dentro da tag BODY.
| <P align="center"> <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" BORDER="1" ALT="moreno de cueca"> </P> |
| <P align="center"> <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" BORDER="5" ALT="moreno de cueca"> </P> |
Usa-se o código HTML <A HREF=""> </A> contendo a codificação da imagem para criar o link, neste exemplo a imagem morenodecueca.jpg é um link para a página chamada galeria.html, veja:
| <A HREF="galeria.html"> <IMG SRC="morenodecueca.jpg" HEIGHT="25" WIDTH="100" BORDER="1" ALT="moreno de cueca"> </A> |
Os navegadores mais recentes permitem o recurso de exibir imagem como fundo de página, alguns internautas gostam de páginas bem elaboradas contendo imagem como fundo, outros internautas acham isso irritante, ainda mais quando a imagem atrapalha a leitura ou na atenção ao conteúdo da página. Tome então cuidado de checar se a imagem escolhida como fundo tem tamanho tal que seja carregada o mais brevemente possível, você deve evitar imagens com muitos KBytes, grandes e pesadas, pois o texto e demais elementos vão aparecer antes que a imagem de fundo, inclusive demorarão um pouco a aparecerem estes textos e outras imagens contidas na página, devido ao tamanho de pixels reservados para a imagem de fundo. E tome cuidado para que, caso a imagem de fundo não seja carregada e exibida, o internauta possa visualisar mesmo assim a sua página.
Por fim, a imagem de fundo deve ser compatível com a cor do texto e com as demais cores usadas nas imagens, etc, contidas na sua página.
No caso em que a imagem de fundo não ser uma fotografia, um logotipo, um texto qualquer que ocupe toda a tela, você tem o recurso de criar esta imagem de fundo em tamanho reduzido, enquanto o navegador tem a habilidade de repetir a imagem de forma tal que toda a tela seja preenchida pela imagem. Ela será colocada lado-a-lado até que todo o campo visual da tela seja completamente tomado. Este é o efeito 'tiling", tijolinho.
Para conseguir isto você deve incluir na tag BODY o atributo BACKGROUND=" ", sendo que entre as aspas você deve digitar o nome da imagem, inclusive sua pasta no caso da imagem não estiver no mesmo diretório.
Supondo que o nome da imagem seja estrelas.gif, veja este exemplo:
| <BODY BACKGROUND="estrelas.gif"> |
Sempre que você escolher uma imagem como fundo de sua página, deve escolher também uma cor de fundo de página como alternativa de fundo, caso a imagem de fundo de página, por alguma eventualidade, não seja carregada. E lembre-se também de escolher como cor de fundo de página uma cor que seja próxima da cor predominante na imagem de fundo, pois assim a legibilidade do texto e demais elementos contantes na página continuarão fáceis de serem entendidos pelo visitante.
O atributo a ser digitado é o BGCOLOR=" ", veja como fica a codificação em BODY, aproveitando o exemplo anterior e escolhendo azul-claro como cor de fundo (supondo que azul-claro é a cor que predomina na imagem estrelas.gif):
| <BODY BACKGROUND="estrelas.gif" BGCOLOR="#add8e6"> |