Tutorial Avançado de CSS: Regras @

20 07 2008

image

Essa aula foi traduzida pelo aluno do curso Ruan Carlos. Obrigado, Ruan!

Regras @ encapsulam um punhado de regras CSS para aplicar a alguma coisa específica. Woo.

Importação

A regra @import adiciona outra folha de estilo. Por exemplo, se você quiser adicionar os estilos de uma outra folha de estilo para a sua existente, você pode adicionar algo como:

@import url(estilosadicionais.css);

Isso é muitas vezes usado no lugar do elemento link para ligar um arquivo CSS a uma página HTML, essencialmente para ter uma folha de estilo interna, algo como isso:

<style type="text/css" media="all">
  @import url(macaco.css);
</style>

O benefício disso é o fato de que navegadores mais antigos, como o Netscape 4.x, por não terem idéia das regras @, não vão ligar a folha de estilos, o que, se você tiver uma marcação bem-estrurada, vai deixar o HTML puro funcional (embora sem estilo).

Tipos de mídia

A regra @media aplica seu conteúdo a um determinado meio de visualização, tal como a impressão. Por exemplo:

@media print {
  body {
    font-size: 10pt;
    font-family: times new roman, times, serif;
  }
  #navegacao {
    display: none;
  }
}

Os meios de visualização são:

  • all – para todos os meios abaixo, acima, ao redor e dentro do sol.
  • aural – Para sintetizadores de fala.
  • handheld – para dispositivos portáteis.
  • print – para impressoras.
  • projection – para projetores.
  • screen – para visualização no computador.

Você também pode usar braille, embossed, tty ou tv.
Nota: De todos esses, os únicos tipos de mídia suportados pelo IE são all, screen e print.

Conjuntos de caracteres

A regra @charset simplesmente estabelece a regra de codificação dos caracteres de uma folha de estilos externa. A codificação aparece no alto da folha de estilos e é algo como @charset “UTF-8”;

Aparência da fonte

A regra @font-face é usada para dar uma descrição detalhada de uma fonte e pode incorporar uma fonte externa em seu CSS.
Ela requer um descritor da família da font (font-family), ao qual a fonte pode ser referenciada, cujo valor pode ser um nome de uma fonte existente (sobrescrevendo essa fonte onde forem encontradas condições) ou pode ser um nome completamente novo. Para incorporar uma fonte, o descritor src é utilizado. Outros descritores adicionados à regra font-face se tornam condições para que a fonte incorporada seja usada. Por exemplo, se você adicionar um estilo font-weight: bold na regra, o src da font-family só vai ser aplicado a seletores com a propriedade font-family se a propriedade font-weight for definida como bold (negrito).
Você pode usar uma regra font-face como essa:

@font-face {
	font-family: umnomequalquer;
	src: url(algumafonte.eot);
	font-weight: bold;
}

p {
	font-family: umnomequalquer;
	font-weight: bold;
}

Isso irá aplicar a fonte algumafonte.eof aos parágrafos (Mais não iria se o seletor p não fosse definido como font-weight:bold).
Suporte para fontes incorporadas na melhor das hipóteses é irregular. O navegador Mozilla não suporta e não tem planos imediatos para o fazer. Apenas IE tem suporte decente. Para incorporar fontes ao IE, você precisa usar o software da Microsoft WEFT, que irá converter os caracteres de uma fonte TrueType em uma fonte OpenType condensada (e isso só pode ser utilizado com a URI que você especificou). Devido a esta limitação (bastante complicada) de compatibilidade, é melhor não usar fontes que não tenham um sistema de fontes alternativo adequado, e evitar usar @font-face.

Páginas

A regra @page é para a visualização da página em mídias de página, e é um método avançado de aplicar estilos para impressão. Ela define um bloco de página que se estende pelo modelo de caixa (veja Margens e Espaçamento) de modo que você define o tamanho e apresentação de uma única página.
Há uma série de convenções que se aplicam na regra @page, como não existirem paddings (espaçamentos) ou bordas e não estarmos falando de uma tela de computador – pixels e em’s como unidades de medidas não são permitidos.
Há uma serie de propriedades específicas que podem ser usadas, tais como size (tamanho), que pode ser definido como portrait (retrato), landscape (paisagem), auto ou um tamanho. A propriedade marks também pode ser usada para definir marcas de corte.

