O background-clip tem 4 valores: border-box, content-box, padding-box e text. O valor text foi inserido pelo pessoal do Webkit em 2008 e dave ser incluída no padrões em algum momento por conta da sua utilidade!

Este exemplo de como funciona a propriedade dispensa maiores explicações.

Aqui tem a documentação oficial.

Posts Relacionados

• Estruturação de Client-side – Parte 1: Préprocessadores, Framewoks e Bibliotecas
• CSS3 – Texturizando textos
• Propriedade @font-face CSS – Fonts externas na web
• Colocar Rodapé fixo no fim da página
• Cut the Rope

do HTML5 representa um som ou um stream de áudio. Atributos como:

podem ser utilizados em todos elementos de media, como o elemento

.

Formatos suportados

Os formatos de audio suportados são:

Como no caso dos vídeos, ainda é um problema termos um formato que funcione com sucesso em todos os browsers. Enquanto isso, para mantermos a compatibilidade precisamos servir diversos formatos.

Sintaxe

A sintaxe é muito simples:

Colocando um conteúdo dentro da tag para que browsers que não suportam possam baixar este arquivo.

Suponha então que você tenha que servir dois tipos de formatos de audio para cobrir a maioria dos browsers:

Resultado:

Se você entrar com o Internet Explorer, provavelmente ele mostrará a mensagem para baixar o arquivo que colocamos.

Os atributos possíveis

Você tem algum controle sobre o player que aparece no browser com CSS. Testando aqui, customizamos largura, altura, colocamos float e position. Por natureza ele é um elemento de bloco. Isso acontece também com os elemento sde vídeo. A graça disso tudo é que tanto o elemento de vídeo quanto o elemento de audio são tratados como elementos do HTML e não como plugins. Isso nos dá essa flexibilidade de customização via CSS, facilitando muito as coisas.

O elemento

do HTML5 representa um som ou um stream de áudio. Atributos como:

podem ser utilizados em todos elementos de media, como o elemento

.

Formatos suportados

Os formatos de audio suportados são:

Como no caso dos vídeos, ainda é um problema termos um formato que funcione com sucesso em todos os browsers. Enquanto isso, para mantermos a compatibilidade precisamos servir diversos formatos.

Sintaxe

A sintaxe é muito simples:

Colocando um conteúdo dentro da tag para que browsers que não suportam possam baixar este arquivo.

Suponha então que você tenha que servir dois tipos de formatos de audio para cobrir a maioria dos browsers:

Resultado:

Se você entrar com o Internet Explorer, provavelmente ele mostrará a mensagem para baixar o arquivo que colocamos.

Os atributos possíveis

Você tem algum controle sobre o player que aparece no browser com CSS. Testando aqui, customizamos largura, altura, colocamos float e position. Por natureza ele é um elemento de bloco. Isso acontece também com os elemento sde vídeo. A graça disso tudo é que tanto o elemento de vídeo quanto o elemento de audio são tratados como elementos do HTML e não como plugins. Isso nos dá essa flexibilidade de customização via CSS, facilitando muito as coisas.

Caminho das pedras para customizar

Você pode criar seu próprio player se preferir. Você pode manipular os controles de som como PLAY, PAUSE, VOLUME com outros elementos do HTML. Isso facilita a customização do player caso você não queira utilizar o player padrão do browser. Se souber um pouco de Javascript, você já entenderá o que pode ser feito com o código abaixo.

  Play
  Pause
  Aumenta Volume
  Diminui Volume

Teste abaixo:

Customizando estes botões com CSS e aprimorando o Javascript, você consegue fazer um player bem desenhado e que funciona em diversas plataformas.

Posts Relacionados

• Sections: seções do HTML5 – Parte 1
• Sections: elemento nav – Parte 2
• Afinal, o que muda com o HTML 5?
• HTML5 Diff
• Propriedade @font-face CSS – Fonts externas na web

. O elemento

é um elemento genérico que serve para criar DIVISÕES. Estas divisões não tinham significado semântico nenhum, não levavam nenhum tipo de informação “extra”, mas a nível de formatação resolvia nosso problema. Nós agrupávamos o conteúdo das seções e conseguíamos distinguir cada seção nomeando os divs com CLASSES e IDs e assim formatávamos o código com CSS.

