Vamos ver uma demostração de estrutura em HTML5 , além de aprender a aplicar estilos CSS3 em tal estrutura.
Por Alejandro Martín Bailón-Tradução CRV
Publicado em: 14/6/11
Valorize este artigo:
Neste terceiro artigo sobre HTML5 e IE 9 vamos ver uma demonstração do uso da estrutura em HTML5 e como podemos aplicar estilos CSS 3.
Demostração de estrutura de documentos HTML5
Anteriormente vimos a estrutura de HTML5 e agora vemos uma demonstração do uso das etiquetas que aportam estrutura a documentos HTML5, vamos simular a reconstrução do portal de tecnologia Windows Técnico.
Todo o código necessário para a realização das demonstrações pode ser baixado aqui e caso vocês tenham algum problema de acesso, vocês podem entrar em contato com meu companheiro Rubén Alonso, que amavelmente me cedeu seu SharePoint para extrair de seu site a demo, através de seu email ralonso@informatica64.com. Para poder fazer as demos, o entorno de desenvolvimento gratuito que utilizamos é Microsoft Visual Web Developer 2010 Express. Outro aspecto a ter em conta é o Intellisense. Para que o Visual Studio Web Developer reconheça o código HTML5 e mostre a ajuda para as etiquetas que vamos utilizar, vocês devem baixar este complemento. Nesta demo só vamos dar a estrutura à página. Logo chegará a hora de aplicar estilos. O aspecto visual do site na finalização da mesma nos mostrará a página web HTML5 com estrutura (e sem estilos) da forma que mostro a seguir.
Imagem 7: Site de Windows Técnico com nova estrutura HTML5
O primeiro passo da demonstração, claro está, consiste em indicar que estamos tratando de um arquivo HTML5, razão pela qual começaremos indicando o tipo de documento com que estamos trabalhando através da etiqueta .
Imagem 8: Declaração de tipo de documento
Seguidamente vamos estabelecer a estrutura principal do documento utilizando para isso as novas etiquetas que incorpora a linguagem, tais como ,
