Informática

» Notícias

» Download

» Vírus e Cia.

» Ajuda

» e-Business

» Games

» Análises

» Colunistas

» Imagens

» Especiais

» Boletins

» Contato

CANAIS

» IDG Now!

» PC World

» Wired News

» Outer Space

» Computerworld

» Macmania

» Tucows

» WD/Jobs

RELACIONADOS

» Jornal do Brasil

» MP3Box

BOLETIM

Username
Senha

Assinar
Cancelar


Sem Username?
BUSCA

digite + enter

» Terra Busca

Capa » Ajuda » Tutoriais

ÍNDICE
» Introdução
» Uma página Web simples
» Melhorando a aparência
» Hyperlinks
» Imagens
» Tabelas
» Dicas
» Mapas
» Erros mais comuns
» Exemplos de páginas Web
» Tabela de acentos
» Lista de tags
» Cores
Curso básico de HTML
CAÍQUE SEVERO

Imagens

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>

<<< Anterior | Início | Próxima >>>


Volta para a capa | Volta para Ajuda | Volta para Tutoriais


Mais tutoriais

 » Conheça o Terra em outros paísesResolução mínima de 800x600 © Copyright 2003,Terra Networks, S.AProibida sua reprodução total ou parcial
  Anuncie | Assine | Central de Assinate | Clube Terra | Fale com o Terra | Aviso Legal | Política de Privacidade