A nível de semântica ou seja, para entregar informação útil para o usuário, sistemas ou aplicações, estas seções não eram eficazes. Não havia como distinguir um cabeçalho de um rodaé. Não era possível diferenciá-los pelo nome porque cada desenvolvedor dava seu próprio nome para o elemento: alguns chamavam de header, outro cabeçalhos, outros testeira (acredite se quiser) e assim por diante. Por estes motivos que no HTML5 as seções ganharam mais significado.

Cada coisa em seu lugar

As novas seções também fazem divisões, mas além disso elas servem significado para o código. Neste novo cenário o

perdeu um pouco o foco e será utilizado em detalhes. Ele ficou bem mais genérico que antes. Essa é uma das razões que o

é coisa do passado. Abaixo veja uma breve descrição dos novos elementos de seção do HTML5:

HEADER

Define um grupo de títulos ou o cabeçalho de uma determinada seção.

FOOTER

Define o rodapé das seções ou da página.

NAV

Define um grupo ou bloco de links de navegação.

ASIDE

Define um elemento lateral que pode conter blocos de navegação (NAVs), citações e outras informações que costumamos colocar em uma sidebar.

ARTICLE

Define a área onde há um artigo, texto, redação, conteúdo e etc…

SECTION

Define um bloco ou um grupo de um assunto específico. É importante entender que a section agrupa diversos elementos que tenham relação entre si. Por exemplo, se há uma área no site que há links, conteúdo, imagens e etc de um assunto em comum, você agrupará esses elementos com uma section. Nesse caso, ele entrou no lugar daquele div que fazíamos para dividir grandes blocos de assuntos em comum.

E o div? Exemplo.

E onde entra o

? O Div servirá para agruparmos elementos dentro destes sections ou fazer outros detalhes que não precisam de significado semântico, apenas visual.
Imagine que exista uma section chamada NOTÍCIAS:

...

Dentro dessa

há 3 colunas de assuntos diversos ou randomizados que dividem as chamadas.

      ...
   

      ...
   

      ...
   

Suponha que cada uma colunas seja de um assunto diferente, por exemplo: Esporte, Política e Educação. Aí nesse caso não usaríamos

mas sim outras

:

      ...
   

      ...
   

      ...
   

Você poderia utilizar DIVs com os IDs? Sim, claro. Mas lembre-se que o DIV é genérico, para os sistemas de busca, leitores de tela, aplicações e etc, os DIVs não indicam seções de conteúdo, mas o elemento

sim.

Há uma polêmica ainda com algumas ordens nas estruturas. No exemplo acima colocamos

em vez de

. Poderíamos ter colocado

dentro da

principal. Não vou entrar no que é mais certo ou no que é mais semântico porque neste contexto, ainda é subjetivo. Há alguns conceitos que iremos amadurecer durante um tempo. Contudo, temos que começar por algum lugar e claro, devemos estudar as melhores formas tanto para o projeto quanto para a semântica do código.

Você já deve ter lido isso aqui, mas lembre-se: semântica é o nome do jogo.

Posts Relacionados

• HTML5 Diff
• HTML5: Elemento AUDIO
• Bem vindo a Xangri-lá – Parte 2
• Sections: elemento article – Parte 4
• Sections: elemento nav – Parte 2

A regra do CSS chamada @font-face é uma das funcionalidades que foram mais aguardadas. Ela permite que você utilize famílias de fonts fora do padrão do sistema. Veja abaixo a sintaxe:

@font-face {
     font-family: helveticaneue;
     src: url('HelveticaNeueLTStd-UltLt.otf');
}

Na primeira linha você define um nome para a font importada.
Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
	font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Suponhamos que você queira oferecer a font para os usuário que não a possuem instalada, mas para aqueles usuários que tem a font em seus sistema, o browser utiliza a cópia local do usuário:

@font-face {
     font-family: helveticaneue;
     src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da que está no servidor.

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fonts para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.

Veja um exemplo pronto.

Fonts pagas

O principal problema com na utilização de @font-face é que arquivo da font é disponibilizado no servidor, de forma que qualquer um tem acesso. Se você estiver utilizando uma font paga, com direitos de copyright, o download desta font pode ser ilegal e você que está disponibilizando pode ser responsabilizado. Há uma série de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.

Leia mais sobre @font-face direto do W3C.

Posts Relacionados

• Múltiplos backgrounds com CSS
• HTML5: Elemento AUDIO
• Propriedade background-clip
• Introdução ao CSS 3D – Flip Card
• Experiência deve ter começo, meio e fim

Lembrando que você pode fazer isso facilmente com JQuery.

Suponha que você tenha o código HTML:

E o seguinte CSS:

Na linha 6, você faz com que as tags body e html tenham 100% de altura. Isso fará com que o rodapé entenda que o limite dos dois elementos seja o final da janela do navegador.

Na linha 8, defino que a largura mínima do div GERAL, que é o div que envolve todo o site, seja de 100%. E defino um position: relative; para que o footer seja referenciado por ele.

Na linha 14, eu defino um position: absolute; e bottom:0; para footer, forçando sempre para o final do div.
Se houver pouco conteúdo o Rodapé fica lá embaixo, se houver muito, o rodapé desce junto com o conteúdo.

Funciona em IE7+ e em bons browsers.

Link para o arquivo de exemplo: Footer fixo no Rodapé

Posts Relacionados

• Tutorial Tableless Básico em HTML5 – Layout de 3 colunas
• CSS3 – Abas com a pseudo-classe :target
• Convertidos do Tableless
• Introdução ao CSS Animation
• Formulário Básico em 8 minutos – Tableless form

Dessa forma, muitos códigos proprietários solucionavam problemas em determinado browser, que faziam o programador javascript (sim, isso já foi cargo) fazer muita volta para solucionar em outro browser. Isso acarretava em problemas imensos em manutenção. O cliente, em um belo domingo de sol ligava e dizia que o formulário estava “pulando”, muitas vezes acompanhado de um não sei nem o que é browser/navegador: “eu dou dois cliques no ícone da internet e entro”. Então lá ia o programador e precisava revisar dois, três códigos que faziam a mesma coisa em navegadores diferentes.

Ainda bem que, assim como o HTML e o CSS, o JavaScript também sofreu sua padronização, facilitando a criação de scripts que facilitam muito a vida do designer, deixando o designer cada vez mais feliz sem precisar consultar um programador. Uma dessas soluções foi a biblioteca jQuery. Uma biblioteca tão simples que designers conseguem fazer ótimos efeitos com apenas algumas linhas de comando.

Vamos a um exemplo/tutorial prático: um menu com submenus. Quando a pessoa clicar no link o submenu deve aparecer, com um efeito de slide.

Para o html usamos uma marcação simples, indicando quem é o menu e quem é o submenu.

Item 1
Item 2

SubItem 1
SubItem 2
SubItem 3

Item 3
Item 4
Item 5

Para ativar o jQuery você precisa baixá-la do site oficial (é apenas um aquivo js pequenininho) e coloque-a de preferencia na pasta ou em uma subpasta de onde está seu aquivo html, precisamos colocar a seguinte linha (de preferencia entre as tags <head> e </head> ):

<script type="text/javascript" src="pasta/onde/está/a/jquery.js"></script>

Após a inclusão da jQuery podemos usá-la sem problemas. Coloque seu código entre as tags <script> e <script> depois da chamada da jQuery. Tenha em mente que todo o que você vai fazer é chamado pela chave $ e interligamos os comandos com pontos. Então, para chamarmos o elemento que queremos colocar uma ação, no caso clicar, usamos a chave $ e para referenciamos, usamos as mesmas chamadas que usamos para o css.

$('ul.menu li.itemPai')

Agora, linkamos esse objeto com a ação click, ou seja quando a pessoa clicar no link propriamente dito.

$('ul.menu li.itemPai').click()

E passamos para ele uma função que fará nosso efeito de slide.

$('ul.menu li.itemPai').click(function(){
// Aqui virá a função
})

Agora, a função que fará o efeito. Chamamos com a chave $ quem queremos animar e o linkamos com o tipo de animação. Para o efeito de slide (ou seja, encolher e esticar o elemento dando a ilusão de que ele está saindo de trás do outro elemento para baixo) a jQuery tem dois efeitos prontos que são: slideUp que recolhe o elemento e slideDown que expande o elemento. Ainda temos o slideToggle, que recolhe o elemento se estiver expandido ou vice-versa. Então iremos usar slideToggle para este efeito. Também usamos o return false para fazer com que o link não seja executado, retirando o usuario da nossa página.

$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})

