Curso de HTML:
Tags básicas
Tags avançadas
Imagens e tabelas

Detalhe:
Este quadro é uma tabela de uma só célula.

Links:
Ótimo portal
Página do Greg
Página do Randy
Portal Meio dia
E-mail pessoal
Diagramação em HTML



Através dos simples comandos (ou tags) de HTML é possível fazer formatações bastante elaboradas. Procure identificar no código fonte desta página os diferentes recursos que foram utilizados.


  • Tags de formatação (cores, fontes...);
  • Colunas de texto;
  • Tabelas;
  • Uso de imagens;
  • Atributos de alinhamento;
  • Listas com marcadores (esta aqui!).

A tag <IMG> permite definir vários modos de alinhamento de texto, para que seja possível inserir figuras dentro de uma seqüência de parágrafos sem que seja necessário recorrer a uma tabela.
Vejamos como exemplo a imagem ao lado. Esta é uma esfera texturizada gerada num programa de editoração gráfica 3D. Ela foi colocada à direita deste parágrafo através da opção ALIGN=RIGHT. A definição de alinhamento do texto manteve-se inalterada: o texto continua justificado. O resultado torna-se bem natural, e não destoa do padrão visual geral da página, sem formatações extras. À medida que o texto se estende e deixa de caber ao lado do figura, sua formatação é encaixada normalmente logo abaixo da figura, como vemos aqui, e até mesmo quando há quebras de linha.

Quando se prepara a diagramação de uma página, é importante lembrar-se de que há diferentes visualizações possíveis de uma página. A tendência é que a web seja acessível das mais diferentes formas, não só a partir de PCs e Macs, mas também de outros computadores (alguns até de 8 bits), videogames, set-top-boxes (como a WebTV) e até palmtops (como o Pilot). Isso significa diferentes resoluções, capacidades gráficas e profundidade de cores (color depth).
Limitando-se aos computadores desktop/notebook de 16 e 32 bits, confira nesta tabela algumas das resoluções mais comuns:


Modo Resolução Color depth Cores
Sistemas de 16 bits
(150 KB por tela)
640x480 4 bits 16
Laptops /
Desktops low end
800x600 8 bits 256
Uma boa média
(que eu uso :) )
800x600 16 bits 65.536
Desktops high end 1024x768 24 bits 16.777.216
Desperdício de VRAM
(5 MB por tela!)
1280x1024 32 bits 4.294.967.296

Procurar simular como a página aparecerá em cada sistema é importante. Experimentar os modos vistos acima são uma boa solução para os dias de hoje, exceto o último, que é pouco usado e pouco suportado pelas páginas de hoje.
Perceba que o papel de parede é sempre colocado "lado a lado" (tiled). Para que o papel de parede aparente estar replicado apenas verticalmente e não horizontalmente, usa-se uma imagem maior ou igual ao tamanho da tela.
Mas qual o tamanho da tela? Eu, e a maioria dos web designers, contenta-se em arquivos de 1024 pixels de largura, já que 1024x768 é um modo cada vez mais usado. Se sua placa de vídeo e monitor suportam o modo 1280x1024, experimente visualizar esta página: a barra azul será replicada após o texto, e este efeito desagradável aparece na maioria das páginas que desenham este "frame virtual".
A solução seria usar um arquivo gráfico mais largo, mas sempre pode haver uma resolução maior amanhã, então eleger 1024 como a maior largura entre as usadas parece ser razoável para os padrões de hoje, no fim dos anos 90.