Como Criar Uma Página WEB Com HTML5 – O Guia Essencial

Compartilhamentos

Depois de um bom tempo sem escrever para o blog, eis que volto aqui com um conteúdo bem relax sobre HTML5.

Dessa vez pretendo mostrar como criar uma página completa utilizando as tags semânticas desta linguagem de marcação.

É um tutorial bem simples e prático que tem como objetivo te orientar perante as famosas tags semânticas do novo HTML5.

Para este tutorial você precisará de um editor de texto e um navegador web instalado para verificar o funcionamento do código.

Neste artigo veremos as seguintes tags:

  • <section>
  • <header>
  • <article>
  • <aside>
  • <footer>
  • <nav>

Se você ainda não sabe o que é HTML e nem como criar um site com tal linguagem, sugiro dar uma lida no artigo abaixo:

>> Como Criar um Site Com HTML <<

Basicamente iremos fazer um layout parecido com a da imagem abaixo:

página em HTML5

Não é um layout tão rebuscado, mais vai servir para o propósito do artigo, que é te deixar por dentro da criação de uma página com HTML5.

RECEBA NOSSO CURSO GRATUITO

Insira seu e-mail abaixo para garantir acesso grátis ao nosso curso de HTML em 30 dias!

Vamos aos passos…

 

O primeiro passo é criar uma pasta na sua área de trabalho e nomeá-la como: exemplo1.

O próximo passo é abrir o seu editor de texto preferido (estou utilizando o Sublime Text) e começar a codificação.

Digite o seguinte código no editor:

<!DOCTYPE html>
 <html lang="pt-br">

<head>
 <title>Exemplo de página 01</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>

<body>

<section id="geral">

<header id="bannerGeral">
 <h1>Aqui ficará localizado o Banner</h1>
 </header><!--fim header banner geral-->

<nav id="topo">
 <h2>Aqui ficará localizado o menu</h2>
 </nav><!--fim nav topo-->

<article id="content">
 <h3>Aqui ficará o conteúdo da página</h3>
 </article><!--fim content -->

<aside id="sidebar">
 <h4>Aqui ficará localizado a sidebar</h4>
 </aside><!-- fim aside sidebar-->

<footer id="rodape">
 <h2>Aqui ficará localizado o rodapé</h2>
 </footer><!--fim rodape-->

</section><!--fim section geral-->

</body>
 </html>

Agora vamos entender o código:

<!DOCTYPE html> – Esta linha indica que estamos criando um documento HTML e repassa para o navegador qual versão desta linguagem estamos utilizando. Da forma que se encontra em nosso exemplo, estamos utilizando a versão 5. Porém, se você quiser utilizar versões mais antigas como a XHTML, você deve utilizar algo do tipo: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

<html lang=”pt-br”> – Tag de abertura de um documento HTML5.

<head> – Abre o bloco de cabeçalho do documento.

<title>Exemplo de página 01</title> – Formata o título da página que aparece na aba do navegador.

<meta charset=”utf-8″> – Indica o padrão de codificação que estamos usando na página. Esse pequeno trecho de código nos ajuda na questão dos caracteres e erros com acentuação.

<link rel=”stylesheet” type=”text/css” href=”style.css”> – Esta linha indica que estamos utilizando um arquivo de texto externo para estilizar o nosso documento. Falarei mais sobre isso no decorrer do artigo.

</head> – Fecha o nosso cabeçalho.

<body> – Abre o corpo da página.

<section id=”geral”> </section><!–fim section geral–> – Criamos uma seção de conteúdo para englobar todas as informações da página. É importante destacar que as tags de seção definem de forma semântica o local onde poderemos desenvolver um assunto específico. Ganha destaque os comentários na tag de fechamento, essa técnica facilita quando a quantidade de código for muito alta, pois o desenvolvedor consegue identificar onde está o fechamento de determinado bloco de código.