E voilá, o efeito está pronto. Exceto por um problema… Se você colocar este script antes do seu menu, ele não vai funcionar porque você esta referenciando um elemento que ainda não existe para o navegador, logo ele não pode referenciar ninguém. Uma solução seria colocar o seu script após o seu código html, mas isso vai contra uma das práticas de tableless que é trabalhar com camadas e, assim como o CSS, não é interessante deixar ele entre o código html por n razões. A outra solução faz parte do escopo do jQuery que faz com que seu script só rode após o carregamento completo do seu código html. Para isso basta criar uma função que englobe seu script dentro da chave $. Ficando assim:

$(function(){
$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})
})

Isto resolve nosso problema. Agora, precisamos esconder nosso submenu quando a página carregar. Fazemos isso via javascript e não via css porque não queremos que o menu fique invisivel para pessoas que não usam javascript. Para isso, a jQuery tem a função hide que esconde um elemento (display:none). Se você quiser fazer o contrario, basta usar show no lugar de hide.

E esse é o nosso script final que pode ser visto aqui e aqui com aplicação de CSS básico. O interessante da jQuery é que ela é bem inuitiva e tem muitas coisas que já vem no escopo dela que resolvem muitos problemas que os designers querem desenvolver, mas não querem que um programador faça por ser uma coisa tão simples de fazer. jQuery é a parte da programação que os designers sentiam falta e muitas vezes contornavam com um arquivo flash que destruia a semantica de área como o menu que acabamos de construir.

Posts Relacionados

• Navegando com a jQuery
• JavaScript com café
• jQuery: conheça os métodos on() e off()
• Manipulação de classes com JQuery
• jQuery: métodos desconhecidos

É um caminho muito duro o que separa o desenvolvedor acostumado a editores visuais do desenvolvimento de código coerente. E é muito comum que o designer desista após uma primeira tentativa frustrada de desenvolver um website tableless, com layout CSS e XHTML validado.

Por isso gostaria de propor um caminho gradual, mais suave, para aqueles que querem se aventurar pela primeira vez pelos padrões web. O princípio desse método é da recompensa. Você pode obter um grande benefício aproximando seu código dos padrões web, mesmo que não faça tudo de uma vez. Quero mostrar como você pode começar, e obter benefícios imediatos.

Limpe seu HTML

A minha primeira recomendação é que você estude CSS. Comece pela formatação básica de fonte, cor e tamanho. Isso vai te garantir código menor e produtividade maior com pouquíssimo esforço.

Assim, ao criar um item de menu, você vai evitar códigos como este:

<a href="parceiros.asp"><font
face="Arial, Helvetica, Sans-serif" size="2"
color="#FF3300"><b>Parceiros</b></font></a>

Colocando no lugar:

<a href="parceiros.asp" class="menu">Parceiros</a>

Tendo no CSS:

.menu{
font-family: Arial, Helvetica, Sans-serif;
font-size: 80%;
font-weight: bold;
color:#FF3300;
}

Como você pode ver, o CSS é extremamente simples. Aprender esses quatro atributos, mais o “font-style” (para fazer itálico), é a primeira coisa que eu recomendo. É claro, isso apenas faz cócegas nas possibilidades do CSS, ainda há muito o que aprender, mas recomendo começar por aí porque é algo que você pode aprender em alguns minutos e vai te salvar muito, muito tempo. E você vai começar a ter o controle da formatação, tendo todas as definições de fonte em um único arquivo, podendo alterar, por exemplo, a qualquer momento, a fonte de todo o conteúdo ou de todos os menus do site.

O passo seguinte para limpar seu HTML é se livrar do spacer.gif, aquele gif transparente de 1 pixel que se usa para dar espaços em tabelas, e das dezenas de tabelas aninhadas. Para isso vamos começar a estudar o “box-model”.

O pulo-do-gato aqui é um atributo CSS chamado padding. O padding é a distância entre as bordas de um elemento e o texto dentro dele. Assim, se é preciso que o conteúdo de uma célula esteja a 10 pixels da borda esquerda, ao invés de inserir uma célula extra como espaçador, ou inserir mais uma tabela, basta definir uma classe para essa célula. Uma vez que você já está colocando a formatação no CSS, provavelmente esta célula já tem uma classe. Então basta:

.conteudo{
padding-left:10px;
}