Pseudo classes para mídia de página.

Existem três pseudo classes que são usadas especificamente em conjunto com a regra @page, que assumem a forma @page:pseudo-classe { alguma coisa }.
:first é aplicada a primeira página de uma mídiade página.
:left e :right aplicam-se às páginas da esquerda e da direita, respectivamente. Isto é usado para especificar uma margem esquerda maior em páginas que vão ficar à esquerda e uma margem direita maior para páginas à direita.
Há uma série de outras facetas específicas para a regra @page como quebras de linha e nomes de páginas, mas vendo que esta regra dificilmente funciona em algum navegador, você provavelmente já desperdiçou tempo suficiente lendo esta parte. É uma idéia bem agradável, no entanto…

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


		
Anúncios




Tutorial Avançado de CSS – Layout da Página

20 07 2008

Exemplo de página dividida em seções

Construir layouts com CSS é fácil. Se você está acostumado a desenhar suas páginas com tabelas, no começo usar CSS pode parecer difícil, mas não é, é apenas diferente e na verdade faz bem mais sentido.

Você precisa ver cada parte da página como um pedaço individual que você pode empurrar em qualquer lugar que você quiser. Você pode posicionar esses pedaços de modo aboluto ou em relação a outro pedaço.

Posicionamento

A propriedade position é usada pra definir se um elemento está posicionado de forma absoluta (valor absolut), relativa (relative), estática (static) ou fixa (fixed).

O valor static é o valor padrão e renderiza os elementos na ordem normal, como eles aparecem no HTML.

relative é bem parecido com static, mas os elementos podem ser deslocados de sua posição original com as propriedades top (topo), right (direita), bottom (inferior) e left (esquerda).

absolute empurra um elemento pra fora do fluxo normal do HTML e o coloca em seu próprio mundo. Em seu pequeno e louco mundo, o elemento absoluto pode ser colocado em qualquer lugar na  página usando top, right, bottom e left pra definir a distância de cada lado.

fixed funciona como absolute, mas o elemento vai ser posicionado em relação à janela e não em relação à página, então, teoricamente, um elemento fixado deve ficar exatamente onde ele está na tela mesmo quando a página é rolada. Por que teoricamente? Pelo motivo de sempre – isso funciona perfeitamente em navegadores como Mozilla e Opera, mas no IE não funciona de jeito nenhum.

Layout usando posicionamento absoluto

Você pode criar um layout tradicional com duas colunas usando posicionamento absoluto se você tem algo como o HTML seguinte:

<div id="navegacao">
  <ul>
    <li><a href="esse.html">Esse</a></li>
    <li><a href="aquele.html">Aquele</a></li>
    <li><a href="oOutro.html">O Outro</a></li>
  </ul>
</div>

<div id="conteudo">
  <h1>Ra ra banjo banjo</h1>
  <p>Bem-vindo à página Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
  <p>(Ra ra banjo banjo)</p>
</div>

E se você aplicar o CSS abaixo:

#navegacao {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#conteudo {
	margin-left: 10em;
}

Você vai ver que isso vai levar a barra de navegação pra esquerda e modificar a largura pra 10 em’s. Porque a navegação está posicionada absolutamente, ela não tem nada a ver com o fluxo do resto da página, e por isso é necessário definir a margem esquerda da área de conteúdo como sendo igual a largura da barra de navegação.

Fácil até demais. E você não está limitado a essa abordagem de duas colunas. Com um posicionamento mais engenhoso, você pode dispor de quantos blocos você quiser. Se você quisesse adicionar uma terceira coluna, por exemplo, você poderia adicionar o pedaço ‘navegacao2’ no seu HTML e mudar seu CSS para:

#navegacao {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
}

#navegacao2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

#conteudo {
  margin: 0 10em; /* definindo as margens superior e inferior pra 0 e a esquerda e direita pra 10em */
}

