10 Aulas Grátis - HTML No Blogger (Blogger Profissional)
Aula 01: Introdução ao HTML
E aí pessoal! Vamos mergulhar no universo do HTML, a linguagem essencial para criar páginas na web.
HTML significa "Linguagem de Marcação de Hipertexto" e é responsável por estruturar todo o conteúdo que vemos online.
A magia acontece através das famosas "TAGS", aquelas palavras envoltas por sinais de maior e menor (< e >).
Essas tags são como blocos de construção que definem desde títulos e parágrafos até botões e imagens.
Para começar a escrever em HTML Dentro do Blogger, precisamos de uma estrutura básica que inclui tags como `html`, `head` e `body`.
É dentro dessas tags que tudo acontece, sem essa estrutura, a página não funciona
Aqui escrevemos nosso código para criar páginas incríveis na web.
<html 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'>
<head>
<title>TÍTULO AQUI</title>
<b:skin><![CDATA[ ]]></b:skin>
</head>
<body>
<b:section class='Secao' id='Secao'/>
CONTEÚDO AQUI
</body>
</html>
Exemplos de TAGs em HTML
Vamos ver alguns exemplos de TAGs e como elas funcionam:
1. Tags com conteúdo
<p>Este é um parágrafo.</p>
<h1>Este é um título h1</h1>
<h2>Este é um título h2</h2>
<b>Este texto está em negrito.</b>
<i>Este texto está em itálico.</i>
<button>Clique aqui</button>
<div>Este é um bloco de conteúdo.</div>
2. Tag sem conteúdo
<br/> <!-- Quebra de linha -->
<hr/> <!-- Linha horizontal -->
<input placeholder='Digite algo' type='text'/> <!-- Campo de entrada de texto -->
Dentro das tags, também podemos adicionar "ATRIBUTOS", que são informações extras e modificam o comportamento ou a aparência dos elementos.
Por exemplo, na tag `<img/>` usamos o atributo `src` para especificar a fonte da imagem,
e na tag `<a/>` usamos `href` para definir o link de destino.
Prática de HTML
Agora que você já conhece um pouco da teoria e viu alguns exemplos, é hora de colocar a mão na massa!
Na parte inferior desta página, você pode experimentar e escrever seu próprio código HTML para ver os resultados imediatamente.
Não pule para próxima aula antes de praticar, até se sentir confortável com as TAGs básicas.
Conclusão
Espero que esta introdução ao HTML tenha sido útil para você começar a entender como funciona a estrutura das páginas web. Continue explorando e aprimorando suas habilidades!
Lembre-se de que a prática é essencial para aprender qualquer linguagem de programação.
Ah ... Outra coisa.
Temos uma vídeo aula para te ajudar ...
E caso precise, pode deixar sua dúvida nos comentários do vídeo.
Aula 02: Formatação de Texto em HTML
Vamos explorar uma parte fundamental do design de páginas web:
A formatação de texto usando HTML e CSS.
A maneira como apresentamos nosso conteúdo textual não apenas melhora a leitura, mas também define a estética e a usabilidade do nosso site.
Quando pensamos em HTML, geralmente nos concentramos na estrutura e nos elementos de conteúdo, como parágrafos e listas.
No entanto, o HTML também nos oferece maneiras de estilizar e formatar esse conteúdo textual usando CSS.
Desde ajustes simples como negrito e itálico até opções mais avançadas como sombras de texto e fontes personalizadas, há uma gama de possibilidades para explorar.
Exemplos de Formatação de Texto em HTML
1. Títulos (Heading Tags)
<h1>Este é um título h1</h1>
<h2>Este é um título h2</h2>
<h3>Este é um título h3</h3>
2. Negrito e Itálico
<p><b>Negrito</b> e <i>Itálico</i></p>
3. Sublinhado
<p style='text-decoration: underline;'>Texto sublinhado</p>
4. Tachado (Riscado)
<p style='text-decoration: line-through;'>Texto tachado</p>
5. Cores no Texto
<p style='color: red;'>Texto vermelho</p>
<p style='color: #00ff00;'>Texto verde</p>
6. Tamanho da Fonte
<p style='font-size: 24px;'>Texto grande</p>
<p style='font-size: 12px;'>Texto pequeno</p>
7. Alinhamento de Texto
<p style='text-align: center;'>Texto centralizado</p>
<p style='text-align: right;'>Texto alinhado à direita</p>
8. Espaçamento entre Linhas
<p style='line-height: 2;'>Texto com espaço entre linhas aumentado</p>
9. Fonte Personalizada (Google Fonts)
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'/>
<p style='font-family: 'Roboto', sans-serif;'>Texto com fonte personalizada</p>
10. Transformação de Texto (maiúsculas/minúsculas)
<p style='text-transform: uppercase;'>texto em maiúsculas</p>
<p style='text-transform: lowercase;'>TEXTO EM MINÚSCULAS</p>
11. Sombra no Texto
<p style='text-shadow: 2px 2px 5px #000;'>Texto com sombra</p>
Conclusão
Espero que esses exemplos tenham sido úteis para vocês entenderem como podemos estilizar textos usando HTML e CSS.
Essas técnicas são fundamentais para qualquer desenvolvedor web que deseje criar páginas visualmente atraentes e funcionais.
Lembrem-se de praticar esses conceitos em seus próprios projetos para aprimorar suas habilidades. Qualquer dúvida, pode assistir o vídeo explicativo, estamos aqui para ajudar.
Não avance para Próxima aula
antes de treinar esses códigos
no editor a baixo.
Aula 03: Entendendo a DIV no HTML
Na web, a DIV é tipo uma caixinha mágica que você usa pra organizar tudo no seu site.
Pense nela como um bloco que pode conter textos, imagens, botões, e o que mais você quiser colocar.
Com as DIVs, seu site fica organizado e estiloso!
A Importância do CSS para a DIV
Quando a gente adiciona CSS na jogada, a DIV se transforma de verdade.
Dá pra deixar ela com bordas arredondadas, fundos coloridos, sombras, e outros detalhes que fazem toda diferença no visual da sua página.
Exemplos Práticos com CSS:
1. Layout de Colunas:
<style>
.column {
width: 30%;
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
}
</style>
<div class="column">Coluna 1</div>
<div class="column">Coluna 2</div>
<div class="column">Coluna 3</div>
2. Card de Produto:
<style>
.product-container {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
width: 300px;
margin: 10px;
text-align: center;
}
.product-link {
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
padding: 10px 20px;
display: block;
text-align: center;
margin-top: 10px;
}
</style>
<div class="product-container">
<img alt="Produto" src="produto.jpg"/>
<h3>Nome do Produto</h3>
<p>Descrição breve do produto.</p>
<a href="#" class="product-link">Ver mais</a>
</div>
3. Menu de Navegação:
<style>
.menu-link {
color: white;
text-decoration: none;
font-weight: bold;
}
.menu-container {
background-color: #007bff;
padding: 10px;
display: flex;
justify-content: space-around;
}
</style>
<div class="menu-container">
<a href="#" class="menu-link">Início</a>
<a href="#" class="menu-link">Sobre</a>
<a href="#" class="menu-link">Serviços</a>
<a href="#" class="menu-link">Contato</a>
</div>
Dicas para Usar DIVs na Criação de Sites:
Pra deixar seu site top usando DIVs, aqui vão algumas dicas:
1. Responsividade na Medida Certa:
Use unidades como porcentagem (%) e vw/vh pra garantir que seu layout se ajuste perfeitamente em qualquer tela.
2. Organização Sem Stress:
Divida seu conteúdo em blocos usando DIVs de forma inteligente, sem complicação.
3. HTML com Estilo:
Mantenha seu código HTML organizado e semântico, pra cada DIV ter um propósito claro.
4. Personalize com Estilo:
Adicione personalidade com estilos únicos pra cada DIV, fazendo seu site se destacar.
5. Teste, Teste, Teste:
Não esqueça de Testar como suas DIVs se comportam em diferentes dispositivos.
Ajuste até tudo ficar perfeito!
Conclusão:
Assim, as DIVs são suas melhores amigas na hora de criar um site incrível.
Com um pouco de HTML e CSS, você pode transformar suas ideias em layouts que não só funcionam, mas também impressionam quem visita.
A baixo, temos um editor de códigos
para você testar tudo o que tem aprendido.
e uma vídeo-aula.
Não passe para a próxima aula antes de colocar em prática.
Aula 04: Atributos de uma TAG HTML
Atributos das tags HTML, aqueles detalhes que fazem toda a diferença na construção das nossas páginas na web.
O que são atributos?
Atributos são como instruções especiais que podemos adicionar às tags HTML para personalizar e dar mais funcionalidades aos nossos elementos. Eles ajudam a definir características e comportamentos específicos. Vamos ver alguns exemplos!
Exemplos de atributos
1. `id`:
Identifica exclusivamente um elemento na página. É muito útil para estilização com CSS ou para interações com JavaScript.
<div id='meuElemento'/>
2. `class`:
Define uma ou mais classes para um elemento, permitindo aplicação de estilos ou seleção via JavaScript.
<div class='destaque'>Texto em destaque</div>
3. `src`:
Especifica o caminho do arquivo para tags como `<img/>`, `<script/>` ou `<audio/>`, indicando de onde carregar o conteúdo.
<img alt='Descrição da imagem' src='imagem.png'/>
4. `href`:
Utilizado na tag `<a/>` para definir o destino do link.
<a href='https://www.exemplo.com'>Clique aqui</a>
5. `alt`:
Descreve o conteúdo de uma imagem para acessibilidade ou quando a imagem não pode ser exibida.
<img alt='Foto de um cachorro fofo' src='foto.jpg'/>
6. `title`:
Define um texto que aparece quando o mouse passa sobre o elemento.
<a href='#' title='Clique aqui para mais informações'>Mais</a> informações</a>321
7. `width` e `height`:
Especificam a largura e a altura de elementos como `<img/>` e `<canvas/>`.
<img alt='Imagem redimensionada' height='200' src='imagem.jpg' width='300'/>
8. `type`:
Especifica o tipo de informação de elementos como `<input/>`, `<button/>` ou `<script/>`.
<input name='nome' placeholder='Digite seu nome' type='text'/>
9. `checked`:
Utilizado em elementos como `<input type='checkbox'/>` e `<input type='radio'/>` para pré-selecionar o item.
<input checked='' type='checkbox'/>
10. `data-*`:
Permite a inclusão de atributos personalizados que podem ser acessados via JavaScript.
<div data-info='alguma informação' id='meuElemento'>Elemento com dados personalizados</div>
Explicações adicionais
Cada um desses atributos tem um papel fundamental na construção de uma página web dinâmica e acessível. Eles não só modificam a aparência dos elementos, mas também melhoram a interação do usuário e facilitam a manutenção do código. Por exemplo, o atributo `title` em links fornece informações adicionais quando o usuário passa o mouse sobre o link, enquanto `data-*` permite armazenar dados extras diretamente no elemento.
Conclusão
É isso aí, pessoal! Com esses atributos na manga, vocês têm tudo para começar a criar páginas web incríveis e cheias de personalidade. Lembrem-se de explorar e praticar bastante para dominar essas ferramentas poderosas do HTML. A web está esperando por vocês para brilhar!
Aula 05: Tags Nativas do Blogger
Se você já explorou os bastidores do Blogger, deve ter se deparado com algumas tags que começam com “<b:” ou “<data:”.
Essas são as “TAGS NATIVAS DO BLOGGER”.
Mas o que elas realmente fazem?
Vamos mergulhar nesse universo e entender como elas funcionam.
Imagine que você está construindo uma casa. As tags nativas são como blocos que só se encaixam na SUA casa (ou seja, no Blogger).
Elas não seguem as regras normais do HTML.
Quando você as insere no código, na hora da publicação, elas se transformam em conteúdo real.
Aqui estão alguns exemplos das TAGS NATIVAS:
<b:skin>: Isso é o estilo CSS do seu tema.
<b:section id='Secao'>: Imagine isso como uma sala vazia onde você pode colocar seus gadgets.
<b:widget>: Esses são os gadgets padrões do Blogger. São como os componentes essenciais da sua página.
<data:title/>: O título de um gadget.
<data:blog.title/>: O título do seu blog.
<data:blog.homepageUrl/>: A URL da página inicial. É o endereço do seu site.
<data:blog.url/>: A URL da página atual.
<data:blog.pageTitle/>: O título da página atual. É como o nome da página onde você está.
<data:blog.pageType/>: O tipo de página que você está visitando.
<data:blog.mobileClass/>: Mostra se você está em um dispositivo móvel.
E tem mais! Cada Gadget padrão do Blogger, tem suas Tags exclusivas que fazer eles funcionarem.
São 25 Gadgets Padrões que você pode adicionar e editar da forma como quiser:
Um dos exemplos mais importantes que você precisa saber é como editar o Gadget de POSTAGENS.
Dentro dele você pode conseguir várias informações de acordo com o link que vc assessar.
Exemplo:
Mostra a Foto Principal do Post = <img expr:src='data:post.thumbnailUrl resizeImage 350'/>
Mostra um resumo do Post = <b:eval expr='data:post.snippet snippet { length: 50 }'/>
Mostra o Título do Post = <data:post.title/>
Mostra o Conteúdo do Post = <data:post.body/>
Mostra os Comentários do Post = <b:include data='post' name='comments'/>
Agora que você conhece as Tags Nativas do Blogger, está pronto para explorar com mais profundidade esse universo de possibilidades.
Não se esqueça: nas próximas aulas, vamos mergulhar ainda mais fundo nesse mundo,
misturando HTML e CSS com essas tags. Fique ligado! 🚀
Aula 06: Variáveis (SKIN)
Na aula anterior, falamos sobre as Tags Nativas do Blogger e mencionamos a "<b:skin>".
Agora, vamos nos aprofundar e explorar uma funcionalidade poderosa:
as Variáveis SKIN.
Nesta aula eu quero aprofundar um pouco mais, quero te mostrar uma das possibilidades.
Imagine que você criou um tema com a cor vermelho, e quando chegou a BlackFriday decidiu mudar a cor para preto…
Em um código HTML normal, você precisaria editar o código e substituir as cores manualmente.
Mas dentro do Blogger, podemos criar variáveis e editar as cores, sem precisar editar nenhuma linha do código, facilmente com apenas alguns cliques. Parece bom, certo?
As Variáveis SKIN são como atalhos para personalizar seu tema no Blogger.
Elas permitem que você defina valores universais que podem ser usados em todo o seu código CSS.
Imagine substituir a cor de fundo, Imagem de Fundo, Posição de Algo na Tela, a Largura de uma imagem, Fonte e tamanho de texto, detalhes do design que tomariam muito tempo, em apenas alguns cliques.
Veja um exemplo a baixo:
/*
<variable name="keycolor" description="Main color" type="color" default="#000000" value="#000000"/>
<variable name="body.background" description="Imagem de Fundo" type="background" color="#000000" default="#000000 url() repeat fixed top left" value="#000000 url() repeat fixed top left"/>
<group description="Cores aqui" selector=".cor">
<variable name="cor1" description="Cor 01" type="color" default="#000000" value="#000000"/>
<variable name="font1" description="Fonte da Letra" type="font" default="normal normal 1rem 'Poppins', sans-serif" value="normal normal 1rem 'Poppins', sans-serif"/>
</group>
*/
Nesse Código definimos 4 Variáveis, que podem ser acessadas a partir do CSS:
:root{
--keycolor: $(keycolor);
--background: $(body.background);
--cor1: $(cor1);
--fonte1: $(font1);
}
Agora, quando quiser mudar a cor principal para preto, basta alterar o valor da variável no Painel do Blogger "PERSONALIZAR" e tudo se ajustará automaticamente!
Pode até parecer complicado no começo, mas dominar as "Variáveis SKIN", vai te ajudar a criar temas muito mais bonitos, funcionais e fáceis de serem editados.
Ao criar um tema dentro do Blogger, você não vai precisar ficar editando o código toda vez que precisar mudar um detalhe, caso queira vender o tema para outra pessoa, ela só vai precisar do básico para personalizar.
Veja … Em poucas aulas, você adquiriu conhecimentos essenciais para criar seu próprio tema Blogger e tem muito mais conteúdos nas próximas aulas que vão te deixar surpreso.
Caso tenha alguma dúvida, pode assistir a vídeo aula explicativa e interagir nos comentários.
Aula 07: Tags Condicionais
Você já deve ter percebido como é fácil publicar um código HTML no Blogger e exibir conteúdo na tela.
Mas e se você quiser adicionar outras páginas ao seu tema?
Não se preocupe! Vou te ensinar hoje sobre as TAGS CONDICIONAIS.
Mantenha a Estrutura, Mude o Conteúdo
Em um tema do Blogger, geralmente mantemos a estrutura da página e alteramos apenas o conteúdo.
Imagine que você tem um blog com diferentes tipos de postagens:
Artigos, Receitas, Dicas de Viagem etc.
Todas essas páginas têm o mesmo menu de navegação e a barra lateral, mas o que muda é o título e o conteúdo de cada postagem.
Tirei um print do nosso Blog para te mostrar esse exemplo de duas páginas de posts diferentes.
Em ambas mantemos o Menu de navegação na parte de cima e a barra lateral.
O que altera é o título e o conteúdo escrito de cada postagem.
Já neste outro exemplo tirei um print da nossa Loja Mínima (Feita no Blogger).
Em ambas temos o logo da loja e o Slide de Imagens.
Na página inicial temos um loop de postagens (Produtos).
E na página de posts, mostra apenas o produto escolhido.
Enfim, essas TAGS servem para definir qual tipo de conteúdo vai aparecer em cada página.
Com as Tags Condicionais, isso fica simples!
Exemplo de Tags Condicionais:
<b:if cond='data:blog.pageType == "index"'>Página Inicial</b:if>
<b:if cond='data:blog.pageType == "item"'>Página de Posts</b:if>
<b:if cond='data:blog.pageType == "static_page"'>Página Estática</b:if>
<b:if cond='data:blog.pageType == "error_page"'>Página de Erro</b:if>
<b:if cond='data:blog.searchQuery'>Página de Pesquisa</b:if>
<b:if cond='data:blog.searchLabel'>Página de Marcador</b:if>
<b:if cond='data:blog.mobileClass'>Dispositívos Mobile (Celular)</b:if>
<b:if cond='data:blog.url == "https://seublog.blogspot.com/p/sua-pagina.html"'>URL Específico</b:if>
Em apenas algumas linhas de código, você pode personalizar o conteúdo de acordo com a página que está sendo acessada.
Essa aula foi curta, mas esses conhecimentos serão valiosos quando você colocar tudo em prática.
Não deixe de assistir o vídeo explicativo, interagir e deixar suas dúvidas nos comentários.
Nos vemos na próxima aula.🚀
Aula 08: Gadget de Postagens
Nesta Aula, iremos explorar e aprofundar um pouco mais os conhecimentos na criação de temas HTML dentro do Blogger.
Iremos aprender na prática como criar e editar um Gadget de Postagens. Bora?
Antes de começar vou precisar que você crie um blog de teste e adicione algumas postagens de teste, para podermos praticar.
1) Abra o site oficial do Blogger, clique em criar e escolha um NOME ALEATÓRIO.
2) Baixe o Arquivo de Postagens de Teste (Postagens de Teste (Blogger Profissional).xml)
3) Clicar em CONFIGURAÇÕES, Depois em IMPORTAR CONTEÚDO e escolha o ARQUIVO que vou disponibilizar com postagens de Teste.
Agora você está pronto para começar os testes.
Instale o Template Zerado que vimos na AULA 01, adicione um Gadget de Postagens e Vamos utilizar os dados que aprendemos na AULA 05.
Agora, dê um Play no Vídeo explicativo.
Vamos criar 4 modelos de Postagens do Zero:
1) Blog com Snippet de Artigos
2) Cards de Artigos
3) Artigos com Foto de Fundo
4) Produto de Loja
Acesse nosso Site de exemplo para ver como ficou o Resultado das nossas Criações:
https://widget-post.blogspot.com/
A cada aula o conteúdo de Criação de Templates HTML dentro do Blogger está ficando mais interessante.
Se você está gostando, acesse a nossa vídeo aula e interaja conosco através dos comentários.
As próximas aulas iremos te surpreender ainda mais.
Estou preparando muitas surpresas para vocês.
Nos vemos na próxima aula.🚀
Aula 09: Criando um Template de Artigos do Zero
Não tenho como escrever esta aula, então assista o vídeo e veja como criamos esse Template de artigos dentro do Blogger com HTML, Linha por linha:
Aula 10: Criando um Template de Loja do Zero
Não tenho como escrever esta aula, então assista o vídeo e veja como criamos esse Template de Loja Virtual dentro do Blogger com HTML, Linha por linha:
