30 abril 2020

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á.




Estrutura do Template do Blogger

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 templates 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 (estilo), cor, fonte entre outros.

Diferença entre XML e HTML:

O 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 de curtir, compartilhem, espalhem por aí.

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




Depositphotos [CPS] WW

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, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram