Módulo 03 2 semanas

03 - HTML e Fundamentos da Web

Este é o primeiro grande passo rumo ao desenvolvimento web. Aqui a pessoa começa a entender o que acontece quando um site abre no navegador e também aprende a montar a estrutura de uma página com HTML.

Objetivos do módulo

• Entender a diferença entre internet e web.
• Compreender os blocos básicos de uma página web.
• Criar páginas HTML simples e semânticas.
• Desenvolver o hábito de inspecionar e testar no navegador.

Vídeos principais

• Curso HTML5 e CSS3: módulo 1 de 5 [40 Horas] - Curso em Vídeo
• Material oficial de apoio: repositório gustavoguanabara/html-css

Leitura complementar

• Introdução à Web - MDN
• Como a Web funciona - MDN
• Como a Internet funciona? - MDN
• Introdução ao HTML - MDN
• Iniciando com HTML - MDN

Conceitos essenciais

Internet x Web

• Internet é a infraestrutura de comunicação.
• Web é um dos serviços construídos sobre essa infraestrutura.

Cliente e servidor

• O navegador faz o papel de cliente.
• O servidor entrega os arquivos do site.

URL

É o endereço de um recurso na web.

HTML

É a linguagem usada para estruturar o conteúdo da página.

Semântica

É usar a tag certa para a intenção certa.

O que praticar em HTML

• estrutura básica do documento
• títulos e parágrafos
• listas
• links
• imagens
• tabelas simples
• áudio e vídeo quando fizer sentido
• seções semânticas como header, main, section, article, footer

Exercícios práticos

1. Crie um arquivo index.html.
2. Monte a estrutura básica com doctype, html, head e body.
3. Adicione título, subtítulo e parágrafos.
4. Crie uma lista com seus objetivos de estudo.
5. Adicione links para três sites úteis.
6. Insira uma imagem com texto alternativo.
7. Monte uma seção “Sobre mim”.
8. Monte uma seção “O que estou estudando”.
9. Crie um rodapé com data e contato.
10. Use o inspetor do navegador para observar o HTML de um site real.

Projeto do módulo

Projeto: Página Pessoal em HTML

Crie uma página estática com:

• título principal
• foto ou imagem ilustrativa
• seção “quem sou eu”
• seção “metas de estudo”
• lista de interesses
• links úteis
• rodapé

Requisitos mínimos:

• usar HTML semântico
• usar pelo menos uma lista ordenada ou não ordenada
• usar pelo menos três links
• usar pelo menos uma imagem com alt

Checklist de conclusão

• Entendo a diferença entre internet e web.
• Sei o que é URL, navegador, cliente e servidor.
• Consigo criar uma página HTML simples do zero.
• Consigo usar títulos, parágrafos, listas, links e imagens.
• Entendo a importância de HTML semântico.