HTMl5 veio mesmo para ficar e a a flexibilidade do HTML5 + CSS3 garantidamente o vão tornar um criativo de topo. As antigas questões de compatibilidades estão practicamente ultrapassadas graças a recursos como Modernizr, Explorer Canvas e IE7-Js. Se ainda não conhece as capacidades do HTML5 e CSS3, então será boa ideia começar por ler alguns artigos relacionados e principalmente meter as mãos à obra e descobrir o que estes fantásticos recursos têm para lhe oferecer. Neste artigo vamos-lhe ensinar num tutorial passo-a-passo como construir o seu primeiro template HTML5 + CSS3, com instruções claras, objectivas e simples – este é o nosso principio, criar conteúdos que possam ser entendidos quer os nossos leitores sejam iniciantes ou experientes. Sem perder mais tempo, Construa o seu primeiro template HTML5!

Não perca alguns artigos relacionados com a matéria:

Para referência HTML5:

Para referência CSS3:

1. INICIAR DOCUMENTO

Neste tutorial vamos utilizar a ferramenta Adobe Dreamweaver, que tem vindo a ser retratada em vários artigos ao longo das últimas semanas. Crie um novo documento HTML e um novo documento CSS e faça a ligação entra ambos. Para isso, no documento HTML e dentro da tag <head> insira o seguinte código:

<link rel="stylesheet" href="style.css">

A partir deste momento você poderá acessar o ficheiro CSS a partir do documento HTML.

Não perca alguns artigos úteis sobre Adobe Dreamweaver:

2. INSERIR LIGAÇÕES PARA EFEITOS E COMPATIBILIZAÇÃO

Este template HTML5 está preparado para ser compatível com os mais variados navegadores web. Isso é feito através da integração de uma ferramenta que já foi explicada anteriormente na Escola Criatividade, em Melhore a utilização de HTML5 e CSS3 com Modernizr. Além disso, conta ainda com efeitos jQuery que também falámos anteriormente em 6 Efeitos jQuery para introduzir em seus websites!. Para fazer a ligação a estes 2 itens, insira ainda dentro da tag <head> os seguintes trechos de código:

Modernizr:

<script src="js/modernizr-1.6.min.js"></script>

jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>

Desta forma você está a habilitar o seu template a utilizar efeitos jQuery e a compatibilizá-lo com a grande maioria dos navegadores web da actualidade e anteriores.

3. INSERIR EFEITOS JQUERY NO MENU

Neste passo vamos definir quais os efeitos a utilizar no menu de navegação do nosso website HTML5. Insira o seguinte trecho de código ainda dentro da tag <head>:

<script>
    function initMenu() {
      $('#menu ul').hide(); // Hide the submenu
      if ($('#menu li').has('ul')) $('#menu ul').prev().addClass('expandable'); // Expand/collapse a submenu when it exists
      $('.expandable').click(
        function() {
            $(this).next().slideToggle();
            $(this).toggleClass('expanded');
          }
        );
      }

    // When document ready, call initMenu() function
    $(document).ready(function() {initMenu();});
</script>

4. CONSTRUIR O CABEÇALHO DO WEBSITE

O cabeçalho do website consiste no título do mesmo e uma breve descrição. Este cabeçalho irá ser estilizado mais tarde na folha de estilos que criámos anteriormente. Insira o seguinte trecho de código dentro da tag <head>:

<hgroup class="clearfix">
        <h1><a href="#">Template HTMl5 <span>Escola Criatividade</span></a></h1>
        <h2>Construa o seu primeiro template HTMl5!</h2>
</hgroup>

5. INTRODUZIR O MENU

O menu é introduzido já dentro da tag <body> pois faz parte integral da zona principal do website. Criámos um menu simples com alguns itens para lhe dar uma ideia daquilo que pode fazer. É extremamente fácil editar este menu, introduzindo ou removendo itens.