A única desvantagem de elementos posicionados absolutamente é que eles vivem num mundo próprio, não existe nenhum jeito preciso de determinar aonde eles vão parar. Se você for usar os exemplos acima e todas as suas páginas têm barras de navegação pequenas e áreas de conteúdo grandes, tudo bem. Mas, especialmente quando usar valores relativos para larguras e tamanhos, você geralmente tem que abandonar qualquer esperança de posicionar qualquer coisa, como um rodapé, embaixo desses elementos. Se você quiser fazer algo assim vai ser necessário flutuar todos os seus pedaços, ao invés de posicioná-los absolutamente.

Flutuando

Flutuar um elemento vai deslocá-lo para a direita ou esquerda de uma linha, com o conteúdo fluindo ao seu redor.

Flutuar normalmente é usado para posicionar elementos menores em uma página (Veja o exemplo :first-letter na página sobre Pseudo Elementos), mas também pode ser usada para porções maiores, como colunas de navegação.

Usando o HTML do exemplo acima, você pode aplicar o CSS seguinte:

#navegacao {
  float: left;
  width: 10em;
}

#navegacao2 {
  float: right;
  width: 10em;
}

#conteudo {
  margin: 0 10em;
}

Se você não quer que o póximo elemento envolva os elementos flutuando, você pode aplicar a propriedade clear (limpar). clear: left vai limpar elementos flutuados para a esquerda, clear:right vai limpar elementos flutuados para a direita e clear: both vai limpar elementos flutuados para a esquerda e direita. Então se, por exemplo, você quiser um rodapé na sua página, você pode usar um pedaço de HTML com a id ‘rodape’ e adicionar o CSS seguinte:

#rodape {
	clear: both;
}

E aí está. Um rodapé que vai aparecer debaixo de todas as colunas, independente do tamanho de qualquer uma delas.

Essa foi uma introdução geral sobre posicionamento e flutação, com ênfase nos ‘pedaços’ maiores de uma página, mas lembre-se que esses métodos podem ser aplicados também em qualquer elemento dentro desses pedaços. Com uma combinação de posicionamento, flutuação, margens, paddings (enchimentos) e bordas, você pode representar QUALQUER design web.

Qualquer coisa que puder ser feita com tabelas pode ser feita melhor com CSS. A ÚNICA razão para usar tabelas na construção do layout é se você está tentando acomodar navegadores anciãos, que não suportam CSS.

Para se aprofundar na construção de layouts com CSS, é altamente recomendado que você acompanhe o tutorial “Criando um Layout com CSS a partir do zero“, feito pelo Subcide e traduzido pelo Café com Gelo. E não esqueça de conferir o código-fonte dos exemplos dessa página – é importante!

É aqui que CSS mostra mesmo suas vantagens – ele resulta numa página altamente acessível com apenas uma pequena fração do peso de uma página equivalente baseada em tabelas.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS

20 07 2008

image

O Tutorial Avançado de CSS é pra quem quer levar CSS ao extremo, explorando métodos que podem não ser imediatamente óbvios para um desenvolvedor intermediário.

Conteúdos

  • A Propriedade Display – Definindo o modo de exibição de um elemento.
  • Layout de Página – Construindo uma página sem tabelas.
  • Regras @ – Importando folhas de estilo, estilos para tipos de mídia diferentes especificando o conjunto de caracteres de uma folha de estilos e incorporando fontes.
  • Pseudo Elementos – Estilizando primeiras letras, primeiras linhas e colocando conteúdo antes e depois de elementos.
  • Especificidade – Como um navegador lida com regras CSS conflitantes.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de HTML: Declarações

7 07 2008

image

Essa página trata de como definir um documento XHTML válido.

Declaração do tipo do documento

Lá no topo de suas páginas você precisa de uma declaração do tipo do documento. Isso mesmo, você precisa.

Sem especificar um doctype (tipo do documento), seu HTML simplesmente não é HTML válido e a maioria dos navegadores vão usar o ‘modo sujo’ pra visualizá-lo, o que quer dizer que eles vão achar que você não sabe que diabos você está fazendo e vão fazer o que eles acharem melhor com o seu código. Você pode ser o maior ninja de HTML que já andou sobre a Terra. Seu HTML pode não ter falha nenhuma e seu CSS pode ser simplesmente perfeito, mas sem uma declaração do documento, ou uma declaração errada, vai parecer que suas páginas foram coladas por um filhote de gibão míope de um olho só com dificuldades de aprendizado.

