Capas ou divs
Estruturar ou Ordenar
O dar forma a um site não nada mais que estruturá-lo ou ordená-lo. Estruturar concretamente servirá para colocar o menu em tal lugar, o conteúdo em outro, etc... Para estruturar um site podemos usar simples saltos de linha ou avançar um pouco mais e fazer através de tabelas, que dividem o espaço em células, com as quais podemos colocar mais comodamente os elementos que queremos. Também podemos estruturar um site dividindo-o em frames ou marcos.
O método mais profissional, limpo e cômodo é sem dúvida o uso de capas ou divs. (capa é a palavra em português e div à inglesa)
O que é uma capa ou div?
Uma capa ou div é um elemento retangular dentro do qual podemos incluir o que quisermos: palavras, parágrafos, vínculos, tabelas, imagens ou várias dessas coisas juntas, inclusive outras capas. É um simples espaço e desde a Folha de Estilos podemos proporcionar a todo o conteúdo as propriedades que quisermos, como por exemplo: posições, cor do fundo, tamanho da letra, margens, contornos, etc...
<div>Bem-vindos ao meu Site</div>
A quê; não doeu? rsrsrs... Como você pode ver, igual que ocorre com os elementos que já vimos antes, inicia com uma etiqueta <div> e termina com outra de fechamento </div> e entre ambas põe-se o conteúdo.
Escrever a linha de código no arquivo planilha.html, como você já sabe por tratar de algo que deve ser visto a colocamos entre <body> e </body>.
Agora clicar em vista prévia “Preview” e veja o que aparece..o que? o que? o que? Nada assombroso... já sei... agora vamos dar estilo a esta capa.
Proporcionando estilos a uma capa ou div
Este div não tem nenhum atrativo, para adorná-lo é necessário definir um tipo de estilo na Folha de Estilos e aplicar a ele. Para começar a brincar, abrir o arquivo estilo-geral.css, abrirá vazio, escrever a linha que aparece abaixo e salvar:
#cabeceira {background-color: pink }
Nota:
Cada vez que fazer uma mudança na Folha de Estilos, terá que salvar para poder ver seus efeitos na vista prévia ou “Preview” do Html-kit.
Classes de Estilo e Estilos Únicos
Existem duas formas de definir estilos. Uma é criar uma classe de estilo, que é um tipo de estilo que pode ser dado a um ou vários elementos, e por outro lado, estão os estilos únicos que somente deve aplicar-se a um elemento por página web.
As classes de estilo que são as usadas sobre vários elementos (vários parágrafos, várias células, vínculos, etc...) definem-se na Folha de Estilos, um exemplo disso, vimos antes na Introdução, justo no tema Centralizar parágrafos (existem dois subitens: Criar um estilo: centralizado e Criar uma classe de Estilo, se não lembra clica no vínculo acima e dê uma olhadinha). Ao criar a classe de estilo ".centralizado", é dizer, com um ponto na frente do nome e logo colocando as propriedades entre chaves. No código Html asigna-se essa classe de estilo a um elemento, colocando dentro da sua etiqueta de início, ficando assim: class="nomedaclassedeestilo".
Em contra partida os estilos únicos definem-se na Folha de Estilos com o jogo da velha: "# " (escreve-se apertando ao mesmo tempo a tecla Alt Gr, que está situada a direita da de espaço e a tecla número 3, no teclado universal) em lugar do ponto no código Html coloca-se este tipo de estilo único escrevendo dentro da etiqueta do elemento: id="nomedoestilounico" em lugar de class, que como seu próprio nome diz, significa classes(ou melhor estilos que podem ser asignados a vários elementos, grave isto).
Espero que não esteja confuso com tantos conceitos mas se ficou, vá com calma...se precisar leia de novo devagar, é importante que você entenda e consiga diferenciar os estilos.
Como você pode comprovar o estilo de antes #cabeceira {background-color: pink } é um estilo único e por tanto asigna-se a um único elemento somente dentro da página. Escrever no Html assim:
<div id="cabeceira"> Bem-vindos ao meu Site </div>
Abrir agora o arquivo planilha.html e escrever a linha de código acima, ele ficará assim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-geral.css" type="text/css" media="all">
</head>
<body>
<div id=”cabeceira”>Bem-vindos ao meu site</div>
</body>
</html>
Salvar, dar uma vista prévia na planilha.html e reparará como agora a frase: “Bem-vindos ao meu site” aparece diferente com um fundo rosado (pink). É a magia do css aplicado nas Capas (ou divs) porém não acredite que fica só nisso!!! Verá o assombroso que é tudo isso mais à frente.
Relax
Ganhador da Copa do Mundo de 1934 (Itália)
Menu
