Vou ser direta, sem muitas delongas. Meu objetivo é ser breve simples de entender. Talvez não seja muito necessário saber a história do HTML, quem colonizou as terras dos códigos, quem foi que criou a fanfic dele ou algo do tipo, mas ainda sim pode ser bem mais fácil você entendê-lo desta forma do que apenas começar a digitá-lo.
O que é HTML?
Imagine que seu blog é uma casa. O HTML (HyperText Markup Language) é como se fosse a estrutura dessa casa, as paredes e o telhado que mantêm tudo em pé. Ele organiza tudo o que você vê no seu blog: textos, imagens, links, e muito mais.
Por exemplo, quando você vê um título, um parágrafo ou uma imagem em um post, tudo isso está sendo "construído" com HTML. Então, mesmo que você nunca tenha mexido diretamente com código, ele está lá, nos bastidores, fazendo seu blog funcionar.
As Tags
< > e termina com a mesma palavra dentro de </ >.- <h1> é uma tag que diz ao navegador: "Este texto é um título importante".
- <p> é uma tag que diz: "Este texto é um parágrafo".
- <img> é uma tag especial que diz: "Aqui vai uma imagem".
Por Que Algumas Tags Precisam Ser Fechadas?
Imagine que você está escrevendo uma história. Para começar um parágrafo, você coloca uma linha em branco antes de começar a escrever. Quando termina, pula outra linha para mostrar que o parágrafo acabou. As tags HTML funcionam de maneira semelhante.
<p>, precisa dizer ao navegador onde esse parágrafo termina. Para fazer isso, você fecha a tag colocando uma barra / antes da palavra, assim: </p>. Isso indica ao navegador que ele deve parar de tratar o conteúdo como parte daquele parágrafo.
Nem toda Tag Precisa de Fechamento
Agora, você pode estar se perguntando: "E aquelas tags como <img>, que não têm fechamento?" Algumas tags, como <img>, são chamadas de tags auto-fechadas. Isso porque elas não precisam de um fechamento separado. Em vez disso, o navegador já entende que tudo o que precisa saber está naquela única tag.
Aqui está um exemplo com uma imagem:
<img src="imagem.jpg" alt="Descrição da imagem">
<img> é a tag que diz ao navegador para exibir uma imagem. Como não há nada "dentro" da tag, não precisamos fechá-la com </img>.
Estrutura Comum do HTML em Sites
- <!DOCTYPE html>: Essa declaração informa ao navegador que o documento é um arquivo HTML5.
- <html></html>: É a tag raiz que envolve todo o conteúdo do documento HTML.
- <head></head>: Contém informações sobre o documento, como o título, metadados (palavras-chave, descrição) e links para arquivos CSS.
- <body></body>: Contém o conteúdo visível da página, como texto, imagens, vídeos, etc.
Como o HTML Funciona no Blogger?
O Blogger, assim como outras plataformas de blogs, utiliza uma estrutura de código padrão por alguns motivos muito práticos: ele é projetado para ser acessível, mesmo para quem não tem muito conhecimento em programação. Por isso, ele oferece uma estrutura de código pronta, que já vem organizada de uma maneira que funciona bem para a maioria dos usuários. Isso facilita para quem quer criar um blog rapidamente, sem se preocupar em montar toda a estrutura do zero.
Ele não foi projetado para permitir mudanças radicais na estrutura de código. Por isso, algumas partes do código são "bloqueadas" ou difíceis de modificar. Isso, por outro lado, confunde e atrapalha quem está tentando construir seu site usando sua própria estrutura, mas não impossível.
Ou seja: Você não pode simplesmente apagar uma tag no código por querer. Algumas dá para apagar permanentemente, outras o sistema não deixa (você apaga, salva, mas quando recarrega, lá está o cidadão novamente).
Um código HTML não foi feito para ser inacessível ou indestrutível, então sempre podemos usar outras linguagens para remover ou adicionar funções que por padrão o blogspot não deixa, ou apenas usar o próprio HTML para ocultar suas tags.
Estrutura básica do BLOGGER
No Blogger, o HTML organiza seu conteúdo em diferentes partes, como o cabeçalho (aquela parte de cima do blog com o título), a área onde aparecem as postagens, a barra lateral com seus widgets e o rodapé, que fica no final da página. Isso pode depender muito do tema padrão que você for escolher.
- Cabeçalho: Onde fica o título do seu blog e, às vezes, o menu de navegação.
- Área de Postagens: O lugar onde suas postagens aparecem.
- Barra Lateral: Aquela coluna na lateral com widgets, links, etc.
- Rodapé: A parte de baixo da página com informações adicionais ou créditos.
Cada uma dessas áreas é como um “bloco” na sua casa, e o HTML é o que diz ao Blogger como montar esses blocos.
EXTRA
Minha jornada no Blogspot é muito interessante. Quando descobri a plataforma, tudo era mato, mas nem tanto. Tenho amigos de longa data que blogam desde 2004 (nessa época eu ainda comia terra). De uns tempos para cá, a plataforma evoluiu e mudou muito, incluindo os templates e a edição do HTML.
Em Tema, você pode ver lá embaixo os primeiros layouts da nova geração. Sim! Existe uma antiga geração.
Modelos Clássicos (ou "Clássico Blogger") foram os modelos originais do Blogger, utilizados antes da grande atualização da plataforma em 2010. Eles são simples e bastante básicos, refletindo as limitações tecnológicas e de design da época. Você pode retornar a eles clicando na setinha ao lado de Personalizar e depois em Mudar para o tema clássico da primeira geração. Eles usam HTML puro com pouquíssimas opções de personalização embutidas. Qualquer alteração visual exigia edição direta do código HTML e CSS. Porém, não são responsivos a não ser que você os crie assim, e a opção de páginas não funciona.
Você pode usá-los como estudo se realmente quiser criar um layout do zero, pois ele te dá total liberdade para isso.