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<html>
2
3</html>
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<html>
2
3<body>
4
5</body>
6
7</html>
É dentro do body que se coloca a parte do código da estrutura do site, repare que abrimos o body com <body> e fechamos com </body> .
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<div>
2
3</div>
é 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
3</div>
ou
Demos o nome Wrapper à caixa, repare que para fechar a caixa basta só colocar
não é preciso dizer o nome da caixa.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<div id="wrapper">
23</div>
1<div class="wrapper">
2
3</div>
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.
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div id="content">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
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.
0 comentários:
Postar um comentário