Módulo 1: Fundamentos do HTML
Bem-vindo ao ponto de partida! Neste módulo, vamos entender o que é o HTML, por que ele é o "esqueleto" de toda a web e quais ferramentas essenciais precisamos para começar a construir.
1. O Que é HTML?
HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). Não é uma linguagem de programação (como o JavaScript), mas sim uma linguagem de marcação. Ela diz ao navegador o que é cada pedaço de conteúdo.
Analogia: Se o site fosse um carro, o HTML seria o chassi e a estrutura. Se fosse um corpo humano, o HTML seria o esqueleto. Ele dá a forma, mas não tem (ainda) o design ou a função.
2. Ferramentas Essenciais (Nosso "Escritório")
Para construir nossos sites, precisamos de duas ferramentas principais (como vimos no Material I):
VS Code (Visual Studio Code)
O nosso "escritório digital" ou "caderno superpoderoso". É o editor onde vamos escrever todo o nosso código.
Baixar o VS CodeGitHub
O nosso "portfólio na nuvem". É onde salvaremos nossos projetos e publicaremos nossos sites (usando o Git Desktop e GitHub Pages).
Criar Conta no GitHub3. A Estrutura Básica de uma Página
Todo arquivo ".html" segue a mesma estrutura básica. Este é o "esqueleto" mínimo para qualquer página web moderna:
<!DOCTYPE html><html lang="pt-br"> <head> <!-- O "Cérebro" invisível da página --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Título na Aba do Navegador</title> </head> <body> <!-- O "Corpo" visível da página --> <h1>Olá, mundo!</h1> <p>Todo o nosso conteúdo vai aqui.</p> </body></html>4. Semântica: O Ponto Principal
O HTML moderno não é sobre o que parece, mas sobre o que significa. Usar a tag certa para o trabalho certo é chamado de HTML Semântico.
▪ Head vs. Header
<head>: O "cérebro" invisível. Contém metadados, links para CSS e o título da aba.<header>: O cabeçalho visível do seu conteúdo. Onde colocamos o banner, o logo e o título principal da página.
▪ Hierarquia de Títulos
As tags <h1> a <h6> criam o "índice" ou a estrutura de tópicos da
sua página. Elas são essenciais para acessibilidade (leitores de tela) e SEO (Google).
<h1>: O título principal da página. (Use apenas UM por página).<h2>: Os tópicos principais (como os títulos<h3>nesta página).<h3>: Subtópicos de um<h2>.
5. Vídeo-Aula do Encontro
Se você perdeu o nosso encontro síncrono ou quer rever os conceitos, assista à gravação completa abaixo.
6. Próximos Passos (Sua Missão)
Para o nosso próximo encontro, é essencial que você complete as seguintes tarefas (do Material I e II):
- download Instalar o VS Code: Baixe e instale o editor em sua máquina.
- group_add Criar Conta no GitHub: Este será o seu portfólio.
- desktop_windows Instalar o GitHub Desktop: (Opcional, mas recomendado).
- visibility Revisar o Material: Leia os PDFs e examine o código do "index.html" do nosso site.
Ficou com alguma dúvida? Não hesite em perguntar no nosso grupo de WhatsApp ou no Google Classroom!