Figuras

Quando você começa a criar sua página, uma das primeiras coisas que vai querer adicionar são imagens. Os seres humanos valorizam o visual e as imagens podem mudar totalmente a cara do site.

Você pode usar imagens pequenas:

Imagens longas e finas:

Imagens maiores:

HowStuffWorks

Ou até mesmo animações:

Você pode usar pequenas imagens como marcadores customizados, como estes:

Primeira linha
Segunda linha
Terceira linha

Transforme um gráfico em marcador, adicionando a tag da imagem onde você quer que o marcador apareça; não é necessário usar a tag <ul>.

A grande lista
Confira a Grande lista de tags de HTML(em inglês). É um guia de referência em uma única página para impressão com todas as tags de HTML apresentadas neste artigo - de fácil acesso e em formato PDF para impressão mais fácil!
Imagens longas e finas podem ser usadas como separadores. Imagens maiores podem ser usadas como logos ou ilustrações - praticamente qualquer coisa que você imaginar.

Há duas maneiras de obter imagens gráficas: você pode baixá-las de vários sites de "clip art grátis" na Internet, ou pode criá-las você mesmo. Alguns sites que oferecem gráficos e animações gratuitos são Page Works, A-1 All Free Clip Art, e The Free Graphics Store (em inglês). Você também pode visitar The Free Site, Web Places e Free Graphics (em inglês) para acessar diretórios de sites de imagens gratuitas.

Digamos que você vá a um site de gráficos grátis e goste de uma imagem. Se você clicar com o botão direito na imagem, um menu vai abrir e uma das opções será "Salvar imagem como...". Salve a imagem na pasta onde sua página está guardada.

Se você quiser criar suas próprias imagens, vai precisar de um programa que edite arquivos GIF e JPG. Um muito programa de edição de imagens muito popular disponível na Internet é o Paint Shop Pro. Você pode baixar uma cópia aqui (em inglês). Com um pouco de prática e um mínimo de habilidade artística, logo você estará criando imagens como um profissional!

Como descrevemos nas "Tags básicas de formatação HTML", as imagens são inseridas em uma página com a tag:

<img src="nome do arquivo">

Você também pode usar uma imagem como link para outra página ou elemento. Para isto, basta inserir a tag "img src" depois da tag âncora. Não se esqueça de incluir "border=0" ou a sua imagem vai ganhar uma borda feia.

Exemplo: <a href=http://www.hsw.com.br><img src="hswlogo.jpg" border=0></a>

Neste exemplo, se o usuário clicar na imagem "hswlogo.jpg", será levado à homepage da HowStuffWorks em http://www.hsw.com.br.

Qualquer imagem digital também pode ser usada como plano de fundo (background) para sua página. Basta adicionar background="nome do arquivo de imagem" dentro da tag <body>.

Exemplo: <body background="hsw-logo.jpg">

Etiquetas
Outra tag útil, mas não obrigatória, que você pode adicionar à sua imagem é "alt". Esta tag dá uma etiqueta para sua imagem, e aparece quando o usuário passa o mouse sobre ela. Também aparece antes da imagem quando sua página está carregando no navegador, prendendo a atenção do usuário enquanto a imagem carrega. Você pode escrever a mensagem que quiser usando a tag "alt".

Exemplo: <img src="hswlogo.jpg" alt="Informações Corporativas da HSW">

Alinhamento de figura
O alinhamento horizontal das imagens na sua página é formatado usando as tags e técnicas explicadas na seção sobre justificação. Uma rápida revisão:

  • Use a tag <div align=.".."> antes da tag de imagem para centralizar ou justificar à direita ou à esquerda.
  • Use a tag </div> depois da tag de imagem para encerrar a justificação.
  • Use a tag <align=.".."> dentro da tag "img src" para fazer o texto ficar em volta da imagem.

Insira estas tags dentro da tag "img src" para fazer o alinhamento vertical das imagens em relação ao texto:

  • align="bottom"
    O texto fica alinhado à base da figura.

    HowStuffWorks TEXTO

    <img src="http://static.hsw.com.br/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="bottom">


  • align="top"
    O texto fica alinhado ao topo da figura.

    HowStuffWorks TEXTO

    <img src="http://static.hsw.com.br/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="top">


  • align="middle"
    O texto fica alinhado ao meio da figura.

    HowStuffWorks TEXTO

    <img src="http://static.hsw.com.br/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="middle">


Em cada um dos exemplos acima, a imagem está justificada à esquerda por padrão, então o texto aparece à direita. Se você quiser o texto à esquerda e a imagem à direita, você pode adicionar a tag de alinhamento de figura <div align> discutida acima.

Se as suas imagens não funcionarem...

Recebemos muitos e-mails de pessoas com problemas para adicionar imagens às páginas. Quando GIFs e JPGs dão erro, aparecem como um pequeno X vermelho, assim:

