11. Arranjo gráfico das páginas
Utilizando a linguagem HTML nós podemos criar arranjos gráficos de página bastante elaborados nos quais podem existir setores com: barras de navegação, caixas com várias categorias de destaques, blocos de texto curtos, blocos de texto extensos, imagens, animações em flash, etc. O HTML necessário para produzir estes resultados pode ser bastante complexo. Existem duas formas possíveis para construir estes arranjos de página: 1) usar um programa de software que escreve HTML (como o Macromedia Dreamweaver MX) ou 2) trabalhar de forma muito metódica e escrever tudo num editor de texto.
Qualquer que seja o caminho que escolher, se quiser obter bons resultados você vai ter que aprender HTML. Mesmo que use um programa que escreva HTML, há de chegar um momento em que ele não consegue produzir sozinho o resultado que você deseja. Nessa altura você vai ter de lhe dar uma ajuda editando diretamente uma parte do HTML e corrigindo-o.
A criação de arranjos gráficos elaborados para as páginas da Web é uma tarefa que exige bastante treino e alguma sensibilidade para questões de design gráfico.
12. Formatação com estilos CSS
Em HTML 4 toda a formatação deve ser removida dos elementos da linguagem e colocada em Folhas de Estilos em Cascata (CSS)
12.1 Com atuam os estilos?
Quando o browser lê uma folha de estilos ele guarda na memória as definições que encontra. Ao apresentar a página, que contém referências a esses estilos, ele aplica as definições que leu antes para criar o aspecto gráfico desejado. Existem três maneiras diferentes para definir estilos CSS.
12.2 Folha de estilos externa
Uma folha de estilos externa é solução mais indicada quando se pretende aplicar os mesmos estilos a várias páginas. Este método de formatação permite-nos alterar os estilos apenas na folha e tê-los aplicados a todas as páginas imediatamente. Todas as páginas ficam atualizadas com as novas definições. Para uma página poder usar uma folha de estilos basta colocar dentro do cabeçalho (<head>) um elemento <link> com uma referência para a folha de estilos que contém as definições, como se ilustra a seguir:
<head>
<link rel="stylesheet" type="text/css" href="meu_estilo.css"> </head>
12.3 Folhas de estilos internas
As folhas de estilos internas devem ser usadas quando as definições são usadas por um único documento. Neste caso as definições dos estilos são colocadas
<head>
<style type="text/css">
body { background-color: red } p { margin-left: 20px } </style>
</head>
12.4 Estilos "inline"
Um estilo "inline" usa-se quando a definição em causa só precisa ser usada uma única vez.
A definição de estilos "inline" faz-se através do atributo style colocado no elemento ao qual queremos aplicar o estilo. A definição pode conter qualquer uma das propriedades CSS. O exemplo seguinte mostra como podemos alterar a cor e a margem esquerda de um parágrafo:
<p style="color: blue; margin-left: 20px">Isto é um parágrafo</p>
Para aprender estilos CSS faça o curso de Folhas de Estilos em Cascata.
12.5 Elementos para estilos
Elemento Descrição<style> Define estilos CSS
<link> Define uma referência para um recurso externo
<div> Insere uma seção no documento
<span> Usa-se para alterar as definições de estilo apenas numa pequena parte do texto
Exemplos de Aplicação
Definição de estilos dentro do cabeçalho do documento HTML
<html> <head> <title>Exemplo</title> <style type="text/css"> h1 {color: red} h3 {color: blue} </style> </head> <body>
<h1>Isto é um cabeçalho de nível 1</h1> <h3>Isto é um cabeçalho de nível 3</h3> </body>
Utilização de estilos definidos numa folha de estilos externa
estilos.css
h1,h2 { font-family: sans-serif; color: #666666; } p { font-family: cursive; }
<html> <head>
<link href="estilos.css" type="text/css" rel="stylesheet"> <title>Exemplo</title>
</head> <body>
<h1>Este cabeçalho foi formatado com uma folha de estilos.</h1> <p>Este parágrafo também!</p>
</body> </html>
12.6 O Elemento <font>
O elemento <font> foi desaprovado nas especificações do HTML 4 e em HTML-Strict ele foi totalmente removido.
Apesar de ainda ser usado por muita gente que continua a usar as técnicas do passado, o uso deste elemento é contra indicado, devendo fazer-se a formatação das páginas com estilos CSS. Apesar disso, como este elemento ainda é bastante usado deixa-se aqui alguma informação a seu respeito.
O código seguinte permite-lhe especificar tanto o tamanho como o tipo de letra com que o texto será escrito pelo browser:
<html> <body> <p>
<font size="2" face="Verdana">Isto é um parágrafo.</font> </p>
<p>
<font size="3" face="Times">Isto é outro parágrafo.</font> </p>
</body> </html>