Seguindo com nossa série Aprendendo HTML e CSS na Prática, hoje criaremos os blocos que farão parte do nosso site: Wrap (bloco que compreenderá todo o site), Cabeçalho (header-container), Slider, Conteudo (conteudo-container) e Rodapé (footer-container).
No cabeçalho teremos uma logo e um menu horizontal, estilo este do blog, porém sem o DropDown, que aprenderemos a fazer em um tutorial específico. Teremos um Slider feito com JQuery que não fará parte de nenhum dos blocos citados. No conteudo teremos uma sidebar e posts. No rodapé colocaremos apenas o "copyright". Mas quando chegarmos neste post, você já estará apto a colocar quaisquer coisas que queira.
Antes gostaria de salientar que o objetivo deste tutorial não é criar um "blog" e sim um "site". E te dar uma base para partir para outras linguagens voltadas para web como PHP, por exemplo.Abra seu arquivo index.html, que criamos no último post desta série, com seus editor HTML preferido e mãos à obra.
Mas antes de escrevermos o código, como disse na
Parte 0.1, é de suma importância que planejemos o layout antes de escrever o código, portanto eu desenhei o layout abaixo que servirá como base para escrevermos nosso código:
Não é o melhor layout do mundo, mas é o que faremos por ser muito simples de desenvolver. Obviamente se você quiser poderá desenhar o próprio layout e desenvolver o código adaptando o que fizermos aqui.
Outra coisa muito importante que foi dita na
Parte 1, foi você escolher a forma como iria escrever o CSS, optando por uma das 3 maneiras de fazê-lo. Neste tutorial utilizaremos a "Primeira Maneira", que é criando um arquivo
*.css separado e escrevendo todo o código CSS nele. Hoje ainda não trabalharemos com o CSS, então na próxima parte da série criaremos este arquivo.
Como disse no início do post, criaremos apenas os blocos que abrigarão todo este conteúdo. A tag HTML que utilizaremos para criar estes blocos é a <div>. Dentro das tags
<body> </body> copie ou escreva o seguinte
<div class="wrap">
<div class="header-container">
</div><!-- .header-container -->
<div class="slider">
</div><!-- .slider -->
<div class="conteudo-container">
</div><!-- .conteudo-container -->
<div class="footer-container">
</div><!-- .footer-container -->
</div><!-- .wrap -->
Explicando o código:
<div> : Tag HTML que delimita um bloco;
class="wrap" : identificação, "nome" da div, que no caso é wrap;
<!-- --> : tag HTML para comentários no código, o que estiver dentro dessas tags não será interpretado.
Para terminar este tutorial, gostaria de falar sobre as "identificações" do seletores HTML. Não é nada dificil de se entender.
Para identificar cada seletor, poderemos atribui-los IDs ou CLASSes. ID e CLASS servem para a mesma coisa, o que diferencia um do outro é que IDs
não pode ser repetidos enquanto CLASS
pode. As
<div> obrigatoriamente tem que ter um atributo ou outro, ficando a seu critério. EU, quando vou escrever códigos sempre utilizo
class, mas isso é pessoal e eu nem tenho uma razão para explicar, é apenas gosto.
Quando disse que IDs não podem se repetir, quis dizer o seguinte:
<div id="exemplo"> </div>
<div id="exemplo1"> </div> <!-- esse ID é diferente do primeiro -->
No primeiro modelo, a div "chama-se" exemplo, enquanto no segundo "chama-se" exemplo1, ou seja, são IDs
diferentes.
Em relação às
class, todas as
<div>, por exemplo, que tiverem o atributo
class serão formatadas da mesma maneira com CSS. Ou seja, quando eu tiver várias
<div class="exemplo">, quando eu fizer isso no CSS:
div.exemplo{
width: 100px; /* largura da div */
height: 100px; /* altura da div */
background: #f90; /* plano de fundo */
}
Todas as
<div class="exemplo"> terão 100px de largura/altura e o plano de fundo #f90 (laranja).
Só para recapitular, nosso código ficou assim já com o link para o arquivo css que ainda vamos criar:
<html>
<head>
<title>Titulo do seu site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="header-container">
</div><!-- .header-container -->
<div class="slider">
</div><!-- .slider -->
<div class="conteudo-container">
</div><!-- .conteudo-container -->
<div class="footer-container">
</div><!-- .footer-container -->
</div><!-- .wrap -->
</body>
</html>
Bom gente, por hoje é isso, espero que tenham entendido e qualquer dúvida comentem abaixo. Continuem acompanhando o prosseguimento desta série.
Cássio Fabre