<aside>
        <nav>
            <ul id="menu">
                <li><a href="#">Início</a></li>
                <li>
                    <a href="#">Categorias</a>
                    <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Inspiração</a>
                    <ul>
                        <li><a href="#">Fotografia</a></li>
                        <li><a href="#">HDR</a></li>
                        <li><a href="#">Imagens Diversas</a></li>
                        <li><a href="#">Arquitectura</a></li>
                    </ul>
                </li>
                <li><a href="#">Acerca</a></li>
                <li><a href="#">Contactos</a></li>
            </ul>
        </nav>
    </aside>

Neste exemplo o menu não tem as hiperligações inseridas. Para inserir as hiperligações, basta introduzi-las no lugar do # que está à frente do href. As aspas devem ser mantidas.

6. DEFINIR A ZONA DE CONTEÚDOS

A zona dos conteúdos é onde iremos inserir o conteúdo do website. Cada entrada é definida pela tag <article> que está dentro da div “content”. Esta div é importante para a estilização da zona de conteúdos na nossa folha de estilos. Se quiser introduzir mais entradas basta seguir o exemplo que lhe vamos mostrar:

<div id="content">
        <article>
            <section>
                <h1><a href="#">6 Efeitos jQuery para introduzir em seus websites!</a></h1>
                <figure>
                    <img src="http://www.escolacriatividade.com/wp-content/uploads/2011/10/jqueryfuncoes.jpg" width="630" height="362" alt="6 Efeitos jQuery para introduzir em seus websites!">
                    <figcaption>6 Efeitos jQuery para introduzir em seus websites!</figcaption>
jQuery é amplamente conhecido no seio dos desenvolvedores web e como muitos sabem é bastante útil. Um dos pontos fortes de <a title="Tutorial jQuery: o que é e como usar o jQuery!" href="http://www.escolacriatividade.com/tutorial-jquery-o-que-e-e-como-usar-o-jquery/" target="_blank">jQuery</a> é a possibilidade de se adicionar efeitos &ldquo;especiais&rdquo;  nas páginas web sem grandes problemas. Estes efeitos passam por exemplo por mostrar e ocultar partes da página sejam elas texto ou imagens. jQuery é considerado como uma das melhores bibliotecas <a title="Javascript Explicado – Abordagem Avançada" href="http://www.escolacriatividade.com/javascript-explicado-abordagem-avancada/" target="_blank">Javascript</a> existentes no mercado das linguagens de programação, permitindo aos desenvolvedores criar verdadeiras <a title="28 Criações de arte incríveis e belas com Papel" href="http://www.escolacriatividade.com/28-criacoes-de-arte-incriveis-e-belas-com-papel/" target="_blank">obras de arte</a> para quem visita as suas páginas. A introdução de efeitos nas páginas pode levar ao melhoramento da experiência de navegação do usuário, fazendo muitas das vezes com que este goste do que vê e volte mais tarde. A fidelização dos visitantes é um aspecto muito importante, e com jQuery você pode dar um passo em frente nesse campo. Para o ajudar a melhorar as suas páginas web utilizando jQuery trazemos-lhe neste artigo alguns <strong><a href="http://www.escolacriatividade.com/efeitos-jquery-para-introduzir-em-seus-websites/">6 Efeitos jQuery para introduzir em seus websites!</a></strong></figure>
            </section>
            <footer>Inserido em <span>3 de Novembro de 2011</span></footer>
        </article>
        <article>
            <section>
                <h1><a href="http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box">10 Programas de Edição HTML e CSS para Windows e Linux</a></h1>
                <figure>
                    <img src="http://www.escolacriatividade.com/wp-content/uploads/2011/04/screem.png" width="630" height="451" alt="10 Programas de Edição HTML e CSS para Windows e Linux">
                    <figcaption>10 Programas de Edição HTML e CSS para Windows e Linux</figcaption> Enquanto designers ou programadores temos as nossas aplicações favoritas, qualquer que seja o nosso sistema operativo de eleição, Windows, Linux ou <a href="http://www.escolacriatividade.com/30-fantasticos-wallpapers-mac-osx-de-alta-resolucao/" target="_blank">Mac OS</a>. Aquilo que classificamos como as nossas aplicações favoritas são aquelas com as quais nos identificamos melhor, aquelas que satisfazem melhor as nossas necessidades para as nossas tarefas de edição <a href="http://www.escolacriatividade.com/programas-edicao-html-css-para-mac/" target="_blank">HTML</a> e <a href="http://www.escolacriatividade.com/tutorial-aprender-o-basico-sobre-css/" target="_blank">CSS</a>. Depois do sucesso do artigo <a href="http://www.escolacriatividade.com/programas-edicao-html-css-para-mac/" target="_blank">8 Programas de edição HTML e CSS para Mac</a>, onde surgiram algumas sugestões para a criação de um artigo idêntico orientado para Windows e Linux, criámos uma selecção de aplicações que consideramos serem as mais indicadas, de entre as inúmeras que existem. Assim, apresentamos-lhe hoje <strong><a href="http://www.escolacriatividade.com/programas-de-edicao-html-e-css-para-windows-e-linux/">10 Programas de Edição HTML e CSS para Windows e Linux</a></strong><a href="http://www.escolacriatividade.com/programas-de-edicao-html-e-css-para-windows-e-linux/">.</a>
                </figure>
          </section>
            <footer>Inserido em <span>3 de Novembro de 2011</span></footer>
      </article>
  </div>