Isso vai fazer com que o texto esteja a 10 pixels da borda esquerda do documento. Ah, claro, o CSS também pode livrar você de definir no HTML as bordas e o background das células de sua tabela. Lembre-se, quanto mais layout e formatação você colocar no CSS, mais controle terá sobre seu site, principalmente em mudanças de layout durante o processo de produção e em futuras manutenções. O site também será mais leve para carregar.

Concluímos então que, após aprender os atributos de formatação de fonte, o passo seguinte é aprender os atributos background, border e padding. Indo até aqui você com certeza será um desenvolvedor muito mais feliz! Depois de limpar seu HTML, ganhar controle sobre a formatação de seu site e se tornar muito mais produtivo, você está pronto para passar à segunda etapa, correndo atrás da semântica.

Começando o Trabalho de Gente Grande

Muito bem, agora você já pode limpar seu código. Vamos estudar um exemplo prático. No começo de cada uma de suas páginas você tem um título, cujo código hoje é assim:

<font face="Arial, Helvetica, Sans-serif" size="4"
color="#FFFF00"><b>Novidades</b></font>

Ao limpar esse código, você vai substituir esse monte de tags por uma só. Que tag você vai usar? Como o CSS te permite formatar qualquer elemento, muita gente que começa a estudar o assunto acha que é indiferente que tag usar, e coloca algo como:

<p class="titulo">Novidades</p>

Agora, veja bem, outro desenvolvedor poderia resolver o mesmo problema com:

<div class="titulo">Novidades</div>

E o resultado visual poderia ser o mesmo. Acontece que há algo na natureza do HTML que nos diz que tag usar. Chamamos esse algo de “semântica”: as tags do HTML tem significado. A tag P é para parágrafos, a tag DIV para divisões no conteúdo, e há uma série de tags para título, h1, h2, h3, h4, h5 e h6. Assim, se você pode usar qualquer tag, pode fazer assim:

<h1>Novidades</h1>

O que você ganha com essa preocupação? Os buscadores inteligentes podem ler semanticamente o conteúdo de um documento, entendendo que trecho de código é um título, por exemplo. Assim, escrever HTML semanticamente correto pode melhorar muito sua visibilidade em buscadores. O segundo bom motivo é que você vai saber para que serve cada tag se tiver que mexer nesse mesmo documento daqui a alguns meses. E vai ser mais fácil também se outra pessoa tiver que dar manutenção no seu código.

Logo, use as tags do HTML para aquilo para o que foram criadas:

• dd, dl e dt para listas de definições (um glossário, por exemplo)
• h1 a h6 para títulos
• p para parágrafos
• abbr para abreviaturas e acronym para acrônimos
• blockquote e q para citações longas e curtas
• address para endereços (sabe aquele rodapé onde vai o endereço e o telefone da empresa?)
• ul e ol para listas e li para os itens da lista

Você pode obter uma lista mais abrangente em:
http://www.w3schools.com/xhtml/xhtml_reference.asp

E formate tudo ao seu gosto com CSS.

Finalmente, Livrando-se das Tabelas

Não há bons motivos para você eliminar a qualquer custo todas as tabelas de seu primeiro trabalho. Conheço alguns excelentes profissionais, muito talentosos, que fizeram um ótimo trabalho em sua primeira tentativa de tableless. Mas a maioria dos que eu vi tentarem demoraram muito para conseguir da primeira vez, e alguns não obtiveram os resultados que esperavam. Isso tudo serve para que você possa produzir mais rápido e melhor, não o contrário. Então vá com calma. Faça alguns estudos em tableless, comece eliminando parte das tabelas em seus primeiros trabalhos. Por exemplo, remover as células de tabela que formam o menu, trocando por uma lista (com as tags ul e li), é um ótimo desafio para o primeiro projeto.

Ah, e não se esqueça que para dados como uma tabela periódica ou um calendário a solução semanticamente correta é a tabela mesmo. Ou seja, tableless não é ausência de tabelas, é o seu uso apenas onde é semanticamente justificável.

Não vou entrar em detalhes aqui, porque já escrevi bastante sobre como construir um layout no Tutorial Tableless Básico, mas o conselho é ir com calma, sem estresse. Você logo vai estar produzindo tableless mais fácil do que produz sites com tabelas.

XHTML

