<table width="100%">
<table width="100%">
Será que você aprendeu?
Teste seus conhecimentos nesse quiz:
http://www.w3schools.com/quiztest/quiztest.asp?qtest=XHTML
Vamos usar XHTML?
Exemplo XHTML do Nosso Projeto
Como faço Validar um documento XHTML?
Visite:
http://validator.w3.org/
Mais de XHTML
Caso precise de outra fonte, veja também o tutorial "Escrevendo um XHTML válido" escrito por Diego Eis, acessível em
http://www.tableless.com.br/escrevendo-um-xhtml-valido.
CSS
Definindo
Cascading Style Sheets, ou simplesmente
CSS é um mecanismo simples para adicionar estilo a documentos. Ele foi criado e definido pela
W3C com foco no HTML, mas já é usado para formatar conteúdo definido em markup que servem a outros fins como
XUL e
SVG.
Através do CSS é possível tornar o conteúdo independente da forma como ele será apresentado. Ou seja, uma página HTML não precisa usar tags como a
<font>
para definir a aparência de um bloco de texto, o bloco deve ser identificado e assim ele será formato. Da mesma forma um título não deve ser simulado com tags de formatação, ele deve usar a tag semanticamente coerente
<H1>
e ser formatado via CSS para ter a aparencia desejada. Seguindo esse pensamento se desenvolveu a filosofia de construção de layouts web conhecida como
Tableless que trouxe sites com código mais limpo e mais acessiveis ao mundo.
Seletores CSS - Quem eu formato?
Para formatar as ocorrencias de uma tag
<tag>
:
tag {
propriedade1 : valor1;
propriedade2 : valor2;
}
Para formatar as ocorrencias da classe
bli
em qualquer tag:
.bli { ...
Para formatar as ocorrencias de uma tag com uma classe
<tag class="bli">
:
tag.bli { ...
Para formatar uma tag identificada como
<tag id="souUnica">
:
#souUnica { ...
Para formatar as ocorrencias de uma tag
<filha>
dentro de
<mãe>
:
mãe filha { ...
...e a
pseudo-classe.
Notação CSS - Como eu formato?
seletor {
prop1 : <string>;
font-family : serif;
prop2 : <num absoluto>;
font-weight : 800;
prop3 : <num relativo>[<unidade de medida>|%];
width : 350px;
width : 70%;
prop4 : url(<endereço refencia>);
background-image : url(imgs/fundo.jpg);
prop5 : #<cor hexadecimal 24bits>;
color : #FFA800;
prop6 : rgb(<0..255>, <0..255>, <0..255>);
color : rgb(255, 168, 0);
prop7 : rgb(<0..100>%, <0..100>%, <0..100>%);
color : rgb(100%, 65.88%, 0%);
propMulti : <valor tipo1> <valor tipo2> ... <valor tipoN>;
border: 4px dotted #009900;
}
Inserindo CSS na sua página (1)
Exemplo do Mozilla.org:
<head>
...
<link rel="stylesheet" type="text/css"
href="css/print.css" media="print" />
<link rel="stylesheet" type="text/css"
href="css/base/content.css" media="all" />
<link rel="stylesheet" type="text/css"
href="css/cavendish/content.css" title="Cavendish" media="all" />
<link rel="stylesheet" type="text/css"
href="css/base/template.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="css/cavendish/template.css" title="Cavendish" media="screen" />
<link rel="stylesheet" type="text/css"
href="css/cavendish/home.css" title="Cavendish" media="screen" />
...
</head>
Inserindo CSS na sua página (2)
Você também pode isserir diretamente na página:
<head>
...
<style type="text/css">
seletorA {
propriedade1 : valor1;
propriedade2 : valor2;
}
seletorB {
propriedade3 : valor3;
propriedade4 : valor4;
}
</style>
...
</head>
Ou forçar o download antes da apresentação sem precisar extender o documento html:
<head>
...
<style type="text/css">
@import url(layout.css);
</style>
...
</head>
CSS Alternativo
http://www.w3.org/Style/Examples/007/alternatives.html
<link rel="stylesheet" title="Gold (right, fixed) + navbar"
href="../../threepart-f.css">
<link rel="alternate stylesheet" title="Gold (right)"
href="../../threepart-nobanner.css">
<link rel="alternate stylesheet" title="Gold (left)"
href="../../threepart-left-nobanner.css">
<link rel="alternate stylesheet" title="Gold (left, fixed) + navbar"
href="../../threepart-left-f.css">
<link rel="alternate stylesheet" title="Gold (right, fixed)"
href="../../threepart-nobanner-f.css">
<link rel="alternate stylesheet" title="Gold (left, fixed)"
href="../../threepart-left-nobanner-f.css">
<link rel="alternate stylesheet" title="Oldstyle"
href="http://www.w3.org/StyleSheets/Core/Oldstyle">
<link rel="alternate stylesheet" title="Modernist"
href="http://www.w3.org/StyleSheets/Core/Modernist">
<link rel="alternate stylesheet" title="Midnight"
href="http://www.w3.org/StyleSheets/Core/Midnight">
<link rel="alternate stylesheet" title="Ultramarine"
href="http://www.w3.org/StyleSheets/Core/Ultramarine">
...
<link rel="stylesheet" title="Handheld" href="../../handheld.css" media="handheld">
Modularize e não se repita = Importe
Um site em tons verdes:
@import url(layoutBase.css);
@import url(layoutVerde.css);
O mesmo site em tons azuis:
@import url(layoutBase.css);
@import url(layoutAzul.css);
O código comum aos dois modelos fica em um documento separado.
layoutBase.css
Trabalhando!
Hora de colocar a mão na massa.
Agora veremos "Visual Formatting Model"
Microformats
Ai... mais coisa pra aprender...
Pare de chorar e aproveite!
<div class="vcard">
<a class="url fn" href="http://aurium.cjb.net">Aurélio A. Heckert</a>
<span class="org">Colibre</span>
</div>
Referências
Mais de CSS
- HTML simples com XML e CSS - Neste texto, Elcio Ferreira fala das facilidades e do poder de se usar XHTML em termos de coerência, estrutura e flexibilidade do documento. Também trata do uso da formatação em um documento separado, no caso, o CSS, para facilitar a manutenção do site. Além é claro de tratar questões como o posicionamento de elementos do site, abolindo o uso das tabelas com essa finalidade.
- Informação e Formatação; As duas camadas de desenvolvimento web - O texto do Diego Eis fortalece a necessidade de segmentação de um site nas camadas de informação (HTML) e formatação (CSS), o que traz as vantagens de "1. Facilidade de Manutenção [e] 2. Maior produtividade". Além de citar algumas péssimas situações das quais o programador pode se livrar por usar o CSS.
- Centralizando um objeto na Horizontal e Vertical com CSS - Neste texto, Diego Eis apresenta um exemplo simples de posicionamento de imagens no centro da tela, trabalhando assim com alguns atributos CSS, como o top, margin, etc.
- Criando um Menu Horizontal com CSS - De forma bem simples, Diego Eis apresenta o passo-a-passo da construção de um menu horizontal simples, com o uso de atributos como o float, padding, list, etc.
Tableless
Em seu texto "O que é Tableless?" acessível em
http://www.tableless.com.br/o_que_e_tableless, de 2005, Diego Eis conta como alguns padrões tiveram que ser criados para possibilitar a continuidade da livre troca de informações na Internet. Devido a falta de padrões que unificasse a de cada browser, o uso de tabelas para posicionamento de elementos do layout de sites se propagou, mas que agora é uma prática condenável devido a existência de padrões que determinam a modularização de um site em: 1 - Informação, 2 - Formatação, e ainda, 3 - Comportamento (JavaScript e Ajax). Ou seja, tableless é o método de se criar sites que siga a modularização citada anteriormente.
Em seu texto "Site em Ajax? Site em Flash? Pergunta ruim", acessível em
http://www.tableless.com.br/site-em-ajax-site-em-flash-pergunta-ruim, Elcio Ferreira explica que a funcionalidade do HTML e a do Ajax ou Flash são diferentes e relata quando usar cada um deles, ou seja, "não faça sites [aspas]em Ajax[aspas], nem sites [aspas]em Flash[aspas]. Faça sites com os padrões web, e use Ajax ou Flash onde isso for realmente ajudar seus usuários", como escreveu o autor do texto.
Um bom exercício para praticar o Tableless é refazer um layout de site construído originalmente com tabelas, usando-se de CSS para fazer a formatação e posicionamento dos elementos do layout. Um site com layout simples que pode ser usado é o do Google, que ainda usa tabelas e não é compatível com o padrões especificados pela
W3C.
Acessibilidade
Entende-se como Web Acessibilidade a possibilidade de uso da Web por pessoas com deficiências. Dentre essas deficiências (totais ou parciais) pode-se citar a visual, auditiva, motora, de entendimento e interpretação de textos, dentre outras.
O site brasileiro Da Silva é um avaliador que indica se o seu site é ou não acessível. Além disso, o site apresenta as vantagens de se manter um site acessível. Dessas vantagens destaca-se a possibilidade de se adaptar a diferentes navegadores, inclusive os mais velhos; inclusão de pessoas deficientes, aumento os usuários do site e de possíveis anunciantes. Veja o artigo em
http://www.dasilva.org.br/?itemid=11.
A Colivre também chama a atenção para a necessidade de criação documentos semanticamente coerentes, tanto para se aproveitar da boa indexação em mecanismos de busca (Web Semântica) quanto para garantir o bom uso do site por leitores de tela, programas usados por pessoas com deficiência, dentre outros facilitadores.
O
vídeo "Acessibilidade Web: Custo ou benefício" que pode ser baixado a patir do link
http://acessodigital.net/video.html é um bom recurso de conscientização de profissionais para o uso de técnicas para melhor acessibilidade de conteúdos Web.
A seguir, algumas diretrizes que devem ser seguidas para assegurar a acessibilidade de seu site acessível, segundo o
W3C -
Web Accessibility Initiative (WAI), em sua tradução para o português (em negrito) disponível em
http://www.utad.pt/wai/wai-pageauth.html:
- Fornecer alternativas equivalentes ao conteúdo áudio visual
- Apesar do conteúdo sonoro e visual ser importante para pessoas que não enxergam ou que não compreendem bem a mensagem escrita, respectivamente, devem ser acompanhados de informações que tradução a funcionalidade do áudio ou vídeo usado.
- EX: Use atributo
alt
nas tags img
.
- Não se utilizar apenas cor
- Como algumas pessoas tem dificuldades de diferenciar cores, deve-se sempre usar contrastes e textos adicionais para as informações transmitidas pelas cores usadas.
- EX: Não solicite que entradas de formulário do usuário do tipo "selecione umas das opções em vermelho". Use
display: none
para textos que indiquem início e fim de exemplos, menus, etc.
- Utilizar corretamente as tags e folhas de estilo
- Usar cada elemento ou tag para a sua finalidade correta para melhor estruturação semântica do documento.
- EX: Utilizar
H1
para títulos e os demais para as subseções e nunca os usar para conseguir efeitos de fonte; construir listas com ul
ou ol
, li
; usar o font
do CSS e não o do HTML; usar o DOCTYPE para se definir o tipo de documento, etc.
- Indicar claramente qual a língua utilizada
- Priorizando pessoas com dificuldades de audição e de aprendizado, a língua do documento deve está explícita para otimizar o funcionamento de programas sintetizadores de voz e de baille.
- EX: definir o metadado
lang
do HTML; escrever por extenso o significado das siglas em sua primeira ocorrência; sinalizar mudanças de língua no texto com <span lang="en">
ou <q lang="it">
, etc.
- Criar tabelas passíveis de transformação harmoniosa
- As tabelas devem ser usadas para formatação de dados tabulares e não para posicionamento de elementos em benefício de pessoas que vêem parte da tela por vez ou que precisam de software leitor de tela para visitar as células da tabela.
- EX: diferenciar as células de dados e de cabeçalho com
td
e th
respectivamente; só utilizar o th
para o cabeçalho e não destacar conteúdo de células de dados; utilizar o atribute summary
da tag table
para descrever o conteúdo da tabela, etc.
- Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente
- Deve-se usar técnicas que permitam que os navegadores antigos apresentem satisfatoriamente o conteúdo gerado pela nova tecnologia (scripts, applets, folhas de estilo, etc).
- EX: Uso de páginas alternativas; assegurar a boa interpretação do texto sem o CSS; uso de alt no elemento do applet; garantir que as entradas sejam independentes do dispositivo, sendo este escolhido pelo usuário, etc.
- Assegurar o controle do usuário sobre as alterações temporais do conteúdo
- Algumas pessoas com deficiência de concentração ou cognitivas tem a leitura da página prejudicada na existência de muito movimento. Outras pessoas com dificuldades motoras não conseguem acessar conteúdos em movimento, ou os leitores de tela não conseguem captar links que piscam.
- EX: Assegurar pouco ou nenhum movimento do conteúdo; evitar as atualizações automáticas do site, etc.
- Assegurar a acessibilidade direta de interfaces do usuário integradas
- Caso a aplicação tenha interfase prórpia (que não utilize a do navegador), assegurar que os conceitos de: acesso independente de dispositivos, operacionalidade pelo teclado e verbalização, etc.
- Pautar a concepção pela independência diante de dispositivos
- EX: usar mapas de imagens sediados no cliente; fornecer atalhos de teclado que apontem para links, principalmente dos contidos em imagens; assegurar independência de dispositivos de entrada; etc.
- Utilizar soluções de transição
- As vezes, mudanças de conteúdo e surgimento de janelas não são captadas por leitores de tela e essas transições devem ser sinalzadas.
- EX: Evitar aparecimento e sobreposição de janelas; Informar mudanças no conteúdo do site; Escrever os labels e controles de formulários em uma mesma linha, etc.
- Utilizar as tecnologias e as diretivas do W3C
- Deve-se utilizar das tecnologias abertamente desenvolvidas pela W3C para promover sites acessíveis priorizando por versões mais recentes. No caso de impossibilidade de uso dessas técnicas, fornecer página alternativa com as informações do site.
- Fornecer contexto e orientações
- Para facilitar o entendimento do site por pessoas que têm deficiencias cognitivas e visuais, é necessário que elementos complexos tenham seu contexto e ligações explicitadas.
- EX: associar cada
label
de um formulário ao seu identificador relacionado com o for
: <input type="checkbox" name="lang" value="HTML" id="f_lang_html" checked="checked" /> e <label for="f_lang_html">HTML</label>; identificar cada frame com um título, etc.
- Fornecer mecanismos de navegação claros
- Mapas de sítios e outros facilitadores de navegação e localização do site são funcionalidades que beneficiam a todos os usuários, inclusive deficiencias cognitivas e visuais.
- EX: Dá nomes semânticos para os links para que por si só já representem a natureza do conteúdo a ser visitado; criar mapa do site; fornecer diferentes opções de pesquisa no site; fornecer barras de navegação, etc.
- Assegurar a clareza e a simplicidade dos documentos
- Empregar linguagem simples no site para a transmissão das informações também é útil para todos os usuários, especialmente para pessoas com dificuldades de compreenção, leitura e ainda estrangeiros.
- EX: usar linguagem clara; coplementar o site com informações sonoras e gráficas; dispor as páginas e informações de forma uniforme ao longo do site.
Para mais informações acesse as diretivas completas no site do
W3C.
Compatibilidade entre Browsers
FALTA
Uso Artístico de Cores
Veja o tópico cores:
Cores