Essa é a declaração para um documento XHTML 1.0 Strict (XHTML 1.0 Estrito):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A declaração seguinte é de um documento XHTML 1.1. Ela pode parecer preferível, por ser a última versão do XHTML, mas existem alguns problemas que serão explicados num minuto…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

Se você simplesmente não consegue deixar o HTML 4 ir embora ou se você tem algum fetiche pelo Netscape 4, você pode usar o XHTML 1.0 Transitional (XHTML 1.0 de Transição):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Você só deve usar esse tipo de documento se você tem uma necessidade incomum de acomodar navegadores mais velhos, raramente usados, ou se você está convertendo pros padrões páginas antigas, feitas usando HTML 4 ou anterior. XHTML 1.0 de transição permite velhos elementos de apresentação do HTML 4, que podem resultar numa apresentação melhor em navegadores como Netscape 4. No entanto, usar esses elementos vai prejudicar a eficiência e possivelmente a acessibilidade de suas páginas web.

Finalmente, se você é um daqueles caras meio loucos que usam frames, a declaração de um documento XHTML 1.0 Frameset é assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Note que a tag DOCTYPE é meio rebelde e exige ser escrita em letras maiúsculas e enfeitada com um ponto de exclamação. Ela também quebra as regras por ser a única tag que não precisa ser fechada.

Declarando Linguagens

Você deve identificar a linguagem principal de um documento através de um cabeçalho HTTP ou com o atributo xml:lang dentro da tag html de abertura. Embora isso não seja necessário para produzir um documento XHTML válido, é uma preocupação com a acessibilidade. O valor é uma abreviação, como ‘en’ (English – Inglês), ‘fr’ (Francês), ‘de’ (Alemão) ou ‘pt-BR’ (Português do Brasil).

A declaração de um documento com conteúdo principalmente em português é assim:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">

Depois de declarar uma linguagem principal, se você usar outra linguagem no seu conteúdo, você deve usar o atributo xml:lang in-line (como em <span xml:lang="de">HTML Hund</span>).

Tipos de Conteúdo

O típo de mídia e o conjunto de caracteres de um documento HTML também precisam ser especificados, e isso é feito com um cabeçalho HTTP como:


Content-Type: text/html; charset=UTF-8

A primeira parte (nesse exemplo, o pedaço text/html) é o Tipo MIME (MIME Type) do arquivo, e isso faz com que o navegador saiba qual o tipo de mídia de um arquivo e então o que fazer com ele. Todos os arquivos têm algum MIME Type. Uma imagem JPEG é image/jpeg, um arquivo CSS é text/css e o tipo geralmente usado pra HTML é text/html.

A segunda parte do cabeçalho HTTP (no exemplo, o pedaço UTF-8) é o conjunto de caracteres.

Talvez o jeito mais fácil de modificar um cabeçalho HTML (ou imitar um) é usar uma tag meta ‘HTTP-equivalent’ no HTML, que vai ser algo assim:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Levemente mais complicado, mas preferível (por ser um cabeçalho HTTP propriamente dito e ainda reduzir o HTML), é enviar o cabeçalho usando uma linguagem de programação no lado do servidor (server side). Com PHP, você poderia usar algo assim:

<?php header("Content-Type: text/html; charset= UTF-8"); ?>

Se você não quer ou não pode usar uma linguagem, você possivelmente pode ir direto pro servidor com um arquivo ‘.htaccess’. A maioria dos servidores (compatíveis com Apache) pode ter um pequeno arquivo de texto com o nome ‘.htaccess’ no diretório raíz, e com a seguinte linha nele você pode associar todo arquivo com extensão ‘.html’ com um MIME type e um conjunto de caracteres:


AddType text/html;charset=UTF-8 html

No entanto, nem todas as hospedagens permitem que você altere as configurações do servidor com um arquivo como esse.

Conjuntos de caracteres incluem ‘ISO-8859-1’ para muitas linguagem ocidentais, baseadas no Latim, que não usem caracteres especiais como ‘ç’ ou ‘ã’; ‘SHIFT_JIS’ para Japonês; ‘UTF-8’, uma versão do Formato de Transformação Unicode (Unicode Transformation Format), que fornece um grande número de caracteres usados na maioria das linguagens, entre outros. Basicamente, você deve usar um conjunto de caracteres que você sabe que vai ser reconhecido por sua audiência. A menos que você esteja usando uma linguagem baseada no Latim que não use acentos, como o Inglês, onde ISO-8859-1 pode ser usado e é praticamente universalmente compreendido, você deve usar UTF-8 porque ele pode mostrar a maioria dos caracteres da maioria das linguagem e é o código mais seguro de se usar porque vai funcionar no computador da grande maioria das pessoas.

