Aula 03: A Mágica do HTML Puro (A Ficha Vira Web)

1. A Grande Virada: Do .txt ao .html

Na Aula 01, criamos a nossa ficha pessoal em um arquivo de texto simples (minha_ficha.txt). Mas no arquivo .txt, o computador enxerga apenas letras soltas. Ele não sabe o que é título, o que é parágrafo nem o que deve ser destacado.

Para fazer o texto virar um site de verdade, nós usamos a linguagem HTML (HyperText Markup Language). O HTML usa etiquetas especiais (chamadas de tags) para dar instruções ao navegador, dizendo: "Ei, navegador! Isto aqui é um TÍTULO GRANDE! Isto aqui é um PARÁGRAFO! E esta palavra aqui deve ficar em NEGRITO!".

2. Comparativo Visual: O Texto vs. A Página Web

Veja com seus próprios olhos a diferença entre o que você digita no Bloco de Notas e a mágica visual que acontece quando você abre o mesmo arquivo no navegador:

Ola, eu sou o Enzo! Tenho 12 anos e sou aluno do Projeto LiraCode. Estou aprendendo como os computadores realmente funcionam por baixo do capo! Meus Interesses Tecnologicos: - Jogos e Programacao - Ciberseguranca e Protecao de Dados - Criar meus proprios sites e projetos Pagina criada no Bloco de Notas!

https://aula.liracode.com.br/minha_ficha.html

Olá, eu sou o Enzo! 🌟

Tenho 12 anos e sou aluno do Projeto LiraCode.

Estou aprendendo como os computadores realmente funcionam por baixo do capô!

Meus Interesses Tecnológicos:

Jogos e Programação
Cibersegurança e Proteção de Dados
Criar meus próprios sites e projetos

🚀 Página criada no Bloco de Notas e publicada na Hostinger!

3. O Código Modelo dos Alunos (Anatomia do HTML)

Este é o código padrão limpo que cada aluno vai digitar no Bloco de Notas do Windows. Ele possui os 4 elementos essenciais de qualquer página da internet:

<!DOCTYPE html>

A certidão de nascimento da página: avisa ao navegador que estamos usando a versão mais moderna do HTML.

<html> ... </html>

A grande casa de tudo: envolve todo o conteúdo do site, da primeira à última linha.

<head> ... </head>

A cabeça: contém informações invisíveis na página, como o título que aparece na aba do navegador (<title>).

<body> ... </body>

O corpo: tudo o que os olhos humanos enxergam na tela (títulos <h1>, parágrafos <p> e negritos <strong>).

minha-ficha.html (Código Modelo Oficial)

<!-- MINHA PRIMEIRA FICHA WEB - PROJETO LIRACODE -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Primeira Ficha Web - LiraCode</title>
</head>
<body>

  <h1>Olá, eu sou o(a) [Seu Nome Aqui]!</h1>
  
  <p>
    Tenho <strong>[Sua Idade]</strong> anos e sou aluno(a) do 
    <strong>Projeto LiraCode</strong>.
  </p>
  
  <p>
    Estou aprendendo como os computadores realmente funcionam por baixo do capô!
  </p>

  <h2>Meus Interesses Tecnológicos:</h2>
  <p>• Jogos e Programação</p>
  <p>• Cibersegurança e Proteção de Dados</p>
  <p>• Criar meus próprios sites e projetos</p>

  <p><em>Página criada no Bloco de Notas e publicada na Hostinger! 🚀</em></p>

</body>
</html>

4. Laboratório de Prática: Baixe o Modelo no seu Computador

Você pode baixar o arquivo modelo pronto para abrir no seu Bloco de Notas, editar com o seu nome e testar abrindo no navegador:

template-minha-ficha.html

Arquivo HTML puro pré-estruturado para praticar no Bloco de Notas do Windows.

1️⃣ No Bloco de Notas

Abra o arquivo baixado ou crie um novo. Edite colocando seu nome, sua idade e seus interesses.

2️⃣ Salvar com o Crachá Certo

Vá em Salvar Como, escolha Tipo: Todos os arquivos (*.*) e digite o nome com .html no final!

3️⃣ A Mágica no Navegador

Dê dois cliques no arquivo .html salvo. Ele vai abrir no Google Chrome ou Edge mostrando seu primeiro site!

🚀 Próxima parada na estrada (Aula Atual):

Marco 04: Dominando Tags de Texto no HTML

Hierarquia de títulos <h1> a <h6>, parágrafos, destaques e a enciclopédia oficial W3Schools!

Entrar na Aula 04

Aula 03 • A Mágica do HTML Puro (A Ficha Vira Web)