Quando você encontra este problema na página, significa que você não digitou o nome correto do arquivo da imagem. Os passos para corrigir o problema são:

  • Comece por simplificar o processo. Coloque o arquivo HTML e o arquivo da imagem na mesma pasta. Renomeie o arquivo da imagem para xyz.gif (ou xyz.jpg). Crie uma tag assim <img src="xyz.gif"> na sua página HTML. Visualize a página no navegador. Se você ainda vir o X vermelho ao invés da imagem, então...

  • Confira se o arquivo renomeado está mesmo com o nome xyz.gif. Em uma máquina com UNIX, letras maiúsculas e minúsculas fazem diferença, então confira se o que deveria ser maiúsculo está maiúsculo, e o que deveria ser minúsculo está minúsculo. O nome Xyz.gif é totalmente diferente de xyz.gif para o UNIX.

  • Em uma máquina rodando Windows, o sistema operacional às vezes adiciona sufixos ao nome do arquivo sem avisar você. Por exemplo, você pode ver xyz.gif no Explorer, mas o Windows pode ter renomeado o arquivo para xyz.gif.gif. O jeito mais fácil de ver se isto aconteceu é usar o comando dir no prompt do MS-DOS, pois ali você vê os nomes reais dos arquivos. Se o Windows estiver de fato adicionando sufixos, você pode desabilitar esta função na caixa de diálogo de Opções do Explorer.

Quando você encontra este problema na página, significa que você não digitou o nome correto do arquivo da imagem. Os passos para corrigir o problema são:

  • Comece por simplificar o processo. Coloque o arquivo HTML e o arquivo da imagem na mesma pasta. Renomeie o arquivo da imagem para xyz.gif (ou xyz.jpg). Crie uma tag assim <img src="xyz.gif"> na sua página HTML. Visualize a página no navegador. Se você ainda vir o X vermelho ao invés da imagem, então...

  • Confira se o arquivo renomeado está mesmo com o nome xyz.gif. Em uma máquina com UNIX, letras maiúsculas e minúsculas fazem diferença, então confira se o que deveria ser maiúsculo está maiúsculo, e o que deveria ser minúsculo está minúsculo. O nome Xyz.gif é totalmente diferente de xyz.gif para o UNIX.

  • Em uma máquina rodando Windows, o sistema operacional às vezes adiciona sufixos ao nome do arquivo sem avisar você. Por exemplo, você pode ver xyz.gif no Explorer, mas o Windows pode ter renomeado o arquivo para xyz.gif.gif. O jeito mais fácil de ver se isto aconteceu é usar o comando dir no prompt do MS-DOS, pois ali você vê os nomes reais dos arquivos. Se o Windows estiver de fato adicionando sufixos, você pode desabilitar esta função na caixa de diálogo de Opções do Explorer.

Quando você encontra este problema na página, significa que você não digitou o nome correto do arquivo da imagem. Os passos para corrigir o problema são:

  • Comece por simplificar o processo. Coloque o arquivo HTML e o arquivo da imagem na mesma pasta. Renomeie o arquivo da imagem para xyz.gif (ou xyz.jpg). Crie uma tag assim <img src="xyz.gif"> na sua página HTML. Visualize a página no navegador. Se você ainda vir o X vermelho ao invés da imagem, então...

  • Confira se o arquivo renomeado está mesmo com o nome xyz.gif. Em uma máquina com UNIX, letras maiúsculas e minúsculas fazem diferença, então confira se o que deveria ser maiúsculo está maiúsculo, e o que deveria ser minúsculo está minúsculo. O nome Xyz.gif é totalmente diferente de xyz.gif para o UNIX.

  • Em uma máquina rodando Windows, o sistema operacional às vezes adiciona sufixos ao nome do arquivo sem avisar você. Por exemplo, você pode ver xyz.gif no Explorer, mas o Windows pode ter renomeado o arquivo para xyz.gif.gif. O jeito mais fácil de ver se isto aconteceu é usar o comando dir no prompt do MS-DOS, pois ali você vê os nomes reais dos arquivos. Se o Windows estiver de fato adicionando sufixos, você pode desabilitar esta função na caixa de diálogo de Opções do Explorer.

    Criando GIFs animados
    GIFS animados dão movimento e brilho à sua página. Uma boa ferramenta para criar GIFs animados é The GIF Construction Set (em inglês). Com esta ferramenta, ou outra parecida, você pode criar quadros diferentes em uma seqüência animada e colocar todos eles em uma única imagem. Um exemplo de cinco quadros e um GIF animado criado a partir deles:

    O GIF animado final:

    Recursos
    • Grande Lista de tags de HTML (em inglês) da HowStuffWorks - guia de referência para impressão que contém todas as tags de HTML mais comuns em uma única página.