Há uma coisa que muita gente que está começando me pergunta: o que é e para que serve esse tal de XHTML? É muito mais simples do que parece. Um arquivo XHTML é um arquivo HTML, que pode ser lido por qualquer browser. Não estamos falando de um novo HTML, com novas tags ou coisa assim. Pelo contrário, o XHTML 1 foi feito para funcionar mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo XHTML é também um arquivo XML válido, que pode ser lido por qualquer interpretador de XML.

Meu primeiro conselho, nesse caso, é que você, se não trabalha com XML, deixe preocupação com o XHTML para depois de dominar bem o código semântico e o layout tableless. Não porque seja complicado, pelo contrário, transformar bom HTML em XHTML é bem simples, mas simplesmente porque você pode obter benefícios muito significativos, e muito mais rapidamente, aprendendo CSS do que XHTML.

O segundo conselho é que você comece a estudar o assunto. Depois de dominar bem layouts CSS, mergulhe no XML. A maioria dos bancos de dados hoje permite extrair dados diretamente em XML e todas as plataformas de aplicações web trabalham bem com XML. E com a poderosa linguagem XSLT você pode muito facilmente oferecer seus os dados em XHTML para o navegador.

Voando Alto

Estamos falando de muito mais do que criar sites estilosos. Há duas semanas esteve aqui um amigo com um Palm novo, um Zire 71, e um celular com acesso à internet. Isso está se tornando cada vez mais barato e comum. Conheço também uma porção de empresas e instituições, entre elas uma série significativa de TeleCentros e órgãos públicos, que estão adotando Linux como sistema operacional para desktops. O Google hoje é responsável por 90% do tráfego que meu site consegue de buscadores. É o primeiro colocado absoluto entre os buscadores. E conseguiu isso indexando semanticamente o conteúdo real dos sites. Praticamente todas as plataformas web estão oferendo suporte a XML e apostando na idéia de webservices.

Quem segue os padrões web não precisa ter medo do futuro. Não importa que browser vai ser o mais usado daqui a dois anos, que tecnologia vai estar na moda ou de onde as pessoas vão estar usando a internet. Seu site estará lá, leve, acessível, atual e útil.

Posts Relacionados

• Ah, o maravilhoso mundo real
• Sobre Internet Explorer para Mobile – Breve impressão
• Sites para Dispositivos Móveis – MediaType
• O que é Tableless?
• Não “otimize” seu código

Para fazer um menu horizontal que seja fácil de personalizar e de fazer manutenção?
Siga os passos abaixo e descubra como é fácil.

Estrutura:

Primeiramente faça um elemento NAV (antigamente usaríamos a tag DIV) e atribua um ID. Neste exemplo nossa NAV se chamará “menu”. Dentro desta NAV, faça uma lista com as opções do menu.

Começando a formatação:

Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;), o padding (padding:0px;) e os Bullets das opções (list-style:none;) da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:

Terceiro:

Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:

Deixando o menu na horizontal:

Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.

Vamos ver no que deu!

Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.

Posts Relacionados

• Vídeo: Menu horizontal com CSS em 5 minutos
• CSS3 – Abas com a pseudo-classe :target
• Drops 3 – Duas formas de modular seu CSS
• Colocar Rodapé fixo no fim da página
• Digest – Referências de CSS

Ter uma Web com as suas informações todas “organizadas” é extremamente importante, isso facilita uma busca pela Web por informações mais precisas.
Para que seu arquivo possa ser lido por máquinas além de humanos é muito importante que você escreva um XHTML válido, com isso você está fazendo com que as informações do seu site fique mais acessível para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.

DOC o que?!

O Doctype (Document Type Definition, vulgo DTD) é a primeira coisa que se deve escrever em um arquivo XHTML, ele vai na PRIMEIRA LINHA do seu documento, se você quiser ter um XML Válido, não devemos esquecê-lo, ele serve para informar ao browser que tipo de documento será visualizado, ok?

Existem 3 tipos:

• Strict: Este tipo é usado quando você fez um código 100% XHTML, sem erros, deve ser escrito assim:
  <!DOCTYPE html
  PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
• Transitional: Este é o modo mais usado, você o usa quando está começando a migrar do nosso amigo HTML para o poderoso XHTML, sua sintaxe é:
  <!DOCTYPE html
  PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