7. NOTA IMPORTANTE: DIV MAIN

Quando começámos a construir o menu e a zona de conteúdos, não definimos uma Div pra esta zona, chamada de Main. Antes do código do menu, introduza o seguinte trecho de código:

<div id="main" class="clearfix">

Deverá ficar parecido com:

<div id="main" class="clearfix">

    <aside>
        <nav>
            <ul id="menu">
(... resto do código ...)

No final da zona de conteúdos denominada “content” deverá inserir o final da div Main. Para tal insira o seguinte trecho de código:

</div>

Deverá ficar parecido com:

(... código ... )
           </section>
            <footer>Inserido em <span>3 de Novembro de 2011</span></footer>
      </article>
  </div>

</div>

8. RODAPÉ

O rodapé também é uma parte importante do nosso template, onde poderá introduzir algumas informações básicas e simples. Neste caso introduzimos os créditos a quem produziu o template original, no qual nos baseámos para criar o artigo de hoje.

<footer>
    Template <a href="http://www.escolacriatividade.com/">Escola Criatividade</a> baseado no template original da <a href="http://www.red-team-design.com/">RedTeamDesign</a>
</footer>

9. FINALMENTE: ESTILIZAÇÃO

A estilização é aquilo que irá compôr e embelezar o nosso template. É bastante simples de compreender, já que está tudo identificado pelas suas entradas no template:

@charset "utf-8";
/* CSS Document */

/* Small reset */

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

a
{
  color: #6F3736;
}      

/* Clear floats */

