[ ] Pasta introducao-web/ da Aula 01 com site-evento/index.html abrindo no Live Server.
[ ] VS Code com Live Server e Prettier instalados e format on save ativado.
[ ] Navegador com DevTools — você vai usar a aba Elements o tempo todo hoje.
[ ] Tema do projeto autoral definido (entregue na atividade assíncrona da Aula 01).
Na aula passada você viu como a Web funciona por fora: cliente e servidor, URL, HTTP, o caminho de uma requisição até a renderização — e criou um index.html mínimo sem entender cada linha. Hoje você entende cada linha, aprende os elementos de texto, listas, links e tabelas, e constrói três das cinco páginas do site do evento com HTML semântico e validado.
HTML é uma linguagem de marcação, não de programação: ela não tem variáveis, condicionais ou laços. Sua função é descrever a estrutura e o significado do conteúdo por meio de marcas (tags). Você não diz ao navegador "desenhe um retângulo azul aqui"; você diz "isto é um título", "isto é um parágrafo", "isto é uma lista de três itens" — e o navegador (ou o leitor de tela, ou o buscador) decide o que fazer com essa informação.
Essa é a diferença entre HTML e um editor de texto: no Word você formata a aparência; no HTML você declara o que cada coisa é. A aparência é assunto do CSS, a partir da Aula 05.
<a href="https://github.io" title="Site oficial">GitHub</a>
└┬┘└──────────┬───────────┘ └───────┬───────┘└──┬──┘└─┬─┘
│ │ │ │ │
nome atributo 1 atributo 2 conteúdo tag
da tag de fechamento
└───────────────── tag de abertura ─────────────┘
Elemento = tag de abertura + conteúdo + tag de fechamento.
Atributo = informação adicional, sempre na tag de abertura, no formato nome="valor". Use sempre aspas duplas.
Elementos vazios não têm conteúdo nem fechamento: <br>, <hr>, <img>, <input>, <meta>, <link>.
Os nomes de tags e atributos não diferenciam maiúsculas de minúsculas, mas a convenção universal é tudo em minúsculas. Siga-a.
Elementos podem conter outros, mas precisam ser fechados na ordem inversa da abertura — como parênteses em matemática:
HTML
<!-- CORRETO --><p>Texto com <strong>destaque <em>duplo</em></strong> aqui.</p><!-- ERRADO: fechamento cruzado --><p>Texto com <strong>destaque <em>duplo</strong></em> aqui.</p>
O aninhamento é o que transforma o HTML em uma árvore — a mesma árvore que você viu na Aula 01 com o nome de DOM. <p> é pai de <strong>, que é pai de <em>. Todo elemento tem exatamente um pai (exceto <html>, a raiz) e pode ter vários filhos.
🧠 Você sabia?
O navegador nunca se recusa a exibir um HTML "errado". A especificação da WHATWG descreve, passo a passo, como o parser deve se recuperar de cada tipo de erro: uma tag cruzada é reorganizada, um </li> esquecido é inserido, um <p> aberto dentro de outro <p> fecha o anterior. É por isso que páginas quebradas "funcionam" — e por isso que o resultado às vezes não é o que você escreveu. Aliás, pela especificação, fechar <li>, <p>, <td> e <tr> é opcional; nesta trilha você fecha tudo, sempre, porque código previsível é mais fácil de ler, depurar e manter.
<!DOCTYPE html><htmllang="pt-BR"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="Descrição da página em até 160 caracteres."><metaname="author"content="Seu Nome"><title>Título que aparece na aba do navegador</title><linkrel="stylesheet"href="css/estilo.css"></head><body><!-- Todo conteúdo visível fica aqui --><scriptsrc="js/script.js"></script></body></html>
Linha
Função
<!DOCTYPE html>
Declara HTML5. Sem ela, o navegador entra em quirks mode e emula bugs de navegadores antigos
lang="pt-BR"
Idioma do conteúdo. Essencial para leitores de tela (pronúncia), tradução automática e buscadores
<meta charset="UTF-8">
Codificação de caracteres. Sempre a primeira linha do <head> — você viu na Aula 01 o que acontece sem ela
viewport
Faz a página se adaptar a telas de celular. Sem ela, não há responsividade (Aula 08)
description
Texto que aparece nos resultados de busca, abaixo do título
<title>
Título da aba, dos favoritos e do resultado de busca. Obrigatório
<link rel="stylesheet">
Liga uma folha de estilo externa (Aula 05). Pode omitir enquanto não houver CSS
<script src>
Liga um arquivo JavaScript (Aula 10). Fica no fim do <body> para não bloquear a renderização
O <head> é invisível: nada dele aparece na tela. Ele carrega metadados — informações sobre a página para o navegador, os buscadores e as redes sociais. Tudo que o usuário vê fica dentro de <body>.
🔎 Por baixo do capô
O quirks mode existe por causa da história: nos anos 1990, cada navegador interpretava CSS de um jeito, e milhões de páginas foram escritas em cima desses bugs. Quando os padrões foram corrigidos, os navegadores precisaram de um jeito de saber se a página era "antiga" (renderiza com os bugs) ou "moderna" (renderiza pelo padrão). O sinal é o <!DOCTYPE>. Sem ele, o navegador assume o pior — e o seu CSS da Unidade 2 vai se comportar de forma estranha sem motivo aparente.
<h1>Título principal — apenas um por página</h1><h2>Seção</h2><h3>Subseção</h3><h4>Sub-subseção</h4>
⚠️ Atenção
Hierarquia de títulos não é escolha de tamanho de fonte — é estrutura de documento. Leitores de tela permitem navegar pulando de título em título, e o Google usa essa hierarquia para entender a página. Nunca pule níveis (h1 direto para h4) e nunca escolha <h3> só porque "ficou menor". Tamanho é assunto do CSS.
Pense nos títulos como o sumário de um livro: <h1> é o título do livro (um só), <h2> são os capítulos, <h3> as seções dentro de cada capítulo. Se você conseguir extrair só os títulos da página e eles formarem um sumário coerente, a hierarquia está certa.
<p>Um parágrafo comum de texto.</p><p>
Este é <strong>importante</strong> e este tem <em>ênfase</em>.
Este é apenas <b>negrito visual</b> e este é <i>itálico visual</i>.
<mark>Texto realçado</mark>, <small>letra miúda</small>,
<del>removido</del> e <ins>inserido</ins>.
Fórmula: H<sub>2</sub>O e potência: x<sup>2</sup>.
Código: <code>let x = 10;</code>.
Atalho: <kbd>Ctrl</kbd> + <kbd>S</kbd>.
</p>
Par de tags
Diferença
<strong> × <b>
strong = importância semântica (o leitor de tela pode enfatizar). b = negrito puramente visual (palavras-chave, nome de produto)
<em> × <i>
em = ênfase semântica (muda o sentido da frase). i = itálico visual (termo estrangeiro, nome científico, pensamento)
Na prática: use strong e em; deixe b e i para casos específicos. Uma regra simples: se você leria a palavra em voz alta com outro tom, é em; se a informação é importante mesmo lida em tom neutro, é strong.
📌 Vale gravar
A diferença entre <strong>/<b> e <em>/<i> é pergunta clássica. Resposta curta: os dois pares têm a mesma aparência padrão, mas só strong e em carregam significado — e significado é o que leitores de tela e buscadores usam.
<blockquotecite="https://www.w3.org/"><p>A força da Web está em sua universalidade.</p><footer>— <cite>Tim Berners-Lee</cite></footer></blockquote><p>Endereço:<br>Av. dos Ingás, 3001<br>Sinop — MT</p><hr><pre>
Texto pré-formatado:
preserva espaços
e quebras de linha.
</pre>
<blockquote> é uma citação em bloco; o atributo cite guarda a URL da fonte (não aparece na tela). <cite> marca o título da obra ou autor citado.
<q> é a versão inline: <p>Ele disse <q>volto já</q> e sumiu.</p> — o navegador coloca as aspas.
<br> quebra a linha dentro de um bloco; <hr> é uma quebra temática (mudança de assunto), não uma "linha decorativa".
<pre> preserva espaços e quebras exatamente como digitados — útil para código e diagramas.
⚠️ Atenção<br> serve para quebras dentro de um bloco de conteúdo (endereços, poemas, letras de música). Usar <br><br> para separar parágrafos é erro — use <p>. O espaçamento entre parágrafos é assunto do CSS.
<!-- Lista não ordenada: a ordem dos itens não importa --><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><!-- Lista ordenada: a ordem importa (passos, ranking) --><ol><li>Analisar a URL</li><li>Resolver o DNS</li><li>Abrir conexão TCP</li></ol><!-- Com atributos: numeração romana, começando em 3, decrescente --><oltype="I"start="3"reversed><li>Terceiro item</li><li>Segundo item</li><li>Primeiro item</li></ol><!-- Lista de definições: pares termo → descrição --><dl><dt>HTML</dt><dd>Linguagem de marcação que estrutura o conteúdo.</dd><dt>CSS</dt><dd>Linguagem de estilo que define a apresentação.</dd></dl><!-- Listas aninhadas: o <ul> filho vai DENTRO do <li> pai --><ul><li>Front-end
<ul><li>HTML</li><li>CSS</li></ul></li><li>Back-end</li></ul>
A pergunta para escolher entre <ul> e <ol> é: se eu embaralhar os itens, a informação muda? Passos de uma receita, sim → <ol>. Ingredientes, não → <ul>. A lista de definições (<dl>) serve para glossários, metadados ("Autor: Fulano", "Duração: 2 h") e perguntas frequentes.
Um <ul> ou <ol> só pode ter <li> como filhos diretos. Qualquer outra coisa — um <h3>, um <p>, outra lista — vai dentro de um <li>. O validador do W3C avisa quando você erra isso.
O link é a invenção que dá o "hipertexto" ao HTML. Todos os tipos usam o mesmo elemento, <a>, e mudam só o href:
HTML
<ahref="https://www.wikipedia.org">Link externo</a><ahref="contato.html">Link interno relativo</a><ahref="/sobre.html">Link a partir da raiz</a><ahref="#secao3">Âncora interna da própria página</a><ahref="programacao.html#dia-2">Âncora em outra página</a><ahref="documentos/edital.pdf"download>Baixar edital</a><ahref="mailto:contato@exemplo.com.br">Enviar e-mail</a><ahref="tel:+556635111000">Ligar</a><ahref="https://exemplo.com"target="_blank"rel="noopener noreferrer">
Abrir em nova aba
</a>
Os caminhos relativos seguem exatamente a tabela da §5 da Aula 01: contato.html é "na mesma pasta", ../index.html é "uma pasta acima", img/logo.png é "na subpasta img".
⚠️ Atenção
Segurança: ao usar target="_blank", sempre inclua rel="noopener noreferrer". Sem isso, a página aberta ganha acesso parcial à sua janela original (window.opener) e pode redirecioná-la — um vetor de phishing conhecido como tabnabbing. Navegadores modernos já aplicam noopener por padrão, mas o atributo explícito garante o comportamento em todos.
Para a âncora funcionar, o destino precisa de um id — e id deve ser único na página:
HTML
<ahref="#metodologia">Ir para Metodologia</a><h2id="metodologia">Metodologia</h2><p>O evento combina palestras e oficinas práticas.</p>
Ao clicar, o navegador rola até o elemento e acrescenta #metodologia à URL — lembre-se da Aula 01: o fragmento nunca é enviado ao servidor. Um link href="#topo" para um id="topo" no cabeçalho dá o clássico "voltar ao topo".
Textos de link ruins: "clique aqui", "saiba mais", "link". Um usuário de leitor de tela pode navegar por uma lista só de links — "clique aqui" ali não significa nada. Buscadores também usam o texto do link para entender o destino. Use texto descritivo: "Baixe o edital em PDF", "Veja a programação completa".
Tabelas são para dados tabulares — informação que faz sentido em linhas e colunas, como notas, horários, preços. Jamais para layout: isso quebra em celular, confunde leitores de tela e é assunto do CSS (Aula 07).
HTML
<table><caption>Notas da turma</caption><thead><tr><thscope="col">Aluno</th><thscope="col">A1</th><thscope="col">A2</th><thscope="col">A3</th><thscope="col">Média</th></tr></thead><tbody><tr><thscope="row">Maria Silva</th><td>8,0</td><td>7,5</td><td>9,0</td><td>8,2</td></tr><tr><thscope="row">João Souza</th><td>6,0</td><td>5,5</td><td>7,0</td><td>6,2</td></tr></tbody><tfoot><tr><thscope="row">Média da turma</th><td>7,0</td><td>6,5</td><td>8,0</td><td>7,2</td></tr></tfoot></table>
Elemento
Função
<caption>
Título/legenda da tabela — o leitor de tela anuncia antes de entrar nela
<thead>, <tbody>, <tfoot>
Agrupamento semântico de linhas: cabeçalho, corpo, rodapé (totais)
<tr>
Linha (table row)
<th>
Célula de cabeçalho
<td>
Célula de dado
scope="col" / scope="row"
Informa a leitores de tela a qual eixo o cabeçalho pertence
colspan estende a célula para a direita; rowspan, para baixo. Cuidado com a contagem: se uma linha tem colspan="3", as linhas seguintes precisam continuar somando o mesmo número de colunas, senão a tabela fica torta e o validador reclama.
Sem CSS, a tabela aparece sem bordas — parece "só texto alinhado". É normal. A Aula 06 coloca as bordas; hoje o que importa é a estrutura estar certa.
Antes do HTML5, tudo era <div>. O resultado era a chamada div soup: código ilegível, inacessível e ruim para buscadores. O HTML5 trouxe elementos que dizem o que a região é:
Só quando não existe elemento semântico adequado — agrupamento puramente visual
Repare que <header> e <footer> podem aparecer mais de uma vez: um para o site, outro dentro de cada <article>. Só <main> é único.
💡 Dica
Teste da semântica: se você trocar todo o seu CSS por um arquivo vazio, a página ainda faz sentido lida de cima a baixo? Se sim, sua semântica está boa. É exatamente o que um leitor de tela e um buscador "veem".
Para decidir entre <section> e <article>: pergunte se o trecho faria sentido publicado sozinho, em outro site. Um palestrante com nome, bio e foto, sim → <article>. A seção "Sobre o evento" da página inicial só faz sentido dentro dela → <section>.
🔬 Investigue
Crie exercicios/aula02/minimo.html contendo só a linha <p>Oi — sem doctype, sem <html>, sem <body>, sem fechar o <p>. Abra no Live Server e vá à aba Elements do DevTools. O navegador construiu <html>, <head>, <body> e fechou o <p> sozinho: você está vendo o DOM, não o arquivo. Agora acrescente uma <table> com um <tr> direto dentro (sem <tbody>) e olhe de novo: o <tbody> aparece no DOM sem você ter escrito. Quando o JavaScript da Unidade 3 percorrer a árvore, é essa árvore que ele vai encontrar.
O validador (https://validator.w3.org/) é o corretor ortográfico do HTML. Ele compara o seu código com a especificação e lista cada erro com a linha exata. Três formas de usar:
Validate by URI — para sites já publicados.
Validate by File Upload — envie o arquivo .html.
Validate by Direct Input — cole o código. É a forma mais rápida durante a aula.
A meta é sempre a mesma mensagem: "Document checking completed. No errors or warnings to show."
Mensagem do validador
O que significa
Stray end tag “p”.
Um </p> sem <p> correspondente — geralmente um fechamento duplicado ou cruzado
Unclosed element “ul”.
Faltou </ul>
End tag “strong” violates nesting rules.
Fechamento cruzado (§1)
Element “ul” not allowed as child of element “ol” in this context.
Lista aninhada fora do <li> (§4)
Element “h2” not allowed as child of element “ul”.
Só <li> pode ser filho direto de lista
Duplicate ID “topo”.
Dois elementos com o mesmo id — âncoras vão quebrar
Consider adding a “lang” attribute to the “html” start tag
Faltou lang="pt-BR" (aviso, mas corrija)
A table row was N columns wide and exceeded the column count
colspan/rowspan desbalanceado (§6)
Erros são listados na ordem em que ocorrem, e um erro costuma causar vários: uma tag não fechada no início gera dezenas de mensagens depois. Corrija o primeiro, revalide, repita.
💻 Mão na massa — Início, programação e palestrantes do site do evento¶
Hoje o index.html da Aula 01 vira uma página de verdade, e nascem programacao.html e palestrantes.html. As páginas inscricao.html e contato.html ganham só o esqueleto — elas são o assunto da Aula 03.
<!DOCTYPE html><htmllang="pt-BR"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="Semana Acadêmica de Sistemas de Informação: três dias de palestras, minicursos e oficinas para estudantes e profissionais de tecnologia."><metaname="author"content="Semana Acadêmica de Sistemas de Informação"><title>Início — Semana Acadêmica de Sistemas de Informação</title></head>
O <title> segue o padrão "Página — Nome do site": é assim que ele aparece na aba e no histórico.
O cabeçalho é idêntico nas cinco páginas — é o que faz o site parecer um site. Escreva uma vez, com capricho, e copie nas outras.
site-evento/index.html (trecho: início do <body>)
HTML
<body><headerid="topo"><h1>Semana Acadêmica de Sistemas de Informação</h1><p>Três noites de outubro · Auditório Central</p><nav><ul><li><ahref="index.html">Início</a></li><li><ahref="programacao.html">Programação</a></li><li><ahref="inscricao.html">Inscrição</a></li><li><ahref="palestrantes.html">Palestrantes</a></li><li><ahref="contato.html">Contato</a></li></ul></nav></header>
Os cinco href são caminhos relativos: todos os arquivos estão na mesma pasta. O id="topo" vai servir para os links "voltar ao topo".
<main><p>Nesta página:</p><ul><li><ahref="#sobre">Sobre o evento</a></li><li><ahref="#como-participar">Como participar</a></li><li><ahref="#glossario">Glossário</a></li></ul><sectionid="sobre"><h2>Sobre o evento</h2><p>
A Semana Acadêmica de Sistemas de Informação reúne estudantes, professores e
profissionais de tecnologia da região norte de Mato Grosso em três dias de
<strong>palestras, minicursos e oficinas práticas</strong>. O evento é
<em>gratuito</em> e aberto à comunidade.
</p><p>
Nesta edição, o tema central é <q>Desenvolvimento web para problemas reais</q>:
cada atividade parte de um caso concreto — do agronegócio à saúde pública —
e mostra como HTML, CSS e JavaScript resolvem parte dele.
</p><p>Emitimos certificado de <strong>20 horas</strong> para quem participar de pelo menos 75% das atividades.</p><p><ahref="#topo">Voltar ao topo</a></p></section><sectionid="como-participar"><h2>Como participar</h2><ol><li>Leia a <ahref="programacao.html">programação</a> e escolha as atividades.</li><li>Preencha o <ahref="inscricao.html">formulário de inscrição</a>.</li><li>Confira o e-mail de confirmação (verifique a caixa de spam).</li><li>No primeiro dia, faça o credenciamento no saguão do auditório a partir das 18h30.</li><li>Participe, assine a lista de presença e receba o certificado por e-mail.</li></ol><p><ahref="#topo">Voltar ao topo</a></p></section><sectionid="glossario"><h2>Glossário</h2><dl><dt>Palestra</dt><dd>Apresentação expositiva de 50 minutos, com perguntas ao final.</dd><dt>Minicurso</dt><dd>Atividade prática de 3 horas, com computador, para até 30 participantes.</dd><dt>Oficina</dt><dd>Atividade curta (90 minutos) em que os participantes constroem algo juntos.</dd><dt>Mesa-redonda</dt><dd>Conversa entre três ou quatro convidados mediada por um professor do curso.</dd><dt>Credenciamento</dt><dd>Confirmação de presença e retirada do crachá no primeiro dia.</dd></dl><p><ahref="#topo">Voltar ao topo</a></p></section><blockquotecite="https://www.w3.org/"><p>A força da Web está em sua universalidade. O acesso por todos, independentemente de deficiência, é um aspecto essencial.</p><footer>— <cite>Tim Berners-Lee</cite>, criador da Web</footer></blockquote></main>
Cada <section> tem um <h2> — regra de ouro: seção sem título provavelmente deveria ser um <div>. Os id dos <section> alimentam a lista "Nesta página" e as âncoras funcionam sem uma linha de CSS ou JavaScript.
Um <tbody>por dia, cada um com id. Isso permite links diretos como programacao.html#dia-2 a partir de outras páginas.
A linha de título de cada dia usa <th colspan="4">: uma célula ocupa as quatro colunas. Note que a linha da confraternização tem <th> + <td colspan="3"> — somando 4 de novo.
O <tfoot> carrega a observação final. Sem CSS ele aparece no fim, onde deve.
Cada palestrante é um <article>: faria sentido sozinho em outro site. Os títulos são <h3> porque estão abaixo do <h2> "Palestrantes e ministrantes" — hierarquia respeitada. Os links para programacao.html#dia-2 combinam caminho relativo com fragmento.
Abra https://validator.w3.org/#validate_by_input, cole o código de cada página e corrija até ver "No errors or warnings to show". Faça isso nas cinco. É a última etapa de toda aula da Unidade 1.
As cinco páginas abrem no Live Server e o menu leva de uma para outra sem 404.
Em index.html, os links "Nesta página" rolam até a seção e a URL ganha #sobre, #como-participar, #glossario.
Em palestrantes.html, clicar em "Minicurso: primeiros passos com redes neurais" abre programacao.html já posicionada no Dia 2.
Na aba Elements, a tabela mostra três <tbody> e um <tfoot>; cada <tr> soma 4 colunas.
O validador não acusa nenhum erro em nenhuma das cinco páginas.
Resultado esperado: um site de cinco páginas, sem estilo, navegável, com hierarquia de títulos correta, tabela de programação estruturada e zero erros no W3C. Ele parece "feio" — e vai continuar assim até a Aula 05. O que importa agora é a estrutura.
A8. Qual a diferença semântica entre <strong> e <b>? E entre <em> e <i>?
A9. Escreva o HTML de uma lista não ordenada com 3 itens, sendo que o segundo contém uma sublista ordenada com 2 itens.
A10. Escreva um link que abra https://www.wikipedia.org em nova aba, com os atributos de segurança corretos.
A11. O que faz o atributo scope em um <th>?
A12. Escreva o HTML de uma célula que ocupe 3 colunas e outra que ocupe 2 linhas.
A13. Para cada situação, indique o elemento semântico mais adequado: (a) menu principal; (b) uma notícia completa; (c) barra lateral de links relacionados; (d) rodapé com copyright; (e) imagem com legenda; (f) conteúdo principal da página.
A14. Por que <main> deve aparecer apenas uma vez por página?
B1. Crie exercicios/aula02/curriculo.html — um currículo pessoal completo usando apenas HTML semântico, sem nenhum CSS. Deve conter: dados pessoais no <header>; seções de formação, experiência, habilidades e projetos; listas apropriadas em cada uma (ordenada onde a cronologia importa); uma tabela de idiomas com nível; links para e-mail, telefone, LinkedIn e GitHub; <footer>.
Resultado esperado: validador do W3C com zero erros; a hierarquia h1 → h2 sem pulos; os links mailto: e tel: funcionando.
Dica
Use a página de palestrantes como modelo: <header> com seu nome no <h1>, <main> com uma <section> por bloco do currículo, <dl> para pares como "Período / Instituição". Para a tabela de idiomas, <th scope="row"> no nome do idioma.
B2. Escreva o HTML (sem CSS) de uma página de notícia com: cabeçalho do site, navegação, artigo com título, subtítulo, data em <time>, autor, cinco parágrafos, uma citação em destaque, uma seção de "leia também" em <aside> e rodapé do artigo com as tags do assunto.
Resultado esperado: um <article> com <header> e <footer> próprios, além do <header> e <footer> do site; o <aside> fora do <article>; zero erros no validador.
Dica
O exemplo da §7 é quase esse esqueleto. O subtítulo da notícia é um <p> dentro do <header> do artigo, não um <h2> — subtítulo jornalístico é descrição, não seção. As tags do assunto cabem em uma <ul> dentro do <footer> do artigo.
B3. Reproduza em HTML a tabela com a sequência das 15 aulas desta trilha (está na Aula 01), usando <caption>, <thead>, <tbody> e <th scope> corretamente. Mescle células nas linhas que fecham unidade (06, 10, 15) para indicar "Marco do projeto".
Resultado esperado: uma tabela de 15 linhas de dados, três <th scope="row"> de marco mesclados com colspan, e cada linha somando o mesmo número de colunas.
Dica
Comece pela tabela de programação do Mão na massa: um <tbody> por unidade deixa a estrutura mais clara. Nas linhas de marco, se a tabela tem 3 colunas e você quer "Aula" + "Marco do projeto", use <th scope="row"> + <td colspan="2">.
B4. Pegue o trecho abaixo (div soup) e reescreva-o inteiramente com HTML5 semântico:
HTML
<divid="topo"><divclass="titulo">Blog do Curso</div><divclass="menu"><div><ahref="#">Home</a></div><div><ahref="#">Posts</a></div></div></div><divid="conteudo"><divclass="post"><divclass="titulo-post">Como estudar programação</div><divclass="data">14 de outubro</div><divclass="texto">Estudar programação exige prática diária e projetos pequenos que cresçam aos poucos.</div></div></div><divid="rodape">Copyright Semana Acadêmica de Sistemas de Informação</div>
Cada class do original está gritando o nome do elemento semântico: titulo → <h1>, menu → <nav>, post → <article>, data → <time>. Só o # dos links deve virar um caminho real.
B5. Construa um índice navegável: uma página longa com 6 seções, cada uma com id, e um menu no topo com links de âncora para cada seção. Ao final de cada seção, inclua um link "voltar ao topo".
Resultado esperado: clicar em cada item do menu rola até a seção certa e a URL muda para #id-da-secao; "voltar ao topo" funciona em todas.
Dica
Cada seção precisa de conteúdo suficiente para a página rolar — copie três parágrafos da §1 desta aula em cada uma. Os id não podem ter espaços nem acentos e não podem se repetir.
B6. Compare arquiteturas: escolha três sistemas que você usa (por exemplo SIGAA, Instagram e um blog pessoal) e produza uma tabela HTML classificando cada um quanto a: estático/dinâmico, MPA/SPA e quantas camadas você supõe existirem. Justifique cada classificação com uma evidência observável (comportamento ao navegar, aba Network).
Resultado esperado: uma <table> com <caption>, <thead> e três linhas de dados, seguida de um parágrafo de justificativa por sistema.
Dica
Na aba Network, filtre por Doc: uma MPA carrega um novo documento HTML a cada clique; uma SPA carrega um documento no início e depois só Fetch/XHR com JSON.
B7. Use o validador do W3C em três sites reais e registre quantos erros e avisos cada um apresenta. Escolha um erro de cada site, explique o que significa e como corrigir.
Resultado esperado: uma lista com site, número de erros, número de avisos, o texto literal de um erro e a correção proposta.
Dica
Use Validate by URI. Sites grandes costumam ter dezenas de erros — isso não os impede de funcionar (lembre-se do "Você sabia?" da §1), mas mostra por que o validador é um padrão de qualidade e não uma obrigação técnica.
C1. Site institucional de 4 páginas. Construa, em exercicios/aula02/curso/, um site sobre um curso técnico ou de graduação — o seu, ou o curso de Sistemas de Informação de uma universidade pública à sua escolha (a grade curricular costuma estar disponível no site da instituição) — com quatro páginas interligadas: index.html (apresentação), grade.html (tabela com a grade curricular completa), corpo-docente.html (lista de professores com formação) e contato.html (endereço, telefone, e-mail e mapa em link). Requisitos: navegação idêntica em todas as páginas; caminhos relativos corretos; HTML5 semântico; zero erros no validador; nomes de arquivos em minúsculas sem acentos. Sem CSS ainda — este site será estilizado nas Aulas 05 e 06.
Dica
Faça primeiro o <header> com o <nav> de 4 links e só depois as páginas — copie o cabeçalho pronto em cada uma. Para a grade curricular, um <tbody> por fase, como na programação do evento. O "mapa em link" é um <a> para o Google Maps com target="_blank" e rel.
O trecho abaixo "funciona" — abre no navegador e mostra tudo. Mesmo assim, ele tem pelo menos oito problemas: alguns o validador do W3C encontra, outros só um olho humano treinado percebe. Encontre todos, classifique-os e corrija.
HTML
<html><head><title>Semana de SI</title><metacharset="UTF-8"></head><body><h1>Semana Acadêmica</h1><h1>Programação</h1><h4>Dia 1</h4><p>Palestra de abertura com <strong>convidada <em>especial</strong></em>.</p><p>Para se inscrever, <ahref="inscricao.html"target="_blank">clique aqui</a>.<br><br>
As vagas são limitadas.</p><ul><li>Minicursos</li><ul><li>HTML e CSS</li></ul><li>Oficinas</li></ul><table><tr><td>Horário</td><td>Atividade</td></tr><tr><td>19h</td><tdcolspan="3">Abertura</td></tr></table></body></html>
Critérios de pronto
Uma lista numerada com cada problema, a linha em que está e uma classificação: "o validador encontra" ou "só um humano encontra".
Pelo menos oito problemas listados (há mais — quem achar dez merece destaque especial).
A versão corrigida, validada com zero erros e zero avisos.
Uma frase explicando por que os problemas que o validador não encontra são, ainda assim, problemas.
Pistas
Cole o código como está no validador e leia as mensagens — elas resolvem a primeira metade.
Releia a tabela de "Erros comuns" desta aula: cada linha dela é um candidato.
Pense em: quantos <h1>? Que nível vem depois de <h1>? O <ul> filho está dentro de um <li>? O target="_blank" está acompanhado? O texto do link diz para onde vai? A tabela tem cabeçalhos de verdade? E o que falta na primeira linha do arquivo?
Boa parte das pessoas que usam a Web não usa mouse: quem navega por teclado, quem usa leitor de tela, quem tem lesão por esforço repetitivo. E buscadores não "veem" CSS nenhum. Hoje você vai usar o site do evento (e um site real) do jeito que eles usam — e descobrir se a estrutura que você escreveu se sustenta sozinha.
Critérios de pronto
No index.html do site do evento, navegue só com o teclado (Tab, Shift+Tab, Enter): registre a ordem em que os links recebem foco e se algum ficou inalcançável.
No Firefox, abra um site real (o da sua universidade ou escola, ou um jornal), desligue os estilos (Exibir → Estilo da página → Sem estilo) e responda: a página ainda faz sentido lida de cima a baixo? Onde a ordem do conteúdo surpreendeu você?
Um parágrafo comparando as duas experiências e apontando uma melhoria concreta que você faria no site real, com o elemento HTML que usaria.
No site do evento, uma melhoria implementada a partir do que você observou. Sugestão: acrescente id="conteudo" ao <main> das cinco páginas (ele ainda não tem) e, como primeiro elemento do <body>, um link <a href="#conteudo">Pular para o conteúdo</a> — sem CSS ele fica visível o tempo todo, e está tudo bem: escondê-lo até receber foco é assunto da Aula 07.
Pistas
A ordem do foco segue a ordem do HTML — não há como mudá-la sem reordenar o código (e é assim que deve ser).
No Chrome não há menu "sem estilo", mas a extensão Web Developer (Chris Pederick) tem CSS → Disable All Styles.
Leitores de tela oferecem uma lista só de títulos e outra só de links. Imagine essa lista para a sua página: os textos de link fazem sentido fora de contexto?
O link "pular para o conteúdo" é o primeiro elemento do <body> em quase todo site bem feito — procure-o com Tab em .
A tabela de status HTTP da Aula 01 tem cinco linhas. Um desenvolvedor consulta esses códigos toda semana — e a maioria dos sites de referência é em inglês. Produza http-referencia.html: uma página que documente os códigos de status HTTP com uma tabela por faixa (1xx a 5xx), com pelo menos 4 códigos por faixa, contendo código, nome em inglês, descrição em português e um exemplo de quando ocorre. Inclua um índice com âncoras internas para cada faixa.
Critérios de pronto
Cinco <section>, uma por faixa, cada uma com <h2> e id, e um índice no topo com âncoras para as cinco.
Cinco tabelas com <caption>, <thead>, <th scope="col"> e pelo menos 4 linhas de dados cada (20 códigos no total).
Pelo menos um código por faixa que não aparece na Aula 01 (por exemplo 418, 429, 451, 307, 206).
Você aprendeu camadas, MPA/SPA e APIs em teoria. Agora aplique em um sistema que você usa todo dia: escolha um (SIGAA, um e-commerce, uma rede social, um app de banco no navegador) e produza um relatório de 2 páginas com: diagrama da arquitetura provável (camadas e componentes), evidências obtidas na aba Network (formatos de resposta, chamadas de API visíveis, uso de CDN identificável pelos domínios), classificação MPA/SPA justificada, e uma proposta fundamentada de como você reorganizaria a arquitetura se precisasse suportar 10× mais usuários.
Critérios de pronto
Um diagrama (papel, Draw.io ou Excalidraw) com pelo menos três camadas e os componentes que você identificou (CDN, API, servidor de aplicação, banco).
Pelo menos cinco evidências da aba Network, cada uma com o que foi observado (URL, Content-Type, domínio) e o que ela indica.
A classificação MPA ou SPA com a evidência decisiva (documento novo a cada clique, ou JSON via Fetch/XHR).
A proposta para 10× mais usuários citando pelo menos duas técnicas da §8 e da §12 da Aula 01 (CDN, cache, separação de camadas, balanceamento).
Pistas
Na aba Network, o filtro Fetch/XHR mostra as chamadas de API; o filtro Doc mostra os documentos HTML. A proporção entre eles já classifica MPA/SPA.
Clique com o botão direito no cabeçalho das colunas e ative Domain: domínios como cdn., static., cloudfront.net, akamaihd.net denunciam CDN.
Respostas com Content-Type: application/json são a camada de aplicação falando; text/html é a camada de apresentação sendo entregue.
Para "10× mais usuários", pense no que é caro (gerar HTML dinâmico, consultar banco) e no que é barato (servir arquivo estático do cache).
A Wikipédia é um dos sites mais bem estruturados da Web: sumário com âncoras, infobox em tabela, seções hierárquicas, notas de rodapé com links de ida e volta. Escolha um artigo em português (sugestão: "HTML" ou "Tim Berners-Lee") e reproduza a sua estrutura integralmente em HTML semântico, sem uma linha de CSS. Ao final, compare a sua versão com o artigo real de estilos desligados: se ficaram parecidos, você entendeu HTML.
Critérios de pronto
Arquivo único exercicios/aula02/wikipedia.html com título, introdução, sumário (<nav> com <ol> de âncoras, incluindo subitens aninhados), pelo menos 6 seções (<h2>) e 4 subseções (<h3>).
A infobox reproduzida como <table> com <caption> e <th scope="row"> em cada linha.
Pelo menos 5 referências: no texto, um link <a href="#ref-1"><sup>[1]</sup></a>; na seção "Referências", uma <ol> com id="ref-1" em cada item e um link de volta ao ponto de citação.
Um <blockquote> com cite e pelo menos uma <figure> com <figcaption> (pode usar uma imagem de https://commons.wikimedia.org/ com alt — a Aula 04 aprofunda).
Zero erros no validador; navegação completa por teclado; o sumário funcionando.
Uma comparação escrita (10 linhas) entre a sua página e o artigo real com estilos desligados no Firefox.
Pistas
Abra o artigo real, pressione Ctrl+U e estude o código-fonte — ele é enorme, mas procure <h2>, <table class="infobox" e <ol class="references".
Para o link de volta na referência, o ponto de citação precisa de um id também: <sup id="cite-1"> e, na referência, <a href="#cite-1">↑</a>.
Sumário aninhado: o <ol> das subseções vai dentro do <li> da seção — o mesmo padrão da §4.
Faça em etapas: estrutura de títulos → sumário → tabela → referências. Valide a cada etapa; um erro de aninhamento no início gera dezenas de mensagens depois.
Parte 1 — Leitura (20 min). SILVA, M. S. Criando sites com HTML, capítulos sobre estrutura do documento e elementos de texto. TERUEL, E. C. HTML5 — Guia Prático, capítulo introdutório. Anote um elemento HTML que apareceu na leitura e não nesta aula, e pesquise o que ele faz na MDN.
Parte 2 — Produção (30 min). Produza o exercício B1 (currículo em HTML semântico), em arquivo .html, acompanhado de captura de tela do validador W3C mostrando "Document checking completed. No errors or warnings to show."
No projeto autoral: replique no seu meu-projeto/ o que o site do evento ganhou hoje — index.html completo (cabeçalho, navegação com as cinco páginas, três seções com <h2>, uma lista ordenada, uma lista de definições, um <blockquote>, rodapé), mais uma página com uma tabela de dados do seu domínio e uma página com <article> por item (o equivalente aos palestrantes).
Parte 3 — Registro (10 min). Escreva, no seu repositório ou no fórum da turma (se houver), uma nota "Semântica importa": encontre um site real com problemas de semântica (uso excessivo de div, títulos fora de ordem, links "clique aqui") e descreva três problemas encontrados com a correção proposta para cada. Se puder, compare com o que outra pessoa encontrou.
Critério de pronto: o currículo e as três páginas do projeto autoral passam no validador com zero erros; a navegação do projeto autoral não leva a nenhum 404.
Guarde:curriculo.html, a captura do validador e a pasta meu-projeto/ — a partir da Aula 15 tudo isso vai para um repositório Git.
web.dev — Learn HTML (em inglês): https://web.dev/learn/html — os capítulos "Document structure", "Semantic HTML", "Headings and sections", "Links" e "Tables".
SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. Novatec, 2008 — capítulos 2 a 5.
TERUEL, Evandro C. HTML 5 — Guia Prático. Saraiva, 2014 — capítulos sobre estrutura e texto (Minha Biblioteca).
MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de software II. Bookman, 2014 — capítulo sobre arquitetura de aplicações web (para os itens A1–A6).
W3C — HTML 5.2 Recommendation: https://www.w3.org/TR/html52/ — seções de elementos de seccionamento e conteúdo de texto.
Na próxima aula, a página de inscrição deixa de ser um esqueleto: você vai aprender o elemento <form>, os tipos de <input>, rótulos, agrupamento, validação nativa e a diferença entre GET e POST — e vai ver, na aba Network, os dados do formulário viajando até o servidor.