As bases do HTML – Estruturar um site
Autor: Palau de Roma | Publicado: 2011-07-06T16:46:00-07:00

Já reparou que os sites têm sempre a informação arrumada de modo semelhante? Neste tutorial vamos explicar a estrutura base de um site em HTML de um modo muito simples e fácil de perceber.
Neste exemplo vamos aprender como estruturar um site com um Cabeçalho, um Conteudo Principal, uma Coluna Direita e um Rodapé. Vejamos a figura, os nomes estão em inglês para que consiga identificar facilmente as zonas no código da maioria dos sites.



Nesta figura vemos coloridas algumas zonas do site, temos:

*Verde: Caixa que tem o site todo (Wrapper)
*Violeta: Caixa do Cabeçalho (Header)
*Azul: Caixa que tem o Conteúdo (Content) e a coluna da direita (Right)
*Amarelo: Caixa de Conteúdo (Content)
*Laranja: Caixa da coluna direita (Right)
*Vermelho: Caixa de Rodapé (Footer)

O código HTML é relativamente simples, para começar abra o notepad e escreva o seguinte:

1&lt;html&gt;
2
3&lt;/html&gt;

Assim estamos a avisar que vamos escrever código html dentro dessas tags (uma para abria e a outra com o / para fechar.
Depois dentro destas tags temos que dizer onde vai estar a zona do código que é para aparecer no site, é necessário escrever assim:


1&lt;html&gt;
2
3&lt;body&gt;
4
5&lt;/body&gt;
6
7&lt;/html&gt;



É dentro do body que se coloca a parte do código da estrutura do site, repare que abrimos o body com &lt;body&gt; &nbsp;e fechamos com &lt;/body&gt; .
Vamos agora parar um bocado e perceber como se diz no código que queremos colocar as caixas. Pois bem, caixas em HTML chamam-se DIV, pode abrir colocar uma caixa colocando no meio do código assim:

1&lt;div&gt;
2
3&lt;/div&gt;

O problema aqui é que a caixa só com 
é uma caixa genérica e você quer ter uma caixa com tamanho, posição, cor de fundo, entre outros.

Para isso temos que dar nomes no código às caixas, para isso utilizamos as ID e as CLASS, não se preocupe é muito simples mesmo. Pense assim as ID são caixas principais as CLASS são caixas que se repetem várias vezes, por exemplo uma coluna com vários artigos e cada artigo dentro da sua caixa. Dá-se um nome a uma caixa da seguinte forma

1&lt;div id="wrapper"&gt;2
3&lt;/div&gt;

ou

1&lt;div class="wrapper"&gt;23&lt;/div&gt;

Demos o nome Wrapper à caixa, repare que para fechar a caixa basta só colocar não é preciso dizer o nome da caixa.

Já sabemos criar caixas e dar nomes às caixas então só falta estruturar, para isso a lógica é simples, olha-se para o desenho e temos que ver as caixas que estão por baixo, essas temos que abrir primeiro. Vejamos como fica neste exemplo, e vamos utilizar só ID porque são todas caixas principais.


&lt;html&gt;

&lt;body&gt;
&nbsp;&nbsp; &nbsp;&lt;div id="wrapper"&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;div id="header"&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;

&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;div id="main"&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div id="content"&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;

&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div id="right"&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;

&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;div id="footer"&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;


Ou seja, abrimos uma que é a Wrapper, dentro dessa temos a Violeta, a Azul e a Vermelha (Header, Main, Footer). E dentro da caixa Azul temos a caixa Amarela e a Laranja (Content e Right).

Acabámos de definir a estrutura principal do site em HTML, é claro que um site é constituido por muitas e muitas caixas, mas a ideia é esta.

Dentro de cada caixa depois colocam-se por exemplo o Logotipo na Caixa Header, os artigos na Caixa Content. Na Coluna da Direita colocamos uma votação, categorias, artigos mais vistos. E no Footer podemos por o Copyright do site ou outra informação como os Contactos.

Fica a faltar explicar como se atribui características às caixas, ou seja, como dizemos que tamanhos tem cada uma, as cores do fundo, as margens entre elas, etc. Essa parte já não se chama HTML mas sim CSS.

Fazer sites pode parecer complicado e desanimador para quem começa, mas é só uma questão de perceber a base e tudo o resto será mais fácil de entender.



 Cursos 24 HorasCursos Online 

Cursos 24 Horas - Cursos Online com Certificado Entregue em Casa