Atividade - Criando um Site de Partidas de Futebol
Atividade Prática:
Página Web com Tabela de Campeonato
Nesta atividade você irá construir um site completo utilizando os três pilares do desenvolvimento web front-end: HTML para estrutura, CSS para estilo e JavaScript para interatividade — tudo organizado em arquivos separados.
O projeto deve ser organizado em uma pasta com seu nome contendo exatamente os três arquivos abaixo:
index.html
Estrutura e conteúdo da página. Deve referenciar os arquivos estilo.css e script.js.
estilo.css
Todo o visual da página: cores, fontes, espaçamento e formatação da tabela.
script.js
Interatividade: pelo menos um recurso em JavaScript (ex: ordenar tabela, destacar linha, mostrar alerta).
-
Topo (Header): deve conter o título do campeonato (ex: "Tabela do Brasileirão 2025"), logotipo ou ícone representativo e menu ou subtítulo identificando o site.
-
Corpo (Main): deve conter a tabela de partidas com todas as colunas obrigatórias descritas abaixo, além de um parágrafo introdutório explicando o conteúdo.
-
Rodapé (Footer): deve conter nome do aluno, turma, disciplina e o ano.
-
Linkagem correta: o HTML deve referenciar o CSS com
<link>e o JavaScript com<script src="...">. -
Mínimo de 8 partidas cadastradas na tabela.
| # | Coluna | Tipo de Dado | Exemplo |
|---|---|---|---|
| 1 | Times | Texto | Flamengo vs Corinthians |
| 2 | Jogo | Texto / Número | Rodada 10 — Jogo 3 |
| 3 | Placar | Texto | 2 × 1 |
| 4 | Pontos | Número | 3 (vitória) / 1 (empate) / 0 (derrota) |
| 5 | Cidade da Partida | Texto | Rio de Janeiro – RJ |
| 6 | Data da Partida | Data | 12/04/2025 |
Linkando arquivos: No <head> do HTML adicione:
<link rel="stylesheet" href="estilo.css">
Antes do </body>:
<script src="script.js"></script>
Estrutura semântica: Use as tags <header>, <main> e <footer> para definir os três segmentos da página.
Tabela HTML: Use <table>, <thead>, <tbody>, <tr>, <th> e <td> para montar a estrutura corretamente.
Ideia para o JavaScript: Ao clicar em uma linha da tabela, destaque-a com uma cor diferente usando classList.toggle().
Estrutura de arquivos
3 arquivos corretos, pasta organizada e linkagem funcional.
Segmentos da página
Header, Main e Footer presentes com conteúdo adequado.
Tabela completa
6 colunas obrigatórias com mínimo de 8 partidas cadastradas.
Estilo CSS
Formatação visual aplicada: cores, fontes, bordas e layout da tabela.
JavaScript
Pelo menos um recurso interativo funcionando corretamente.
1. Organize todos os arquivos (index.html, estilo.css, script.js) dentro de uma pasta com o seu nome.
2. Compacte a pasta em formato .zip (clique com o botão direito → Compactar / Enviar para → Pasta compactada).
3. Nomeie o arquivo no formato: SeuNome_TabelaFutebol.zip
4. Envie o arquivo .zip conforme orientação do professor no prazo estabelecido.
Comentários
Postar um comentário
Ficou com alguma dúvida? Quer compartilhar sua experiência? Tem uma sugestão de
melhoria? Seu comentário é muito importante!