<header id=”bannerGeral”>
<h1>Aqui ficará localizado o Banner</h1>
</header><!–fim header banner geral–> – Criamos um cabeçalho dentro da seção geral para colocar o banner da página. Lembrando que a tag <header> possui valor semântico de cabeçalho para o conteúdo colocado dentro das mesmas.

<nav id=”topo”>
<h2>Aqui ficará localizado o menu</h2>
</nav><!–fim nav topo–> – Entre as tags <nav> e </nav> colocaremos o menu de navegação do topo da página. Ressaltando novamente que as mesmas assumem valor semântico para links de menu.

<article id=”content”>
<h3>Aqui ficará o conteúdo da página</h3>
</article><!–fim content –> – A tag <article> serve basicamente para englobar um possível artigo ou matéria da página. Seu valor semântico é bem importante e engloba a utilização nos blocos que vão alocar os artigos do site ou blog.

<aside id=”sidebar”>
<h4>Aqui ficará localizado a sidebar</h4>
</aside><!– fim aside sidebar–> – Definimos a tag <aside> como principal responsável pela criação de um sidebar do lado direito da nossa página.

<footer id=”rodape”>
<h2>Aqui ficará localizado o rodapé</h2>
</footer><!–fim rodape–> – Dentro dessas tags desenvolveremos o nosso rodapé. Fica evidente o seu valor semântico para este propósito.

</body> – Finalizamos o corpo do nosso documento.

</html> – Finalizamos o nosso documento com a tag de fechamento apropriada.

Agora salve o arquivo como: ex1.html e coloque dentro da pasta que criamos no inicio deste tutorial. O nosso próximo passo é desenvolver o CSS do nosso documento.

Criando a nossa folha de estilos

 

Para criar a folha de estilos abra um novo arquivo no seu editor de textos e copie e cole o código abaixo:

body{
 background: #eee;
}

#bannerGeral{
 width: 1200px;
 height: 130px;
 background: #069;
 margin: 0 auto;
}

#bannerGeral h1{
 text-align: center;
 padding-top: 40px;
 
}

#topo{
 background: #ccc;
 
 width: 1188px;
 margin: 0 auto;
 padding: 6px;
 text-align: center;
 margin-top: 14px;
}

#content{
 background: #ccc;
 float: left;
 height: 400px;
 margin-left: 64px;
 margin-top: 14px;
 width: 950px;
 text-align: center;
 padding: 4px;
}


#sidebar{
 background: #999;
 float: right;
 margin-right: 63px;
 height: 400px;
 margin-top: 14px;
 text-align: center;
 padding: 4px;
}

#rodape{
 background: #069;
 float: left;
 margin-left: 64px;
 margin-top: 20px;
 margin-bottom: 20px;
 text-align: center;
 width: 1200px;
}


Salve este arquivo na mesma pasta do arquivo HTML com a seguinte nomenclatura: style.css.

Entendendo o código CSS

 

Antigamente a formatação de uma página WEB era toda feita no próprio documento HTML, o que era extremamente ruim, pois o código ficava inteiramente sujo e poluído.

Com o surgimento das folhas de estilo, podemos finalmente separar a formatação da estruturação e assim manter o controle do código de uma forma mais organizada.

Dentro de um arquivo CSS temos os seletores que identificam os elementos HTML que iremos atacar para propor um estilo customizado, e temos a declaração propriamente dita, que é justamente a propriedade e o valor definido do estilo.

Veja um exemplo tirado do nosso layout:

body{
background: #eee;
}

Nesse caso específico estamos adicionando um estilo próprio ao corpo da nossa página (cor de fundo). Basicamente utilizamos o seletor: body, a declaração com a propriedade: background e o valor: #eee.

Vamos entender o restante dos códigos:

#bannerGeral{
width: 1200px;
height: 130px;
background: #069;
margin: 0 auto;
}

Nesse trecho de código atacamos o seletor #bannerGeral que constitui o identificador do elemento <header>. Colocamos uma largura de 1200px (width), altura de 130px (height), cor de fundo azul (background) e centralizamos o box com o código margin: 0 auto.

