Programação II – HTML5 e Estrutura de Documentos

1. Introdução ao HTML5

O HTML5 representou uma revolução no desenvolvimento web, deixando de ser apenas uma linguagem de marcação para se tornar uma plataforma robusta. Seus principais pilares são:

Semântica: Dar significado ao conteúdo para máquinas e humanos.
Conectividade: Novas formas de comunicação com o servidor.
Multimídia: Suporte nativo a áudio e vídeo sem plugins externos.
APIs de Dispositivo: Acesso a geolocalização, câmera, armazenamento local, etc.

HTML5 é sobre "o que o conteúdo é" e não "como ele deve aparecer".

2. Estrutura Semântica (Layout)

O uso de tags semânticas é vital para a acessibilidade (leitores de tela) e SEO (motores de busca). Abaixo, as tags que definem as grandes áreas de uma página:

Principais Tags de Bloco:

<header>: Cabeçalho do documento ou seção.
<nav>: Blocos de links de navegação.
<main>: Conteúdo principal e exclusivo da página.
<section>: Agrupamento temático de conteúdo.
<article>: Conteúdo independente e reutilizável.
<aside>: Conteúdo periférico (sidebar).
<footer>: Rodapé do documento ou seção.

Exemplo Prático de Estrutura:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Exemplo Estrutural</title>
</head>
<body>
    <header>
        <h1>Portal Acadêmico</h1>
        <nav>...</nav>
    </header>
    <main>
        <article>
            <h2>Aula de HTML5</h2>
            <p>Conteúdo da aula...</p>
        </article>
    </main>
    <footer>
        <p>Wilcilene!</p>
    </footer>
</body>
</html>

3. O que é CSS?

CSS (Cascading Style Sheets) é uma linguagem de "folhas de estilo" usada para descrever a apresentação de um documento escrito em HTML.

Para que serve?

Visual: Define cores, fontes, tamanhos e espaçamentos.
Layout: Controla o posicionamento dos elementos (grades, colunas, etc).
Adaptatividade: Permite que o site mude de aparência em celulares (Responsividade).

Como e quando usar?

Existem três formas de aplicar CSS, sendo a Externa a mais recomendada para projetos reais:

Externo: Arquivo .css separado (Melhor organização).
Interno: Dentro da tag <style> no <head>.
Inline: Atributo style="..." direto na tag (Evite).

Exemplo: HTML + CSS Combinados

Abaixo, um exemplo completo que você pode salvar como estilo.html:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Seleciona o corpo da página */
        body { background: #eee; font-family: sans-serif; }
        
        /* Seleciona todos os h1 */
        h1 { color: #006699; text-align: center; }
        
        /* Seleciona elementos pela classe "destaque" */
        .destaque { 
            background: yellow; 
            padding: 10px; 
            border-radius: 5px; 
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Minha Página com Estilo</h1>
    <p>Este é um parágrafo comum.</p>
    <p class="destaque">Este parágrafo usa CSS para se destacar!</p>
</body>
</html>

4. Formulários e Validação

O HTML5 trouxe tipos de campos que já realizam validação automática, facilitando a coleta de dados estruturados.

Tipos de Input Úteis:

email
number
date
color
range
tel

Exemplo Executável: Cadastro Completo

O código abaixo é um documento HTML5 completo. Você pode copiá-lo integralmente e salvá-lo como formulario.html para testar.

Passo a passo para execução:

Abra seu editor de código (ex: VS Code).
Crie um novo arquivo e salve como formulario.html.
Cole o código abaixo e abra no navegador.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Teste de Formulário HTML5</title>
    <style>
        body { font-family: sans-serif; padding: 20px; line-height: 1.5; }
        form { max-width: 400px; background: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #ddd; }
        label { display: block; margin-top: 15px; font-weight: bold; }
        input { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
        button { margin-top: 20px; padding: 10px 20px; background: #006699; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h2>Inscrição de Estudante</h2>
    <form action="#" method="post">
        <label for="email">E-mail Acadêmico (Obrigatório):</label>
        <input type="email" id="email" required placeholder="nome@estudante.edu.br">
        <label for="idade">Idade (16-99 anos):</label>
        <input type="number" id="idade" min="16" max="99" value="18">
        <label for="nascimento">Data de Nascimento:</label>
        <input type="date" id="nascimento">
        <label for="cor">Cor Preferida:</label>
        <input type="color" id="cor" value="#006699">
        <label for="nivel">Conhecimento Prévio (1 a 10):</label>
        <input type="range" id="nivel" min="1" max="10">
        <button type="submit">Finalizar Inscrição</button>
    </form>
</body>
</html>

Prévia Visual: Simulação do formulário

Inscrição de Estudante

E-mail Acadêmico (Obrigatório): Idade (16-99 anos):

5. Multimídia e Embeds

O HTML5 eliminou a necessidade de plugins (como o Flash) para reproduzir áudio e vídeo nativamente no navegador.

Áudio e Vídeo:

Use as tags <audio> e <video> com o atributo controls para exibir os controles nativos do navegador.

<!-- Player de Áudio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Seu navegador não suporta áudio.
</audio>

<!-- Player de Vídeo -->
<video controls width="100%">
    <source src="video.mp4" type="video/mp4">
    Seu navegador não suporta vídeo.
</video>

Iframe (Incorporação):

A tag <iframe> permite incorporar conteúdo externo, como mapas

<iframe src="https://www.google.com/maps/embed?..." 
        width="100%" height="300" style="border:0;"></iframe>

6. Para fixar

Atividade 1: Portfólio

Crie uma página de perfil profissional usando as tags semânticas estudadas (header, nav, main, article, aside, footer).

Atividade 2: Formulário de Pré-Inscrição

Desenvolva um formulário de contato usando ao menos 5 tipos de inputs diferentes e atributos de validação como required, min e max.

Entrega: Publique a Atividade 1 no seu repositório. Assim você poderá usá-lo como portfolio real. Capriche!!!