1. O Objetivo do Projeto

O aluno deverá criar um Portal de Notícias simplificado. O desafio é utilizar apenas HTML, focando 100% na estrutura semântica, na hierarquia de informações e na correta utilização das tags aprendidas nas últimas 6 aulas.

2. Requisitos do Projeto (Checklist)

Para que o projeto seja considerado completo, ele deve conter:

  1. Estrutura Global: DOCTYPE, html, head (com metadados e título) e body.
  2. Semântica HTML5: Uso de <header>, <nav>, <main>, <section>, <article>, <aside> e <footer>.
  3. Conteúdo de Texto: Hierarquia de títulos (h1 a h3) e parágrafos.
  4. Mídias: Pelo menos uma imagem (img) e um vídeo (video ou iframe).
  5. Interatividade: Links (a) internos ou externos.
  6. Organização: Uma lista (ul ou ol) e uma tabela (table) de dados.
  7. Interação com Usuário: Um formulário (form) de contato ou newsletter.

3. Sugestão de Estrutura (Exemplo de Código)

Abaixo, um esboço de como o código deve ser organizado para que o aluno tenha um ponto de partida:

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portal de Notícias da Turma de Front-end">
    <title>TechNews - Seu Portal de Tecnologia</title>
</head>
<body>

    <header>
        <h1>TechNews 2026</h1>
        <nav>
            <ul>
                <li><a href="#home">Início</a></li>
                <li><a href="#noticias">Notícias</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="noticias">
            <h2>Destaques do Mundo Dev</h2>
            
            <article>
                <h3>O Avanço do HTML5 na Web Moderna</h3>
                <img src="<https://via.placeholder.com/600x300>" alt="Ilustração de código HTML">
                <p>O HTML5 revolucionou a forma como consumimos <strong>mídia nativa</strong>.</p>
                <video src="video/demo.mp4" controls width="400">Seu navegador não suporta vídeos.</video>
            </article>
        </section>

        <section>
            <h2>Comparativo de Navegadores</h2>
            <table border="1">
                <thead>
                    <tr>
                        <th>Navegador</th>
                        <th>Suporte HTML5</th>
                        <th>Velocidade</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Chrome</td>
                        <td>Excelente</td>
                        <td>Alta</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <aside>
            <h3>Download de Navegadores</h3>
            <p>
                <a href="<https://www.google.com/chrome/dr/download/>" target="_blank">Google Chrome</a>
            </p>

        </aside>
        <div class="formulario">
            <h4>Assine nossa Newsletter</h4>
            <form action="#" method="POST">
                <fieldset>
                    <legend>Receba novidades</legend>
                    <label for="nome">Nome:</label>
                    <input type="text" id="nome" name="nome" required>
                    <br><br>
                    <label for="email">E-mail:</label>
                    <input type="email" id="email" name="email" required>
                    <br>
                    <button type="submit">Inscrever</button>
                </fieldset>
            </form>
        </div>
    </main>

    <footer>
        <p>&copy; 2026 - Desenvolvido por [Nome do Aluno] | Curso Front-end 160h</p>
    </footer>

</body>
</html>

Perguntas de Revisão (Consolidação do Módulo HTML)