ATENÇÃO: este tutorial foi publicado originalmente em 2002; algumas informações podem estar desatualizadas
Agora que já explicamos como fazer um documento hipertexto, podemos finalmente incluir imagens nessa página Web.
Para inserir uma imagem basta indicar o nome do arquivo dentro do tag <IMG>.
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif>
Note que a imagem...<P>
Exemplo 11: incluindo uma imagem Neste exemplo, a imagem imagem.gif aparece alinhada entre as frases “Aqui você vê uma imagem:” e “Note que a imagem...”.
Se a imagem estiver em um diretório diferente do arquivo de texto, é preciso especificá-lo na referência. Recomenda-se que as imagens sejam colocadas em um diretório separado para facilitar a manutenção dos arquivos. Exemplo:
Aqui você vê uma imagem:<P>
<IMG SRC=imagens/imagem.gif>
Note que a imagem...<P>
Alinhamento da imagem No exemplo anterior, a imagem ficou alinhada à esquerda da tela e o texto imediatamente posterior a ela alinhou-se com o canto inferior direito da imagem. Esse é o alinhamento padrão de textos com imagens. É possível mudar o alinhamento utilizando o atributo ALIGN= dentro do tag <IMG>.
Aqui você vê uma imagem:<P>
<IMG SRC=imagens/imagem.gif ALIGN=TOP>
Note que a imagem...<P>
Agora a imagem ficou alinhada à esquerda e com o topo do texto “Note que a imagem...”. Para alinhar a imagem à esquerda, mas com o texto no centro, usa-se ALIGN=MIDDLE.
O texto utilizado imediatamente depois da imagem nos exemplos anteriores é curto. Se for usado um texto mais longo, apenas uma linha ficará alinhada com a imagem. O restante será jogado para a linha seguinte. Exemplo:
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif align=top>
Note que a imagem está alinhada à esquerda. O texto imediatamente posterior à imagem fica alinhado no canto superior direito. Mas apenas uma linha acompanha a imagem. O restante do texto é jogado para a linha seguinte.<P>
Exemplo 12: quebra de linha depois da imagem Este problema pode ser contornado utilizando outros atributos de alinhamento que fazem a imagem “flutuar” ao lado do texto. Exemplo:
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif ALIGN=LEFT>
Note que a imagem está alinhada à esquerda. Alguns navegadores, como o Netscape, permitem colocar o texto em torno da imagem, independente de seu comprimento. É como se a imagem estivesse flutuando no meio do texto.<P>
Exemplo 13: texto contornando a imagem Neste exemplo, a imagem ficou alinhada à esquerda e permitiu que todo o texto imediatamente posterior ficasse alinhado à direita. Para alinhar a imagem à direita, usa-se o atributo ALIGN=RIGHT. A lista completa das formas de se alinhar uma imagem está no Apêndice B.
No entanto, quando usa-se os atributos ALIGN=LEFT ou ALIGN=RIGHT, todo o texto imediatamente posterior é puxado para o lado da imagem. Se for necessário interromper o fluxo de texto ao lado da imagem, pode-se usar o tag <BR> com o atributo CLEAR=ALL.
Aqui você vê uma imagem:<P>
<IMG SRC=imagem.gif ALIGN=LEFT>
Note que a imagem está alinhada à direita. O texto está contornando a imagem, mas somente até este ponto. <BR CLEAR=ALL>A partir daqui o texto é jogado para a próxima margem livre em qualquer um dos lados da janela.<P>
Exemplo 14: interrupção de um texto em torno da imagem Borda É possível colocar uma borda em volta da imagem. O atributo é BORDER. O valor da borda é expresso em pixels.
Aqui você vê uma imagem:<P>
<IMG SRC=imagens/imagem.gif BORDER=2>
Note que a imagem...<P>
Exemplo 15: a borda de uma imagem Texto alternativo De nada vai adiantar caprichar na produção de uma imagem, se a pessoa que está vendo as páginas utiliza um navegador incapaz de mostrar imagens (sim, eles existem e são bastante utilizados, principalmente o lynx).
Outros usuários também ajustam o navegador para não carregar imediatamente as imagens. Por causa de conexões lentas, algumas pessoas preferem receber o texto e depois pedir as imagens. Mas para isso elas precisam saber do que se tratam as imagens. Essa é a função do texto alternativo. Pode-se colocar o título ou a melhor descrição possível de uma imagem utilizando o atributo alt:
<IMG SRC=imagem.gif ALT=nome_da_imagem>
Exemplo 16: o texto alternativo de uma imagem No exemplo acima, o navegador foi ajustado para não carregar a imagem imediatamente ao carregar a página. O texto alternativo aparece junto com o ícone de imagem.
Margens Pode-se controlar o espaço em volta da imagem colocando o valor em pixels da margem desejada. É possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e embaixo da imagem, o atributo é VSPACE. Se o problema for espaço dos lados da imagem, usa-se o atributo HSPACE para definir as margens horizontais.
<IMG SRC=imagem.gif” VSPACE=10 HSPACE=20>
Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da imagem (em cima e em baixo e à direita e à esquerda). Não há como definir uma margem maior apenas à esquerda ou somente na parte inferior.
Formatos e interlaceamento Os formatos de imagem mais aceitos pelos navegadores são GIF e JPG. A vantagem do formato GIF é que se pode gravar na opção GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, o usuário tem a impressão da imagem estar sendo carregada mais rápido.
O formato JPG oferece um fator de compressão maior do que o GIF. As imagens ocupam menos espaço em bytes. Mas o processo de compressão do JPG pode causar alguma perda de qualidade à imagem. Como regra geral, o formato JPG deve ser usado em imagens fotográficas e o GIF em imagens criadas em computador ou desenhadas. A compressão do formato GIF se dá ainda melhor com imagens com poucas cores e trechos contínuos de uma cor só.
Dimensões Se as dimensões da imagem forem colocadas na referência, o usuário terá a impressão de que a página foi carregada mais rápido.
Fornecendo as dimensões, o navegador reserva o espaço para a imagem e vai carregando o texto para que o usuário possa começar a ler. Depois de carregado o texto, as imagens começam a ser mostradas. Deve-se escrever a referência de imagem neste formato:
<IMG SRC=“imagem.gif” width=310 height=220>
Índice Continuação:Tabelas 
IMPRIMIR
ENVIAR POR EMAIL
COMUNICAR ERRO