Você pode ler mais sobre conjuntos de caracteres em outros lugares pela web.

XHTML deve ser enviado com o MIME type application/xhtml+xml. Isso é o que ele é – uma aplicação XML. Infelizmente, a maioria dos navegadores não tem idéia do que é isso. Então é geralmente aceito que não faz mal usar o MIME type text/html. De acordo com o W3C, e depois reforçado pelo Web Standards Project (Projeto Padrões Web), alguns sabores de XHTML 1.0 podem ser enviados com o tipo text/html, mas XHTML 1.1 não deve, e é por isso que os exemplos no site usam XHTML 1.0 Strict, assumindo um MIME Type text/html. Mas você pode (e talvez até deva) enviar o tipo correto para os navegadores que o aceitam com um pouco de “trapaça” no servidor.

Esse site usa PHP para enviar XHTML 1.1 com um MIME Type application/xhtml+xml para os navegadores que entendem e renderizam esse tipo (como o Mozilla) e XHTML 1.0 Strict com o tipo text/html para outros navegadores (como o IE). O script, colocado no topo de cada página parece com isso:


<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">');
} else {
header("Content-Type: text/html; charset=UTF-8");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
}
?>

Se você não conhece PHP, não se preocupe com o código acima. Ele checa se o o navegador aceita o MIME Type application/xhtml+xml e, se sim, esse tipo é enviado e o tipo de documento XHTML 1.1 é escrito no HTML. Se o MIME Type não é reconhecido então o tipo text/html é enviado e o tipo de documento XHTML 1.0 Strict é escrito no HTML.

Além da paz de espírito que você vai sentir por saber que está fazendo a coisa certa e se preparando para o futuro, o benefício imediato de usar esse método é que Mozilla vai tratar seus arquivos como aplicações XML e simplesmente não vai funcionar se seu XHTML não estiver de acordo com o padrão, por exemplo, se não estiver bem formado. Você vai poder testar sua aplicação sem ter que passar o documento por um validador.

Páginas Relacionadas

Referência





Tutorial Avançado de HTML: Formulários Acessíveis

5 07 2008

image

Formulários não são a coisa mais fácil pra usuários com deficiências. Navegar por uma página com conteúdo escrito é uma coisa, saltitar entre campos de formulário e inserir informação é outra bem diferente. Por causa disso, é uma boa idéia adicionar vários elementos ao formulário para torná-lo mais acessível.

Rótulos

Cada campo de formulário deve ter seu próprio rótulo (label).  A tag label resolve isso, com um atributo for que a conecta a algum elemento do formulário.

<form>
<label for="seuNome">Seu nome:</label> <input type="text" name="seuNome" id="seuNome" />
...

Labels ainda vem com um bônus: navegadores visuais renderizando a página fazem com que eles sejam clicáveis, colocando o foco no elemento do fomulário associado.

Nota: os atributos name e id são obrigatórios – o name para que a aplicação manipule o campo e o id para que o label se associe a ele.

Conjuntos de campos e legendas

Você pode agrupar campos, por exemplo nome (primeiro, último, do meio, título, etc.) ou endereço (linha 1, linha 2, país, código postal, etc.) usando a tag fieldset.

Dentro de um conjunto de campos, você pode definir uma legenda com a tag legend.

Nota: Navegadores visuais geralmente representam um conjunto de campos com uma borda ao redor deles e a legenda inserida no canto superior-esquerdo da borda.

<form action="algumscript.php" >
<fieldset>
<legend>Nome</legend>
<p>Primeiro nome: <input type="text" name="primeiroNome" /></p>
<p>Último nome: <input type="text" name="ultimoNome" /></p>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<p>Endereço: <textarea name="endereco" ></textarea></p>
<p>CEP: <input type="text" name="cep" /></p>
</fieldset>
...

