05 18:04 Page 53
TUTORIAL/LAYOUT
ADEUS, TABELAS
DE HTML
O PADRÃO CSS DEFINE O LAYOUT DO SITE, DEIXA
A PÁGINA LEVE E RÁPIDA DE CARREGAR
POR ANDRÉ CARDOZO
C O L E Ç Ã O I N F O > 53
TUTORIAL/LAYOUT 23.05.05 18:05 Page 54
TUTORIAL/LAYOUT TUTORIAL/LAYOUT
Escolhemos um #topo {
layout com quatro margin: 5px;
áreas: cabeçalho ho- height: 80px;
rizontal (onde nor- background: silver;
malmente entram lo- }
gotipo e banner), co- #esquerda {
luna esquerda (me- position: absolute;
nu de navegação top: 105px;
principal), coluna left: 10px;
central (área de con- width: 150px;
teúdo e destaques) e background: silver;
coluna direita (nave- }
gação secundária, CSS no Firefox: leitura altera o título e a coluna à direita #meio {
CSS no Opera: diferença de leitura na coluna à direita
links para parceiros margin-left: 170px;
etc.). O arquivo pronto está dispo- de conteúdo, criando camadas que margin-right: 220px; O primeiro bloco de comandos
nível para download no endereço podem ser manipuladas separada- background: silver; se refere ao cabeçalho. Os elemen-
www.info.abril.com.br/download/ mente. Dentro desse depósito, po- } tos “margin” e “height” definem,
3466.shtml. demos usar normalmente todos os #direita { respectivamente, a margem e a al-
comandos HTML. position: absolute; tura em pixels. O atributo “back-
1. O HTML Note que cada “div” possui um top: 105px; ground” determina a cor de fundo,
O primeiro passo é criar o arquivo atributo “id” distinto, que define right: 10px; mas é opcional e foi incluído ape-
HTML. Dentro do comando “head”, todas as áreas do layout. Assim, já width: 200px; nas para facilitar a visualização.
é necessário escrever a seguinte tag: temos no arquivo HTML os quatro background: silver; A seguir, definimos as três colu-
<link rel=“stylesheet” href=” blocos de conteúdo. Salve o arqui- } nas do layout. O bloco da esquer-
estilo. css“type=”text/ css”> vo e teste no browser.
Ela indica ao browser qual é a
folha de estilo que deve ser toma- 2.A FOLHA DE ESTILO VALIDE SUA PÁGINA
do como referência para o layout Por enquanto, as áreas do layout O tableless já faz parte do Para seguir os padrões à
(neste caso, “estilo.css”). No corpo ainda não estão em suas devidas conjunto de padrões da web, risca, verifique se a página
do arquivo HTML temos quatro blo- posições e são exibidas uma abai- especificados pelo W3C que você criou está correta,
cos que definem as áreas: xo da outra. Isso ocorre porque não (www.w3c.org), o consórcio utilizando o serviço W3C
<div id=“topo”>conteúdo do criamos o documento CSS, que é o que dita as regras Markup Validation Services,
cabeçalho </div> responsável por definir a posição tecnológicas da grande rede. um validador de HTML
<div id=“esquerda”>conteúdo de cada bloco na página. Esse se- Por isso mesmo, a tendência gratuito disponível no
da coluna esquerda</div> rá nosso próximo passo. é de aumentar a endereço validator.w3.org.
<div id=“meio”>conteúdo da A folha de estilo nada mais é do compatibilidade do padrão Basta postar o endereço de
coluna central</div> que um arquivo em texto puro com entre os navegadores e sua página, que o serviço
<div id=“direita”>conteúdo da a extensão CSS. Abrimos então o acelerar o tempo de mostrará as tags que
coluna direita</div> Bloco de Notas do Windows e es- renderização das páginas. apresentam erros.
A tag “div” serve como depósito crevemos os seguintes comandos:
54 < C O L E Ç Ã O I N F O C O L E Ç Ã O I N F O > 55
TUTORIAL/LAYOUT 23.05.05 18:05 Page 54
TUTORIAL/LAYOUT TUTORIAL/LAYOUT
Escolhemos um #topo {
layout com quatro margin: 5px;
áreas: cabeçalho ho- height: 80px;
rizontal (onde nor- background: silver;
malmente entram lo- }
gotipo e banner), co- #esquerda {
luna esquerda (me- position: absolute;
nu de navegação top: 105px;
principal), coluna left: 10px;
central (área de con- width: 150px;
teúdo e destaques) e background: silver;
coluna direita (nave- }
gação secundária, CSS no Firefox: leitura altera o título e a coluna à direita #meio {
CSS no Opera: diferença de leitura na coluna à direita
links para parceiros margin-left: 170px;
etc.). O arquivo pronto está dispo- de conteúdo, criando camadas que margin-right: 220px; O primeiro bloco de comandos
nível para download no endereço podem ser manipuladas separada- background: silver; se refere ao cabeçalho. Os elemen-
www.info.abril.com.br/download/ mente. Dentro desse depósito, po- } tos “margin” e “height” definem,
3466.shtml. demos usar normalmente todos os #direita { respectivamente, a margem e a al-
comandos HTML. position: absolute; tura em pixels. O atributo “back-
1. O HTML Note que cada “div” possui um top: 105px; ground” determina a cor de fundo,
O primeiro passo é criar o arquivo atributo “id” distinto, que define right: 10px; mas é opcional e foi incluído ape-
HTML. Dentro do comando “head”, todas as áreas do layout. Assim, já width: 200px; nas para facilitar a visualização.
é necessário escrever a seguinte tag: temos no arquivo HTML os quatro background: silver; A seguir, definimos as três colu-
<link rel=“stylesheet” href=” blocos de conteúdo. Salve o arqui- } nas do layout. O bloco da esquer-
estilo. css“type=”text/ css”> vo e teste no browser.
Ela indica ao browser qual é a
folha de estilo que deve ser toma- 2.A FOLHA DE ESTILO VALIDE SUA PÁGINA
do como referência para o layout Por enquanto, as áreas do layout O tableless já faz parte do Para seguir os padrões à
(neste caso, “estilo.css”). No corpo ainda não estão em suas devidas conjunto de padrões da web, risca, verifique se a página
do arquivo HTML temos quatro blo- posições e são exibidas uma abai- especificados pelo W3C que você criou está correta,
cos que definem as áreas: xo da outra. Isso ocorre porque não (www.w3c.org), o consórcio utilizando o serviço W3C
<div id=“topo”>conteúdo do criamos o documento CSS, que é o que dita as regras Markup Validation Services,
cabeçalho </div> responsável por definir a posição tecnológicas da grande rede. um validador de HTML
<div id=“esquerda”>conteúdo de cada bloco na página. Esse se- Por isso mesmo, a tendência gratuito disponível no
da coluna esquerda</div> rá nosso próximo passo. é de aumentar a endereço validator.w3.org.
<div id=“meio”>conteúdo da A folha de estilo nada mais é do compatibilidade do padrão Basta postar o endereço de
coluna central</div> que um arquivo em texto puro com entre os navegadores e sua página, que o serviço
<div id=“direita”>conteúdo da a extensão CSS. Abrimos então o acelerar o tempo de mostrará as tags que
coluna direita</div> Bloco de Notas do Windows e es- renderização das páginas. apresentam erros.
A tag “div” serve como depósito crevemos os seguintes comandos:
54 < C O L E Ç Ã O I N F O C O L E Ç Ã O I N F O > 55
TUTORIAL/LAYOUT 23.05.05 18:05 Page 56
TUTORIAL/LAYOUT
56 < C O L E Ç Ã O I N F O