Pages

domingo, 13 de julho de 2014

Estrutura de um site em HTML 5


Neste artigo vamos dar umas dicas de como estruturar corpo de um site com as novas regras do HTML 5. Tem varias formas de estruturar o corpo de um site vamos ver um deles que vai ter basicamente o topo com o nome e o menu, o conteúdo da postagem com informações adjacentes ao lado que podem servir como propaganda do site ou um sistema de busca e o rodapé do site mais conhecido como mapa do site.

Primeiramente vamos devenir o html. Salve um novo arquivo index.html
<!DOCTYPE html>
<html lang="pt-Br">
        <head>
               <meta charset="UTF-8">
               <title>Estruturando o corpo de um site</title>
        </head>
        <body>
        </body>
</html>

Primeiramente vamos abrir um tag section para o corpo inteiro do site
  <section id="site">

  </section>

Depois de ter definido a estruturara básica do HTML vamos fazer o CABEÇALHO do site que vai conter o nome do site e o menu .
    <header id="cabecalho">
           <h1>Nome do site</h1>
           <nav id="menu">
                 <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Pagina1</a></li>
                       <li><a href="#">Pagina2</a></li>
                       <li><a href="#">Pagina3</a></li>
                  </ul>
          </nav>
   </header>  

Agora vamos para as informações adjacentes do site ou sistema de busca vai muito de como cada um vai estruturar sua página.
  <aside id="busca">
            <p>Informações adjacentes ao site</p>
   </aside>

Vamos definir o conteúdo da postagem que vai conter o titulo, postagem e o rodapé ser for necessário.

    <section id="conteudo">
            <header id="tituloPostagem">
                   <h3>Titulo da postagem</h3>
           </header>
           <article id="postagem">
                <p>
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora in culpa explicabo                              laborum eum quia placeat excepturi repellendus incidunt odit rem iste, voluptas porro                              nesciunt fuga delectus odio. Corporis, ipsa.
               </p>
        </article>
        <footer id="rodapePostagem">
                  <h3>Rodapé da postagem se for necessario</h3>
        </footer>
</section>  

Finalmente vamos para o RODAPÉ do site ou o mapa do site.

    <footer id="rodapeSite">
           <h1>Rodapé do site</h1>
    </footer>

Teremos que fazer também o nosso CSS para o site ter uma cara de página de verdade se não ficar assim.













Vamos definir um CSS externo do nosso HTML, vá até o topo do html e chame o css.

<head>
     <meta charset="UTF-8">
     <title>teste de formatação</title>
     <link rel="stylesheet" type="text/css" href="style.css" />
</head>

/* Código em css*/
html{ margin: 0px; padding: 0px; }

/* vamos dar uma cor de fundo para a página*/
body{
   background:#fafbff;
   text-align: center;
}
/* vamos definir a fonte e dar uma borda, largura e um sobreamento*/
#site{
       font-family: arial,Helvetica, sans-serif;
       border: 1px solid #ccc;
       width: 1000px;
       height: auto;
       margin:0 0 0 150px;
       padding: 5px;
       border-radius: 5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
      -o-border-radius:5px;
       background: #fff;
      -moz-box-shadow:0px 3px 15px 0px #CCC;
      -webkit-box-shadow:0px 0px 25px 5px #CCC;
      -o-box-shadow:0px 0px 25px 5px #CCC;
      box-shadow:0px 0px 25px 5px #CCC;
}

/*Agora vamos estruturar o cabeçalho*/

#site #cabecalho{
     border: 1px solid #ccc;
     padding: 5px;
     margin:0 0 5px 0;
     border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -o-border-radius:5px;
     background: #fafbff;
}
/* Menu do site */

#site #cabecalho #menu{
       border: 1px solid #ccc;
       text-align: left;
       border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
      -o-border-radius:5px;
       background: #fff;
}

#site #cabecalho #menu ul{
      list-style: none;
     height: 20px;  
}

#site #cabecalho #menu ul li{
float:left;
padding:5px 15px 5px 0;
}
#site #cabecalho #menu ul a{
text-decoration: none;
color: black;
}

/* As informações adjacentes ou sistemas de busca do site*/

#site #busca{
   border: 1px solid #ccc;
   width: 290px;
   float: right;
   height: auto;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -o-border-radius:5px;
   background: #fafbff;
}
/* Conteúdo da postagem */

#site #conteudo{
   border: 1px solid #ccc;
   margin: 0 0 5px 0;
   width: 690px;
   border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
   padding: 5px;
   background: #fafbff;
}
/*Rodapé ou Mapa do site*/

#site #rodapeSite{
   border: 1px solid #ccc;
   border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
   background: #fafbff;
}

E a estrutura do site deve ficar mais ou menos desse jeito aqui.



















Qualquer duvida sobre o artigo ou em algum trabalho sobre desenvolvimento de sites entre em contato pelo formulário ou pelo E-mail: marcofernando71@gmail.com.

QUALQUER DUVIDA OU TRABALHO PARA FAZER ENTRE EM CONTATO.  

0 comentários:

Postar um comentário