Grupos de Opções

A tag optgroup agrupa opções numa caixa de seleção. Ela requer o atributo label, que é o texto que vai ser mostrado como um pseudo-cabeçalho que não pode ser selecionado, precedendo aquele grupo na lista dropdown em navegadores visuais

<select name="pais">
	<optgroup label="África">
		<option value="gam">Gambia</option>
		<option value="mad">Madagascar</option>
		<option value="nam">Namíbia</option>
	</optgroup>
	<optgroup label="Europa">
		<option value="fra">França</option>
		<option value="rus">Russia</option>
		<option value="uk">Reino Unido</option>
	</optgroup>
	<optgroup label="America do Norte">
		<option value="can">Canada</option>
		<option value="mex">México</option>
		<option value="eua">EUA</option>
	</optgroup>
</select>

Navegando pelos campos

Como links, campos de formulário (e grupos de campos) precisam ser navegáveis sem o uso de um dispositivo apontador, como o mouse. Os mesmos métodos usados em links para facilitar essa tarefa podem ser usados em elementos de formulário – tabulação e teclas de acesso.

Os atributos accesskey e tabindex podem ser adicionados nas tags individuais do formulário, como input, e também em tags legend.

<input type="text" name="nome" accesskey="n" tabindex="1" />

Pra mais informações sobre isso, veja a página Links Acessíveis.

Páginas Relacionadas

Exemplos

Referência





Tutorial Avançado de HTML: Dominando Tabelas

5 07 2008

image

Quer dizer que você acha que sabe como fazer uma tabela? Claro, você conhece as tags table, tr, td e th, você tem até os atributos rowspan e colspan no seu bolso. Você pode mesmo fazer uma mesinha pra café de madeira compensada, mas você não quer saber como construir uma daquelas mesas de jantar de madeira sólida e polida, com topo de vidro, dessas que suportam o peso de um elefante obeso?

Você quer? Que legal.

A vingança das colunas

Linhas em tabelas fazem as colunas parecerem meio estúpidas. Elas fazem todo o trabalho, com a tabela sendo construída linha por linha, deixando as colunas se sentindo meio rejeitadas.

Pra sorte das colunas mais ansiosas, as tags colgroup e col vieram para o resgate.

Essas tags permitem que você defina as colunas da tabela e deixe elas com o estilo que você quiser, o que é útil especialmente se você quer certas colunas alinhadas ou coloridas de uma outra forma. Sem essas tags, você ia ter que estilizar as células individualmente.

Aqui está um exemplo dessas tags em uso:

<table>
  <colgroup> 
    <col />
    <col class="alternada" />
    <col />
  </colgroup>
  <tr>
    <td>Essa</td>
    <td>Aquela</td>
    <td>A outra</td>  </tr>  <tr>  <td>Huguinho</td>  <td>Zézinho</td>  <td>Luizinho</td>
  </tr>
</table>

Os estilos da classe ‘alternada’ vão ser aplicadas à segunda coluna, ou à segunda célula em cada linha.

Você também pode usar o atributo span tanto em colgroup quanto em col, de um jeito parecido com colspan e rowspan.

Usando span na tag colgroup irá definir o número de colunas às quais aquele grupo irá pertencer. Por exemplo, <colgroup span=”2″></colgroup> agruparia as duas primeiras colunas. Quando span for usada em colgroup, você não deve usar tags col.

Para agrupar colunas, é mais sensato usar span na tag col. No exemplo acima, isso pode ser aplicado dessa forma:

<table>
  <colgroup>  <col />  <col span="2" class="alternada" />  </colgroup>
  ...

Isso aplicaria “alternada” às duas últimas colunas.

Oh, mas sempre tem que ter uma pegadinha, não é? Aqui está: Os únicos estilos que você pode aplicar em colunas são bordas, bakgrounds, largura e visibilidade.

Internet Explorer parece se comportar bem melhor que os outros navegadores porque ele permite que você use praticamente qualquer propriedade CSS, como color, em colunas. Mas, como já era de se esperar, isso só acontece porque ele age de um jeito bem louco.  Pra uma explicação mais detalhada dessa anomalia peculiar, deixe que Hixie explica.

Sumário e Legenda

