O Template Estrutura do Template Blogger

|| ||
Bom dia , amigos leitores.
Hoje vamos falar sobre o que é um  template , conceito de web template, template HTML com CSS , diferença entre HTML e XML  e estrutura básica do template do blogger.
Ai você deve estar pensando nossa assunto chato né ! Mas se você gosta de personalizar seu layout ( template do blogger ) vai entender um pouco mais sobre como tudo funciona e também acaba sendo uma boa introdução para que deseja fazer um layout .
Prometo não deixar sua leitura massante e nem muito extensa.
Bora lá.




Primeiro vamos entender o que é um template , se você procurar na internet o que é um template de  site ou um template web encontrará a seguinte resposta :


Modelo de documento de conteúdo , com apresentação visual e instruções de qual tipo de conteúdo entram a cada parte de apresentação , começo e final. 


Conceito de web template : 


Ambiente de desenvolvimento de conteúdo web , estabelecido como modelo que permite criar um código de programação de forma rápida com execução em tempo real 'online' .

Web template ( modelos de página ) , instrumentos utilizados para separar a apresentação do conteúdo em web design e para produção massiva de documentos web .

Os template são interpretados por um "Sistema de Templates".

Um template HTML com CSS :

A estrutura de um template HTML (Hyper Text Markuo Language), existe para que o navegador consiga entender aquele documento corretamente . O CSS ( folha de estilo em cascata) , é que da o estilo , cor , fonte entre outros .

Diferença entre XML e HTML :

A XML ( extensible markup language ) , é uma linguagem de marcadores como HTML ela descreve dados enquanto o HTML exibe , a XML não é uma linguagem substituta do HTML , pois sua criação tem objetivos diferentes sua grande vantagem é poder criar suas próprias tags .


Como existem tipos diferentes de HTML , a declaração correta é extremamente importante, isso economiza tempo dos navegadores em tentar descobrir o tipo de  código utilizado na sua página.

Agora vamos aquele que nos interessa o template , Estrutura do Template do blogger



 
Para entender melhor abra seu blog de teste se você ainda não criou um  aproveite e faça agora , primeiro que é a melhor maneira de testar códigos sem comprometer o blog oficial e é bom para aprender , vá lendo a postagem e observando as tags e seu conteúdo no blog de teste , ajuda bastante a entender melhor.


O código fonte do blogger começa com essa linha:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html> ( declaração do tipo de documento da sua página )

Essas duas primeiras linhas indicam ao navegador como ele deve ler o código.

Após essa declaração , começa o documento Html , da seguinte forma na maior parte dos templates do blogger .

<HTML>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  

Mesmo que mude um ou outro detalhe sempre começa com <HTML .

A estrutura básica será :


  1. <html>   dentro da tag de abertura e fechamento está tudo que compõe o blog
  2. <head>   é a tag de cabeçalho dentro dela está inserida informações que o navegador vai ler , como títulos , descrições , palavras-chave , folha de estilo css e outros.
  3. <title>Titulo </title>
  4.  </head>
  5. <body> corpo da página responsável  por expor o conteúdo para o usuário final,postagens e elementos de página.
  6. <h1>heading tag</h1> a mais importante em matéria de SEO
  7. </body></html>

Ainda no início do código dentro da tag <head> , ( cabeça/cabeçalho) , encontramos a tag <meta> ou metatags que são extremamente importantes poie elas fornecem dados aos navegadores e aos motores de busca sobre o documento HTML em que estão inseridas.
Veremos sobre elas em uma postagem mais adiante.

Os rótulos html são conhecidos como tags , iniciando com o sinal < menor e fechando > maior , se diferenciando apenas pela / barra que indica o fechamento da tag.

<abertura> </fechamento>

Cada tag possui uma abertura e um fechamento , caso você esqueça de fechar logo aparecerá uma rejeição ao código inserido .

Existem também tags nulas mas veremos isso mais tarde.


CSS - Folha de Estilo é uma linguagem própria e que define como será aplicado o estilo aos elementos HTML.

Essa folha de estilo começa dentro da tag <head> com a marcação : <b:skin><![CDATA[/*

e termina com ]]></b:skin>  dentro dessas linhas está toda aparência do blog.

Após o fechamento da tag </head> você verá a abertura da tag <body> que nos templates do blogger são :

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Complemento para visualização em celular .

Por hoje é isso espero que gostem e que as explicações ajudem e que tenham sido claras , não esqueçam curtam , compartilhem , espalhem por ai .

No próximo tutorial vou explicar sobre os elementos básicos do blogger , aguardem.




Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri . Gostou?! Deixe seu comentário , criticas e sugestões , ela são muito importantes para fazer o blog cada vez melhor . Curta , compartilhe ,ajude o blog a crescer .
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Confira também outras postagens aqui do Baú da Dri