• Frameset: É usado quando você está utilizando FRAMES em seu site, se escreve assim:
  <!DOCTYPE html
  PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Exemplo:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title></title>
</head>
<body>
…
</body>
</html>

Feche TODAS as tags

Quem já escreveu algum XML sabe que ele não funciona até que TODAS as tags estiverem bem fechadas, no HTML era diferente, muitas vezes deixávamos tags abertas, e ele funcionava que era uma beleza.

Para se fazer um XHTML válido, devemos fechar TODAS as tags:

1. Não devemos esquecer de fechar as tags que estamos carecas de conhecer: <p></p>, <b></b>, etc…
2. E não devemos esquecer de forma alguma de fechar as tags “solitárias”, assim, ao invés de <br> escrevemos <br></br>, ou na forma simplificada: <br />.

Descobriram que fechando tags desta forma <br/>, não se sabe porque estava causando um problema no Netscape, mas apenas colocando um espaço antes da / o problema é solucionado.

Use letras minúsculas

Quem nunca viu um código fonte de um documento HTML escrito assim:
<A href=”http://tags.com.letras.minúsculas/” TARGET=”_BLANK”> </A>
Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula!

Não esqueça das “ASPAS”

Esta regra é bem simples. Todos os atributos XHTML devem conter as benditas “ASPAS”.

Atributo NAME

O antigo atributo NAME foi substituído pelo atributo ID. Se seus usuários, clientes, etc, utilizam ainda antigos browsers, você pode sem problema nenhum utilizar as duas formas juntas durante neste período em que estamos migrando:
<img src=”imagem.gif” id=”imagem” name=”imagem” />

Atributos sem valor

Não devemos esquecer também os atributos que escrevemos sem valor, por exemplo:

ERRADO:
<option selected>
<frame noresize>
<input checked>
<input readonly>

CERTO:
<option selected=”selected”>
<frame noresize=”noresize”>
<input checked=”checked”>
<input readonly=”readonly”>

E assim por diante.

Quer uma ajudinha?

Se você está migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha.
O TIDY é uma ferramenta para validar e consertar códigos HTML, ele tem opções que você pode escolher qual a versão do HTML você quer validar, uma dessas opções é a XHTML. Se você já está escrevendo um XHTML e quer que seu código fique livre de todos os erros, o TIDY arruma para você.
Ele foi originalmente desenvolvido por Dave Raggett e hoje é mantido por um projeto de código aberto: SourceForge, por um grupo de voluntários.

Últimas palavras

Fazendo todas essas pequenas porém importantes regras, quer dizer, regras não, LEIS, você terá um belo de um documento XHTML válido, e acima de tudo, estará contribuindo para uma WEB melhor.

Como eu passei apenas o miolo, navegando nestes links poderão ser achados mais informações a respeito:

• Referência de XHTML 1.0
• Tutorial da W3C
• W3Schools:
• WebSemântica

Notas:

Para saber se seu documento XHTML é válido:
http://validator.w3.org

Tidy:
http://tidy.sourceforge.net/
http://www.w3.org/People/Raggett/tidy/

Posts Relacionados

• Ah, o maravilhoso mundo real
• O Caminho Suave para o Tableless
• Documentos do W3C em Português
• Não “otimize” seu código
• O que é Tableless?

Esse Video Tutorial mostra o processo de aplicação de CSS em cima da estrutura HTML criada no Video Tutorial #8.

UPDATE: Se alguém quiser baixar o vídeo, só clicar nesse link. O arquivo está em formato Rar (rarlab.com).

O vídeo tem uma hora de duração, portanto esteja preparado. Meus comentários não foram muito incisivos porque eu não fiz o audio durante gravação. Tentei ser o mais completo possível, espero que ajude.

Duração: ~1 hora
Tamanho: 60Mb
Formato: SWF
Acesso: Video Tutorial #9
Download: videotutorial9.rar (formato rar)

Por favor, comentem, vai ser bom.
Obs.: O arquivo é grande, mas tem um buffer muito bom, dá para assistir tranqüilamente sem aqueles gaps. Eu acho.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

Posts Relacionados

• Tutorial Tableless Básico em HTML5 – Layout de 3 colunas
• O Caminho Suave para o Tableless
• Sobre Internet Explorer para Mobile – Breve impressão
• Ah, o maravilhoso mundo real
• Performance do seu CSS