Um jeito simples e rápido de melhorar a acessibilidade de suas tabelas é sempre colocar um sumário (summary) e uma legenda (caption).

Um sumário pode ser adicionado usando o atributo summary da tag table de abertura. Ele não será mostrado, mas pode ajudar numa representação não-visual de uma tabela.

A tag caption define uma legenda logo depois da tag de abertura table. Por padrão ela aparece em cima da tabela, mas pode ser colocada no topo, à direta, embaixo ou à esquerda com os valores top, right, bottom e left da propriedade CSS caption-side, embora o IE ignore essa propriedade.

<table 
  summary="O ritual de acasalamento dos gafanhotos, 
  mostrando quantos usam proteção e quantos fumam um cigarro depois">
  <caption>Ritual de Acasalamento dos Gafanhotos</caption> 
  ...

Cabeçalhos, rodapés e a busca pela tabela rolável

thead, tbody e tfoot te permitem separar a tabela em cabeçalho, corpo e rodapé. Isso é útil principalmente em tabelas muito grandes e quando elas são impressas. O cabeçalho e o rodapé, por exemplo, devem aparecer em todas as páginas.

Esses elementos devem ser definidos na ordem theadtfoottbody. Olha como eles são:

<table>  <thead>
   <tr>  <td>Cabeçalho 1</td>  <td>Cabeçalho 2</td>  <td>Cabeçalho 3</td>
   </tr>
  </thead>
  <tfoot>
  <tr>  <td>Rodapé 1</td>  <td>Rodapé 2</td>  <td>Rodapé 3</td>  </tr>  </tfoot>
  <tbody>  <tr>  <td>Célula 1</td>  <td>Célula 2</td>  <td>Célula 3</td>  </tr>  ...
  </tbody>
</table>

Nota: Voltando as diferenças normais entre os navegadores, dessa vez o IE não tem nenhuma dica quando se trata de cabeçalhos e rodapés, e embora eles sejam renderizados na página, eles não vão aparecer no topo e no fim de cada página impressa.

Colocar barra de rolagem numa tabela é útil, mas não é tão simples graças a diferenças entre navegadores. Além disso, a maioria dos usuários não está acostumada com barras de rolagem em tabelas e pode achar que o conteúdo disponível é só o que está visível. No Imaputz você aprende a criar uma tabela rolável com cabeçalho fixo – mas o CSS que ele usa pra fazer isso não é tão fácil de entender.

Páginas Relacionadas

Exemplos

Referência





Tutorial Avançado de HTML: Dominando Texto

4 07 2008

image

A tag br ainda é usada demais em lugares onde a tag p deveria ser usada, mas no geral já se aceita que a tag p deve ser usada pra representar parágrafos. Existem ainda diversas outras tags que devem ser usadas para definir certos elementos textuais como citações, abreviações e código de computador.

Você deve manter em mente que, mesmo que os navegadores mostrem esses elementos em formatos diferentes, o importante não é o que eles parecem, mas sim o significado que eles aplicam ao texto.

Abreviações e Acrônimos

abbr e acronym são usadas para abreviações e acrônimos respectivamente.

Uma abreaviação é uma forma mais curta de uma frase. Muito abrangente. Um acrônimo é uma abreviação composta pelas letras iniciais (ou partes das palavras) da frase que ele está representando. Por isso, CSS é um acrônimo válido, mas HTML e XHTML não são (se ‘Hypertext Markup Language’ – ‘Linguagem de Marcação de Hipertexto’ em inglês – fosse um acrônimo, seria ‘HML’. Do mesmo modo, XHTML seria EHML).

Para uma melhor acessibilidade, a frase que o acrônimo ou abreviação está representando deve ser usada no atributo title.

<p>Esse site é sobre <abbr title="HyperText Markup Language -Linguagem de Marcação de Hipertexto">HTML</abbr> e <acronym title="Cascading Style Sheets - Folhas de Estilo Encadeadas">CSS</acronym>.</p>

Por algum motivo frustante, Internet Explorer, o navegador mais comum, não suporta a tag abbr. Por sorte, um cara chamado Marek Prokop desenvolveu uma solução bem legal com javascript pra isso. O Revolução também fez um texto em português sobre essa solução.

Existe muita discussão sobre o uso de elementos de abreviação e acrônimo. Maujor fez uma análise bem completa sobre eles.