#bannerGeral h1{
text-align: center;
padding-top: 40px;

}

No trecho acima atacamos o elemento H1 que está contido dentro do nosso cabeçalho. Essa é uma característica interessante do CSS, poder atacar elementos filhos que estejam incluídos dentro de elementos pai. Nesse caso alinhamos o H1 ao centro com o text-align: center e criamos um espaçamos do topo para o centro com o comando padding-top: 40px.

#topo{
background: #ccc;
width: 1188px;
margin: 0 auto;
padding: 6px;
text-align: center;
margin-top: 14px;
}

No trecho acima atacamos o seletor #topo que constitui o identificador do elemento <nav>. Colocamos uma cor de fundo cinza com a declaração: background: #CCC, uma largura de 1188px com o width: 1188px, centralizamos o bloco com o margin: o auto, um espaçamento de 6px com o padding: 6px, alinhamos o texto ao centro com o text-align:center e determinamos uma margin do topo para baixo com o margin-top: 14px.

#content{
background: #ccc;
float: left;
height: 400px;
margin-left: 64px;
margin-top: 14px;
width: 950px;
text-align: center;
padding: 4px;
}

No trecho acima atacamos o seletor #content que constitui o identificador do elemento <article>. Colocamos novamente uma cor de fundo para o elemento com o background: #ccc, flutuamos o elemento a esquerda com o float:left, definimos uma altura de 400px com o height: 400px, definimos uma margem a esquerda com o margin-left: 64px, uma margem do topo para baixo com o margin-top: 14px, uma largura de 950px com o widht: 950px, alinhamos os textos ao centro com o text-align:center e definimos um espaçamento interno de 4px com o padding: 4px.

#sidebar{
background: #999;
float: right;
margin-right: 63px;
height: 400px;
margin-top: 14px;
text-align: center;
padding: 4px;
}

No trecho acima atacamos o seletor #sidebar que constitui o identificador do elemento <aside>. Definimos novamente uma cor de fundo, flutuamos o elemento a direita com o float: right, definimos uma margem a direita, uma altura de 400px, uma margem do topo para baixo de 14px, alinhamos o texto ao centro e um espaçamento geral de 4px.

#rodape{
background: #069;
float: left;
margin-left: 64px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
width: 1200px;
}

Por fim, atacamos o seletor #rodape que constitui o identificador do elemento <footer>. Definimos uma cor de fundo, flutuamos a esquerda, colocamos uma margem a esquerda de 64px, margem no topo de 20px, margem de baixo para cima de 20px, alinhamos o texto ao centro e colocamos uma largura total de 1200px.

Agora que você entendeu todo o escopo dos códigos HTML e das folhas de estilo, é importante você verificar a disposição do layout. Para isso basta apenas clicar no arquivo ex1.html criado no começo do artigo.

É muito importante também, você deixar logo de cara esse arquivo aberto no seu navegador e ir verificando as atualizações a cada nova modificação no código, assim, você consegue verificar se está tudo dentro dos conformes.

Assista ao vídeo abaixo e veja na prática tudo que foi falado neste artigo:

 

Conclusão

Espero que você tenha gostado deste tutorial e que o mesmo tenha servido para você entender um pouco essa questão de criação de páginas em HTML.

Como falei no inicio do artigo, estou voltando agora para o blog. Passei um tempo afastado, mas pretendo me dedicar um pouco mais a este projeto. Portanto, fica ligado que ainda vem muita coisa boa por ai.

No mais, deixo aqui um forte abraço.

Wilker Costa

1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 5,00 out of 5)
Loading...

Sobre o Autor Wilker Costa

Estudante de computação e apaixonado por empreendedorismo. Desde cedo buscando sempre inovar e trazer as melhores soluções para seus clientes. Escreve regularmente sobre marketing digital e acredita que esse é o caminho para a liberdade financeira e para a construção de uma sociedade mais empreendedora!

Siga-me::
>

Que Tal Aprender a  criar um blog igual a esse?