1. O que são Atributos? (Dando Superpoderes às Tags)
Lembra da Aula 01, quando anotamos no caderno Nome: Enzo e Idade: 12? Aprendemos ali o conceito de Chave e Valor! No HTML, os atributos funcionam exatamente do mesmo jeito: são informações extras colocadas dentro da tag de abertura para configurar como ela deve se comportar.
A fórmula mágica de todo atributo é sempre: nome_do_atributo="valor_da_configuracao"
A tag <a> (do inglês Anchor, âncora) cria uma ponte para outro site. O atributo href diz exatamente o endereço de destino:
<a href="https://liracode.com.br" target="_blank">
Acessar Portal dos Pais
</a>
A tag <img> traz imagens para a página. Ela usa src (o caminho do arquivo) e alt (texto para acessibilidade e leitores de tela):
<img src="brasao-liracode.png"
alt="Brasão Oficial LiraCode"
width="60">
O navegador busca o arquivo brasao-liracode.png e o desenha na tela!
2. Caixas Organizadoras (<div> - Agrupando Blocos no Layout)
Quando você organiza seu quarto, você não joga meias, cadernos e ferramentas espalhados no chão: você guarda cada categoria na sua respectiva gaveta ou caixa organizadora. Na web, é exatamente isso que a tag <div> (do inglês Division, divisão) faz!
A <div> é como uma caixa transparente invisível. Ela não altera o texto da tela, mas serve para embalar e agrupar vários elementos juntos (um título, um parágrafo, listas, botões ou imagens) para que eles formem um bloco único e estruturado no layout da página.
Envolvemos os elementos dentro da abertura <div> e do fechamento </div>:
<div>
<h2>Meus Games Favoritos</h2>
<p>Estes são os jogos que mais curto jogar:</p>
<ul>
<li>Roblox</li>
<li>Minecraft</li>
<li>Fortnite</li>
</ul>
</div>
Dica de Ouro: No HTML puro, a <div> é invisível a olho nu. Mas no futuro, quando estilizarmos com CSS, você poderá pintar o fundo, colocar borda ou mover essa caixa inteira com uma única regra!
A linha tracejada dourada abaixo representa a caixa invisível que protege e agrupa o conteúdo:
<div> Gaveta de Games </div>
🎮 Meus Games Favoritos
Estes são os jogos que mais curto jogar no computador:
- Roblox
- Minecraft
- Fortnite
3. Listas: Organizando Informações (<ul> vs <ol>)
Na programação, quase tudo que construímos é uma lista: lista de usuários, lista de compras, inventário de itens num jogo ou ranking de pontuações. No HTML, cada item individual da lista é embalado pela tag <li> (List Item).
Vem de Unordered List. A ordem não altera o sentido. Ideal para listas de itens, poderes ou interesses:
<ul>
<li>Cibersegurança e Defesa</li>
<li>Lógica de Programação</li>
<li>Construção de Páginas Web</li>
</ul>
- Cibersegurança e Defesa
- Lógica de Programação
- Construção de Páginas Web
Vem de Ordered List. A sequência importa! O navegador numera automaticamente cada item:
<ol>
<li>Abrir o Bloco de Notas</li>
<li>Digitar o código HTML</li>
<li>Salvar com a extensão .html</li>
</ol>
- Abrir o Bloco de Notas
- Digitar o código HTML
- Salvar com a extensão .html
4. Tabelas de Dados (<table> - Organizando em Linhas e Colunas)
Imagine uma planilha do Excel, uma tabela de classificação ou um boletim escolar. Sempre que precisamos apresentar informações lado a lado, em formato de grade (linhas e colunas), usamos a tag <table>!
Construir uma tabela no HTML é como encaixar 4 blocos de montar fundamentais:
<table>
A Moldura da Tabela
Abre e fecha a tabela inteira, servindo como a moldura externa.
<tr>
Table Row (Linha)
Cria cada andar horizontal da tabela (uma linha de cada vez).
<th>
Table Header (Título)
Cabeçalho da coluna. O navegador já coloca automaticamente em negrito e centralizado.
<td>
Table Data (Dado)
O dado real da célula (o texto, número ou informação de cada caixinha).
Usamos o atributo border="1" para que as grades fiquem visíveis no HTML puro:
<table border="1">
<tr>
<th>Estudante</th>
<th>Especialidade</th>
<th>Status</th>
</tr>
<tr>
<td>Enzo</td>
<td>HTML Puro & CRUD</td>
<td>Avançado</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Cibersegurança</td>
<td>Avançado</td>
</tr>
</table>
Segredo dos Veteranos: Cada <tr> representa uma linha inteira na horizontal. Dentro de cada linha, as tags <td> preenchem as colunas lado a lado!
Veja a mesma tabela renderizada com o estilo nobre do LiraCode:
| Estudante |
Especialidade |
Status |
| 🌟 Enzo |
HTML Puro & CRUD |
Avançado |
| 🌟 Jennifer |
Cibersegurança |
Avançado |
| 🌟 Paulo Henrique |
Estrutura Web |
Em Ação |
5. Formulários Interativos: O Site Agora Escuta Você!
Até agora, nossas páginas só falavam com quem as lia. Mas a verdadeira mágica da internet acontece quando o usuário pode responder, digitar e interagir.
Para isso, usamos a tag <form>, que agrupa campos de entrada chamados <input>. O atributo type define o comportamento de cada campo:
6. Mini-Desafio de Laboratório: Sua Primeira `ficha-interativa.html`
Chegou a hora de juntar todos os superpoderes no seu Bloco de Notas: caixas organizadoras com <div>, tabelas de dados com <table>, listas estruturadas com <ul>, links externos e seu primeiro formulário interativo!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Ficha Interativa - Aula 05 | LiraCode</title>
</head>
<body>
<!-- Caixa Organizadora: Apresentação -->
<div>
<h1>Minha Primeira Ficha Interativa</h1>
<p>Esta página foi criada no Bloco de Notas e reúne caixas, tabelas, listas e formulários!</p>
</div>
<!-- Caixa Organizadora: Interesses (Lista) -->
<div>
<h2>🎯 Meus Interesses Tecnológicos:</h2>
<ul>
<li>Aprender Cibersegurança e Programação</li>
<li>Criar jogos e páginas interativas</li>
<li>Desvendar como os computadores funcionam</li>
</ul>
</div>
<!-- Caixa Organizadora: Tabela de Missões -->
<div>
<h2>📊 Minhas Missões no LiraCode:</h2>
<table border="1">
<tr>
<th>Missão</th>
<th>Tecnologia</th>
<th>Status</th>
</tr>
<tr>
<td>Anatomia de Pastas & CRUD</td>
<td>Windows e Bloco de Notas</td>
<td>Dominado 🚀</td>
</tr>
<tr>
<td>Extensões & Cibersegurança</td>
<td>Arquivos .txt, .json, .bat</td>
<td>Dominado 🛡️</td>
</tr>
<tr>
<td>Estrutura e Interatividade</td>
<td>DIV, Tabelas, Listas e Form</td>
<td>Em Evolução ⚡</td>
</tr>
</table>
</div>
<!-- Caixa Organizadora: Link Favorito -->
<div>
<h2>🌐 Meu Link Favorito:</h2>
<p>
Conheça o <a href="https://liracode.com.br" target="_blank">Portal Oficial LiraCode</a>!
</p>
</div>
<!-- Caixa Organizadora: Formulário Interativo -->
<div>
<h2>⚡ Teste de Formulário:</h2>
<form>
<p>
Nome do Usuário:<br>
<input type="text" placeholder="Digite seu nome...">
</p>
<p>
Senha de Proteção:<br>
<input type="password" placeholder="Digite sua senha...">
</p>
<p>
Sua Cor Favorita:<br>
<input type="color" value="#eab308">
</p>
<p>
<button type="button" onclick="alert('Formulário enviado com sucesso no LiraCode!')">
Enviar Dados
</button>
</p>
</form>
</div>
</body>
</html>
Você está no Marco 05 da estrada!
Marco 05 • Caixas (DIV), Tabelas, Listas & Formulários
Volte para rever a Aula 04 ou explore manuais completos em PDF na Biblioteca Digital!