Citações

blockquote, q e cite são usados para citações. blockquote é um elemento de bloco usado para citações grandes, enquanto q é um elemento in-line usado para frases menores. cite também é um elemento in-line e preferível a q pela sua natureza semântica e porque o elemento q provavelmente vai se tornar obsoleto.

Novamente, o atributo title pode ser usado pra mostrar de onde a citação veio.

Nota: q geralmente não muda a aparência do texto – você precisa usar CSS se quiser aplicar um estilo.

<p>Então eu perguntei ao Bob e ele disse
<cite>Eu sei tanto sobre citações quanto sobre leitura de pensamento de pombos</cite>. 
Por sorte, eu encontrei HTML Dog e ele disse:</p>
<blockquote title="De HTML Dog, http://www.htmldog.com/">
 <p>blockquote, q e cite são usados para citações.  blockquote é um elemento de bloco usado para grandes citações, e q é um elemento in-line usado para frases menores.  cite também é in-line e é preferível a q por causa de sua natureza semântica e pela possibilidade de q se tornar obsoleto.
 </p>
</blockquote>

Código

Existem algumas tags usadas principalmente para código, como code e var que são específicas pra código de computador além de pre e samp.

code é usada para código de computador.

var é usada para variáveis dentro de um código.

<code><var>ocopoepequeno</var> = true;</code>

samp é similar a código, mas deve ser usado pra pedaços de código de saída.

pre é texto pré-formatado e o que ele tem de especial é que ele preserva os espaços em branco dentro dele. Geralmente é usado para blocos de código.

<pre>
   <div id="intro">
   <h1>Algum Cabeçalho</h1>
   <p>Algum parágrafo parágrafo legal legal.</p>
   </div>
</pre>

Termo de Definição

dfn é um termo de definição e é usado para destacar o primeiro uso de um termo. Como abbr e acronym, o atributo title pode ser usado para descrever o termo.

<p>A mãe <dfn title="Cadela">canina</dfn> de Bob e seu pai <dfn title="Cavalo">equino</dfn> pediram pra ele se sentar e carinhosamente explicaram que ele era um organismo <dfn title="Uma mutação que combina dois ou mais conjuntos de cromossomos de diferentes espécies">poliploide</dfn>.</p>

Endereços

address deve ser usado para um endereço.

<address>
Casa do HMTL Dog<br /> Rua HTML<br /> Dogópolis<br / > nº 77
</address>

Raridades Obscuras

Existem algumas tags que devem ser lembradas, mas que raramente são usadas por causa de sua natureza super específica.

bdo serve pra inverter a direção do texto, e pode ser usada para mostrar linguagens onde se lê da direita pra esquerda. O valor do atributo obrigatório dir pode ser ltr (left to rightesquerda pra direita) ou rtl (right to left – direita pra esquerda).

<bdo dir="rtl">odnadoC</bdo>

kbd é usado pra indicar texto que dese ser digitado pelo usuário.

<p>Agora digite <kbd>woo hoo</kbd></p>

ins e del são usados para indicar trechos que você inseriu ou deletou do conteúdo da página. Essas tags podem ter os atributos datetime (no formato AAAAMMDD, indicando quando o trecho foi inserido ou deletado) e cite (uma URL que descreva porque a inserção ou deleção foi feita).

O elemento ins geralmente é mostrado sublinhado e o elemento del cortado por um traço.

<p>Esse é o conteúdo 
<del datetime="20030522">nonsense</del><ins cite="http://www.htmldog.com">muito informativo</ins>
que eu escrevi.</p>

Elementos de Apresentação

b, i, tt, sub, sup, big e small são todos elementos usados para modificar a apresentação e como tais, por sua definição, não devem ser usados se você está tentando separar conteúdo da apresentação. b, por exemplo, define um elemento em negrito e não tem significado algum. Essas tags definem características apenas visuais, e isso é trabalho do CSS. Mesmo que essas tags sejam válidas, existem outras (como strong e em) que adicionam significado, e por isso são preferíveis. Se você quer apenas replicar estilos específicos dessas tags, sem dar nenhum significado especial, você deve usar tags span e modificar o estilo com CSS.

Páginas Relacionadas

Referência