🚀 Capítulo 01: O Batcomputador (Tema: Batman)
NOTE
Este capítulo utiliza a temática de Batman para explicar os fundamentos de HTML e CSS no contexto de um projeto Full Stack. Vamos construir a fachada da nossa base de operações!
1. 🎯 Objetivo da Aula
Compreender o papel do HTML e do CSS em uma aplicação Full Stack e como eles formam a camada de apresentação (Frontend) com a qual o usuário interage.
2. 🏢 O Cenário Prático (Seu Desafio)
O herói Batman monitora Gotham City através do poderoso Batcomputador. Ele precisa de uma interface de tela que mostre o mapa da cidade, o status da armadura, as câmeras de segurança e os alarmes de crimes em tempo real.
Como desenvolvedor Full Stack, o seu primeiro passo é construir essa interface visual (o Frontend)!
- O HTML será o esqueleto da interface (as caixas onde ficarão as câmeras e os textos).
- O CSS será o estilo visual (o fundo preto, os textos em verde neon e as bordas brilhantes). Seu desafio é criar o painel de controle do Batcomputador!
🧠 Fundamentos: A Teoria Traduzida
Em um projeto Full Stack, nós dividimos o trabalho em camadas. O HTML e o CSS fazem parte da Camada de Apresentação (Frontend).
🏗️ 1. HTML (O Esqueleto):
O HTML (HyperText Markup Language) não é uma linguagem de programação, mas sim de marcação. Ele serve para dizer ao navegador o que deve aparecer na tela usando Tags:
<h1>: Para títulos principais.<p>: Para parágrafos de texto.<div>: Uma caixa invisível usada para agrupar e organizar elementos.
🎨 2. CSS (A Armadura):
O CSS (Cascading Style Sheets) serve para dizer ao navegador como as coisas devem parecer. É ele quem dá o estilo, as cores e o posicionamento.
- Color: Muda a cor do texto.
- Background-color: Muda a cor do fundo.
- Border: Cria uma borda ao redor da caixa.
4. 📖 Exemplo Guiado: Estrutura do Painel
Vamos criar a estrutura de um painel de alerta do Batcomputador:
<!-- Arquivo: index.html -->
<div class="painel-alerta">
<h1>🚨 ALERTA DE CRIME 🚨</h1>
<p>Localização: Arkham Asylum</p>
<p>Vilão detectado: Coringa</p>
<button>Enviar Batmóvel</button>
</div>E agora vamos dar o estilo de “tela de computador do Batman” usando CSS:
/* Arquivo: style.css */
.painel-alerta {
background-color: #0b0f19; /* Azul muito escuro */
color: #00ff00; /* Verde Neon */
border: 2px solid #00ff00;
padding: 20px;
font-family: 'Courier New', Courier, monospace; /* Fonte estilo terminal */
}
button {
background-color: #ff0000; /* Vermelho */
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}5. 🛠️ Prática Obrigatória 1: Identificando as Camadas
Diga se as seguintes tarefas de desenvolvimento pertencem ao HTML ou ao CSS:
- Definir que o texto do alerta deve piscar em vermelho.
- Inserir um botão na tela com o texto “Ativar Bat-Sinal”.
- Mudar a cor de fundo de toda a página para preto.
6. 🛠️ Prática Obrigatória 2: O Código do Vilão
- Você quer adicionar uma imagem do vilão detectado no painel. Qual tag HTML você deve usar para inserir uma imagem na tela?
7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo 01 FS_Batcomputador) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
8. 📂 Estrutura de Pastas
proj_aplicacoes_full_stack/
├── capitulos/
│ ├── capitulo_01_batcomputador.md
│ └── codigos/
│ └── cap01/
│ ├── index.html
│ └── style.css💡 Checkpoint de Lógica
Em um projeto Full Stack real, o HTML e o CSS que você cria aqui no frontend serão alimentados depois por dados reais que virão do Backend (como o nome do vilão de verdade capturado pelas câmeras)!
10. 🔥 Desafio de Fixação
Tente criar um arquivo HTML no seu computador e abrir no navegador para ver o seu primeiro painel do Batcomputador funcionar!
🔑 Gabarito de Código/Fórmulas
Gabarito da Prática 1:
- CSS (Estilo e animação visual).
- HTML (Inserção de elemento/conteúdo).
- CSS (Estilo visual). Gabarito da Prática 2:
- A tag é
<img>. Exemplo:<img src="coringa.jpg" alt="Foto do Coringa">.