Entenda como funciona o HTML de um blog (básico)

O blog é formado por páginas. Estando a opção ativada (que é padrão) no Blogger, sempre que criamos uma postagem o blog cria uma página para este blog, ou seja, ele não adiciona uma postagem em baixo da outra, como um documento no Word, somente quando estamos visualizando várias postagens na mesma janela.

Sempre que desejamos inserir um conteúdo externo através de uma linguagem de programação no blog (Javascript, CSS, HTML, PHP, etc...), precisamos saber onde colocar. Devido a isso, venho orientá-los aos locais corretos onde podemos ou não colar algo....

> A divisão do blog

O blog é dividido em quatro principais partes, conforme a imagem ao lado:

CABEÇALHO - É onde fica o título e a descrição do blog. Identificação: "header".

COLUNA - Alguns blogs possuem mais de uma coluna e elas podem variar da direita para a esquerda e vice-versa. Na coluna podemos adicionar Gadgets (ferramentas).
Identificação: "sidebar", "side-bar".

CONTEÚDO - No conteúdo está a postagem, os comentários, data, hora, etc.
Identificação: "main".

RODAPÉ - Bom, o rodapé também é um espaço onde também podemos adicionar Gadgets (ferramentas).
Identificação: "footer".

>> A divisão dos códigos dentro do HTML do blog

Agora que sabemos como um blog é dividido, restanos saber como identificar estas partes dentro dos códigos que compõe HTML.

HEAD (cabeça)

A - Esta parte é uma "declaração doctype", que "diz" ao navegador que tipo de programação está sendo usada na página. Qualquer página que esteja na internet, deve começar com essa declaração para que funcione perfeitamente.

B - Aqui começamos o , ou a "cabeça" do HTML. Dentro desta tag ( ... ) iremos dizer como todo o HTML do blog irá se comportar. O HTML do blog está dentro da tag que quer dizer "corpo". Esta tag inicia assim que acaba o .

Resumindo: A cabeça do HTML diz ao corpo o que fazer com o que está dentro dele, ou seja, o HTML. Certo?

É dentro desta tag que vamos colocar todo o código CSS que existe no blog. Então agora sabemos que só podemos incluir o CSS no blog dentro da cabeça do html, ou seja, depois de .

C - Aqui temos simplesmente os dados do autor, criador do template usado em seu blog.

VARIÁVEIS
Agora uma parte muito importante e muito últil também que existe dentro do Blogger. São as variáveis.

As variáveis são formas muito úteis de personalizar as cores de qualquer elemento que exista no seu blog através da paleta de cores que o Blogger possui. Como? É muito simples. Veja o exemplo ao lado. A variável que faz aparecer a opção "Page Background Color" na paleta de cores do Blogger e permite alterar a cor de fundo de toda a página sem necessitar saber o código da cor. Uma mão na roda!

Na próxima postagem irei ensinar a criar uma nova variável e automatizar toda a estilização do seu blog através da ferramenta Paleta de Cores oferecida pelo Blogger, sem contar que é possível alterar o tamanho, o tipo e estilo da fonte também!

CSS
Chegamos ao CSS. Na verdade as variáveis também são parte do CSS, mas deixa isso pra outro tutorial...

99% dos blogs possui semelhanças em seus templates (Blogger) através da identificação e ordem das classes.

Conforme a imagem ao lado, o nosso CSS começa a estilizar primeiro o corpo da página (não confunda com o corpo do HTML... vamos chegar lá!)

Este body, é o corpo da página que agrega todas aquelas partes que vimos na imagem no início do tutorial (cabeçalho, coluna, conteúdo e rodapé). Digamos que o body da página oculpa todo o espaço da janela do seu navegador e dentro dele está o blog..

HTML
Agora chegamos ao HTML da página.

Dentro do HTML da página está todo o conteúdo que existe no blog. São praticamente os "ossos" que fazem com que uma página exista, porém, um depende do outro (CSS + HTML = PÁGINA).

O HTML começa depois de . A partir daí, temos os elementos que compõe o corpo, que são as DIVs, Tabelas, SPANs, Títulos, etc...

Entendendo a lógica CSS e HTML
A lógica do casamento destas duas liguagens de programação (além de fazerem um par perfeito), é simples e descomplicada. A título de exemplo eu vou simular uma página e explicar ao lado...

	Dizemos que é uma página HTML
	Iniciamos a “cabeça” da página
	Finalizamos os estilos com CSS
	Acabamos a “cabeça”
	Começamos o “corpo”
sample">	Criamos um element com o nome “sample”
CONTEÚDO	Conteúdo do elemento
	Fechamos o elemento
	Fechamos o corpo
	Fechamos a página em HTML.

Copie o código (somente o código) acima dentro de um bloco de notas e salve com o nome: "pagina.html". Depois abra com dois cliques..... irá aparecer uma caixa preta escrita "CONTEÚDO" em branco. Essa é a sua página...o seu blog!!
Espero que isso ajude na compreensão! Boa sorte!

Artigo retirado so blog do Palito