.clearfix:after
{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix
{
  *zoom: 1;
}

/* Layout styles */

body
{
    background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF3d3d////riJKgAAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR42mJgBAEGGMmAxAYCgAADAAGGABmnk/7aAAAAAElFTkSuQmCC);
    margin: 0;
    font-family: 'Lucida sans', Arial, Helvetica;
    font-size: small;
}

header
{
    padding: 10px 0;
    background-color: #4c2626;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#D19A01), to(#4c2626));
    background-image: -webkit-linear-gradient(top, #D19A01, #4c2626);
    background-image: -moz-linear-gradient(top, #D19A01, #4c2626);
    background-image: -ms-linear-gradient(top, #D19A01, #4c2626);
    background-image: -o-linear-gradient(top, #D19A01, #4c2626);
    background-image: linear-gradient(top, #D19A01, #4c2626);
    -moz-box-shadow: 0 1px 0 #fff, 0 -3px 3px #000 inset;
    -webkit-box-shadow: 0 1px 0 #fff, 0 -3px 3px #000 inset;
    box-shadow: 0 1px 0 #fff, 0 -3px 3px #000 inset;
}

header hgroup
{
    margin: 0 auto;
    width: 960px;
}

header h1
{
    margin: 0;
    font: 25px/1 'Luckiest Guy', cursive; /* Google font API */
    float: left;
    text-shadow: 0 1px 0 rgba(0,0,0,.9);
}

header h2
{
    color: #ffffff;
    margin: 0;
    float: right;
    font: italic normal 15px/25px Arial, Helvetica;
}

header a
{
    color: #eee;
    text-decoration: none;
}

header a span
{
    color: #000000;
}

/* --------------------------------------------------- */

footer
{
    text-align: right;
    width: 960px;
    margin: 0 auto;
    padding: 10px 0;
}

#tw, #fb
{
    float: right;
    width: 130px;
    margin: 10px 0 0 0;
    overflow: hidden;
}

/* --------------------------------------------------- */        

#main
{
    margin: 20px auto 0 auto;
    width: 960px;
}

aside
{
    float: left;
    width: 250px;
    margin-right: 20px;
}

#content
{
    float: left;
    width: 690px;
}

article
{
    position: relative;
    padding: 20px;
    margin: 0 0 20px 0;
    text-align: center;
    background: #fff;
    -moz-box-shadow: 0 1px 1px #999;
    -webkit-box-shadow: 0 1px 1px #999;
    box-shadow: 0 1px 1px #999;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

article:before, article:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

article:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}        

article footer
{
    text-align: center;
    width: auto;
}

article footer span
{
  padding: 0 10px 0 12px;
  margin: 0 0 0 12px;
  background: #bbb;
  color: #fff;
  font: bold 12px/24px arial, helvetica;
  display: inline-block;
  position: relative;
  text-shadow: 0 1px 0 #999;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  -moz-box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
  -webkit-box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
  box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
}

article footer span:before
{
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: transparent #bbb transparent transparent;
  border-style: solid;
  border-width: 12px 12px 12px 0;
}

article footer span:after
{
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  -moz-box-shadow: -1px -1px 2px #777;
  -webkit-box-shadow: -1px -1px 2px #777;
  box-shadow: -1px -1px 2px #777;
}        

figure
{
    margin: 1em 0;
}

figcaption
{
    margin: 0.5em 0;
    font-style: italic;
    font-size: 0.9em;
    color: #777;
}

/* Vertical menu */

#menu li
{
  margin: 0 0 3px 0;
}

#menu a
{
  display: block;
  *display: inline-block;
  *width: 240px;
  text-decoration: none;
  background: #ddd;
  color: #444;
  padding: 10px 5px;
  text-transform: uppercase;
  font: bold 12px Arial,Helvetica;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  -moz-box-shadow: 0 1px 0 #ccc;
  -webkit-box-shadow: 0 1px 0 #ccc;
  box-shadow: 0 1px 0 #ccc;
}

#menu a:hover
{
    color: #eee;
    background: #9c9c9c;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#999));
    background: -webkit-linear-gradient(top, #bbb, #999);
    background:    -moz-linear-gradient(top, #bbb, #999);
    background:     -ms-linear-gradient(top, #bbb, #999);
    background:      -o-linear-gradient(top, #bbb, #999);
    background:         linear-gradient(top, #bbb, #999);
}

#menu .expandable
{
    position: relative;
}

#menu .expandable:before,
#menu .expandable:after
{
  content: '';
  position: absolute;
  right: 5px;
  margin-top: 5px;
  border-top: 6px solid #444;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

#menu .expandable:before
{
   border-top-color: #fff;
   margin-top: 6px;
}

#menu .expanded:after
{
  border-top: 0;
  border-bottom: 6px solid #444;
}

#menu .expanded:before
{
    border-top: 0;
    border-bottom: 6px solid #fff;
}

#menu ul a
{
    background: #f2f2f2;
    text-transform: none;
    font-weight: normal;
}

#menu ul a:hover
{
    background: #fafafa;
    color: #444;
}

A imagem de fundo está inserida utilizando um decoder no formato URI. Se pretender alterar a imagem utilizando esta ferramenta, pode encontrá-la aqui.

10. FICHEIROS FONTE

Se pretender baixar os ficheiros fonte para ter uma base onde se iniciar e tirar ideias para os seus templates HTML, pode fazê-lo aqui.

11. RESULTADO FINAL

TEM DÚVIDAS OU SUGESTÕES?

Se tiver alguma dúvida ou sugestão, não perca mais tempo! Comente o artigo e participe activamente na comunidade Escola Criatividade!

Comentários dos Alunos

José Almy
4 de Novembro de 2011

Diogo, sensacional! Parabéns!
Responder
- Diogo Espinha
  4 de Novembro de 2011
  
  Olá José Almy, muito obrigado! Espero que seja útil para si também.
  
  Abraço
  Responder
Willian J. Gonçalves
4 de Novembro de 2011

Boa Tarde Diogo.

Parabéns pelo post.

Gostaria de saber com você como posso personalizar meu com as diversas ferramentas uso hoje um blog no WORDPRESS.COM. Andei lendo sobre isso e pelo que pesquisei o .COM e o .ORG são coisas totalmente distintas, dai meu problema; existe a possibilidade de transferir esse blog para o .ORG para que possa a partir daí fazer as devidas alterações?

Grato
Responder
- Diogo Espinha
  4 de Novembro de 2011
  
  Olá Willian Gonçalves, o alojamento fornecido pelo wordpress.com para o seu blog é extremamente limitado. Devo dizer-lhe que no .org não são feitos alojamentos de blogs, mas sim fornecidos os ficheiros necessários para você alojar o seu blog wordpress num servidor próprio. As diferenças entre ter o seu blog no wordpress.com ou ter num alojamento próprio são colossais, é como você passar de poder fazer praticamente nada, para passar a poder fazer tudo e mais alguma coisa. No seu alojamento você tem controle total sobre o seu blog, ao contrário do que acontece no wordpress.com.
  
  Se estiver interessado em adquirir um alojamento para o seu blog envie-me um e-mail para diogo.espinha[at]gmail.com e poderei aconselhá-lo com os melhores provedores de alojamento que conheço.
  
  Se realmente avançar para essa opção, fique sabendo que é possível importar os dados do seu blog em wordpress.com para o seu blog em alojamento próprio. Além disso será muito vantajoso para você fazer uma visita à Escola WordPress em http://www.escolawp.com onde tem ao seu dispor imensas matérias que o ajudarão a configurar devidamente o seu blog.
  
  Espero ter ajudado!
  Grande abraço
  Responder
Jose
4 de Novembro de 2011

Muito Bom
Espero que o proximo post seja osbre PHP!
Responder
Rhenan
9 de Novembro de 2011

Olá Diogo, muito interessante o artigo. Saindo um pouco do assunto do artigo, como faço para adicionar esse bloco de código ao post?

Até.
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Olá Rhenan, não percebi a sua questão, pode explicar qual o bloco de código em questão?
  
  Abraço!
  Responder
  - Rhenan
    23 de Novembro de 2011
    
    esta área numerada por linha onde está o código fonte.
    
    1| primeira linha
    2| segunda linha
    3| terceira linha
    
    desculpe, não sei explicar bem rsrsrs
    
    Até
    Responder
    - Diogo Espinha
      23 de Novembro de 2011
      
      O HTML é inserido no ficheiro index.html, o CSS é inserido no ficheiro style.css
      
      Se baixar os ficheiros do código fonte terá acesso a essa informação e poderá perceber melhor como está introduzido o código
      
      Abraço!
      Responder
Vinicius
19 de Novembro de 2011

Primeiro, parabéns pelo post! Segundo, que tecnologia você recomenda para se fazer sites dinâmicos, na verdade sistemas web, usando o html5?
Abraço
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Olá Vinicius, obrigado pela sua visita! A melhor combinação será sem dúvida PHP+HTML5+CSS3 – desta forma você conseguirá combinar aquelas que na minha opinião são as melhores linguagens web disponíveis de momento!
  
  Abraçp
  Responder
Vitor Silva Carvalho
23 de Novembro de 2011

Olá Diogo,
Excelente artigo, desconhecia na totalidade a tag
Um abraço ;)
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Olá Vitor, obrigado!
  
  Abraço
  Responder
gm design
25 de Novembro de 2011

Nossa, era tudo que eu precisava, rs!
Começei com meu blog agora e tudo que aprendi foi mexendo nos códigos e lendo muuito sobre isso. Quero muito aprender HTML 5 e tenho certeza que seu post vai me ajudar muito.
Obrigada!
Responder
- Diogo Espinha
  6 de Março de 2012
  
  Obrigado pelas suas palavras Gm Design!
  Abraço
  Responder
Renan
1 de Dezembro de 2011

Excelente post. Parabéns!
Responder
- Diogo Espinha
  6 de Março de 2012
  
  Olá Renan, obrigado pela sua visita e comentário!
  
  Abraço
  Responder
Iv@n
5 de Março de 2012

Excelente tutorial, parabéns!
Responder
- Diogo Espinha
  6 de Março de 2012
  
  Olá Ivan, muito obrigado pela sua visita e pelas suas amáveis palavras!
  
  Abraço
  Responder
Luan Grillo silva
27 de Abril de 2012

Diogo Espinha, Como que você faz para converter a imagem para code (data:image/png;base64)
Responder
Carlos
4 de Maio de 2012

E ae cara, blz?
Vc q aparenta ter e concerteza tem muita experiencia em desenvolvimento de web sites, eu tenho uma pergunta pra vc…
To estudando muito edião em style sheets o tal do css, porem as vezes nao da certo os codigos, tipo:
- Se eu coloco o style separado, mesmo linkando ele a partir do html nao tem o mesmo efeito se estiver dentro do html…
- Nao da certo as vezes quando coloco codigos, tipo eu edito de acordo com um tutorial;por exemplo;e quando ponho pra rodar nao vai.

Sera q tem diferenciação entre as versoes do html, tipo 1, 2 e assim por diante, ou nada a ve? E tbem pode ter relaçao com a versao do css?? 1, 2 ou 3.
Como pôde ver sou meio leigo no assunto qdo vem a ser css, manjo bem o html aprendi sozinho vendo codigos na net mas to tendo muita dificuldade com o css…mesmo copiando… Ah! e meus navegadores sao atuais
Responder
Ivan Bottion
8 de Maio de 2012

Olá Diogo, parabéns pelo artigo, muito bom mesmo.

Você saberia me dizer se programas como o Artisteer, utlizados para criar templates, se já possuem suporte para criar e editar templates em HTML5? Também poderia indicar programas na linha do Artisteer que ajudam na criação de templates HTML5.

Obrigado,

Ivan
Responder
Empregodinheiro
13 de Maio de 2012

Artigo de qualidade e detalhado gostei.
Responder
- Diogo Espinha
  18 de Maio de 2012
  
  Olá EmpregoDinheiro, obrigado pela sua visita e comentário!
  
  Abraço
  Responder
Istefano
28 de Agosto de 2012

Olá Diogo,excelente esse posto, gostaria de saber como posso mudar a cor do hgroud,
.clearfix:after

grato.
Responder
Rosangela
28 de Janeiro de 2013

Bom dia Diogo em primeiro lugar ótimas explicações, agora tenho uma dúvida com relação a section, você usou uma div content e depois uma section, posso usar a section e colocar uma class nela e depois uma div?
Responder
Vantuir de Souza
29 de Janeiro de 2013

Boa tarde Diogo e Cia. Sou um estudioso da web, e tenho apreciado muito seus tutorais e artigos. Muito bom ver pessoas assim, interessada em passar bons exemplos nesta área, Parabens.
Responder