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.
|