Mini projeto HTML — site pessoal
Antes, o resumo mapeou o seu toolkit HTML e apontou para aqui como passo de prática. Esta lição não é outro mapa de habilidades. É um brief de construção: planeie três páginas, partilhe uma casca de navegação, preencha conteúdo real e prove o site com uma tabela de aceitação curta.
Por que um mini projeto agora
Resposta direta
1) Crie pelo menos três ficheiros: index.html, about.html, contact.html. 2) Reutilize os mesmos landmarks header/nav/footer com links a funcionar. 3) Intro real no início, história curta no about, formulário name/email/mensagem etiquetado no contact. 4) Uma imagem informativa com alt útil mais lista de skills ou tabela pequena. 5) Tabule com teclado; corrija labels em falta e links partidos. 6) Marque cada linha de aceitação antes de dizer «feito».
📊 Acceptance criteria
| Item | Done when |
|---|---|
| Shared nav | Same landmark links work on every page |
| Semantics | header, nav, main, and footer on each page |
| Home & about | Real paragraphs — not placeholder lorem forever |
| Media | At least one informative image with useful alt |
| Data | A skills list or a small facts table |
| Form | Labeled name, email, message + a real submit button |
| Quality | Keyboard tab order makes sense; no unlabeled controls |
Planeie antes de escrever
Esboce primeiro: nome do site, propósito das três páginas, que foto, que skills/factos. Decida pastas — os três HTML juntos para links relativos simples. Nomeie pessoa/marca uma vez para h1 e title coerentes.
Casca partilhada — comece aqui
Copie header/nav em cada página; só mude o main. Os href relativos devem coincidir com os nomes de ficheiro. Depois um button type=submit real — não finja envio com div vazio.
<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>
Ler a casca
- header+nav+main+footer dão landmarks claros
- aria-label no nav ajuda se houver um segundo nav
- Links relativos unem os três ficheiros
- Repita a casca; só mude main
- Ponha um title curto em cada página
- O resumo listou hábitos — aqui aplicam-se juntos
Starter do formulário de contacto
Contact é onde as skills de formulário encontram o projeto. Emparelhe cada controlo com label visível. Inclua name para um backend futuro. Um submit real no markup mesmo sem post ao servidor ainda.
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>
Ordem de construção que funciona
- Duplique a casca em três ficheiros; corrija a nav até tudo ligar. 2. Escreva intro do início e história about (+ lista/tabela). 3. Uma foto em images/ com src e alt específico. 4. Cole o formulário; confirme labels, names e submit. 5. Abra as três páginas; estreite; tabule até submit. 6. Marque linhas de aceitação — CSS leve depois.
Erros fáceis neste projeto
- Copiar nav uma vez e editar só uma página até os links divergirem
- Campos de contacto só com placeholder sem label
- Tabela de layout para a página toda em vez de landmarks
- alt vazio numa foto com significado
- Deixar lorem e dizer «feito»
- Saltar para frameworks ou CSS pesado antes de validar as três páginas
- Esquecer o hábito do resumo: estrutura e labels primeiro
Resumo
- Esta sessão é um build prático de site pessoal, não outro mapa do curso
- Três páginas partilham header/nav/main/footer com links relativos a funcionar
- Combine media, lista ou tabela e formulário etiquetado
- A tabela de aceitação é a sua definição de feito
- Verifique com teclado antes de polir com CSS
- Tópicos opcionais seguintes (SVG…) são extras — entregue este site primeiro
Lembrete breve
Se ficar preso, volte à tabela de aceitação — não a memorizar tags novas. O objetivo é praticar combinar as skills do curso num site pequeno que abre no browser.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo