Introdução ao HTML, CSS e JavaScript - Guia para Iniciantes
Apostila Completa · Desenvolvimento Web
HTML, CSS &
JavaScript
do zero ao projeto
Guia completo: da origem do HTML aos projetos práticos com JavaScript — com exemplos interativos para testar no navegador.
🏗 HTML5
🎨 CSS3
⚡ JavaScript
📖 19 Capítulos
✅ 2 Projetos
📖 Sumário — 19 Capítulos
01O que é HTML?
02História do HTML
03Estrutura Básica
04Tags e Elementos
05Formatação de Texto
06Listas em HTML
07Links e Imagens
08Tabelas em HTML
09Formulários HTML
10HTML5 e Semântica
11O que é CSS?
12O que é JavaScript?
13Exemplo Integrado
14Projeto: Contador
15Projeto: Formulário JS
16Por que <script> no final?
17Separação e Boas Práticas
18Ferramentas Úteis
19Próximos Passos
Progresso de leitura
0%
Esta apostila apresenta os conceitos fundamentais do desenvolvimento web de forma progressiva — da estrutura básica do HTML até a integração completa com CSS e JavaScript, com projetos práticos que você pode testar diretamente no navegador.
Camada
HTML
Define a estrutura e o conteúdo — títulos, parágrafos, imagens, links.
Camada
CSS
Controla a aparência visual — cores, tamanhos, layout, responsividade.
Camada
JavaScript
Adiciona interatividade — cliques, validações, atualizações dinâmicas.
Cap. 01
O que é HTML?
HyperText Markup Language · A base de toda a Web
HTML significa HyperText Markup Language. Vamos entender cada parte desse nome:
Parte 1
HyperText
Capacidade de criar links entre documentos, permitindo navegação entre páginas diferentes.
Parte 2
Markup
"Marcações" ou tags que estruturam e definem o conteúdo da página.
Parte 3
Language
Linguagem padronizada com regras e sintaxe específicas que os navegadores entendem.
💡 Importante
HTML NÃO é uma linguagem de programação! É uma linguagem de marcação — define o que aparece na página, mas não executa lógica ou cálculos como JavaScript ou Python.
O HTML é usado para:
- 📰Estruturar páginas: cabeçalhos, parágrafos, listas, tabelas
- 🔗Criar links que conectam páginas e recursos da internet
- 🖼Inserir mídias: imagens, vídeos e áudios
- 📋Criar formulários para interação do usuário (login, cadastro)
- 🎨Fornecer a estrutura que será estilizada pelo CSS e dinamizada pelo JavaScript
Cap. 02
História do HTML
De 1991 ao presente · A evolução da linguagem da Web
Conhecer a história do HTML ajuda a entender sua evolução. Tudo começou com uma necessidade simples: compartilhar documentos científicos entre pesquisadores ao redor do mundo.
1991
1991
Criação — Tim Berners-Lee / CERN
Tim Berners-Lee criou o HTML no CERN como parte do projeto World Wide Web, com o objetivo de facilitar o compartilhamento de documentos científicos via hiperlinks.
1995
1995
HTML 2.0 — Primeira especificação oficial
Publicada pela IETF, formalizou o padrão com suporte a formulários, imagens e tabelas básicas.
1997
1997–1999
HTML 3.2 e 4.0 — W3C assume o padrão
O W3C passou a gerenciar o HTML. Versão 4.0 trouxe suporte a CSS, scripts e maior separação entre estrutura e apresentação.
2014
2014
HTML5 — A versão moderna
Suporte nativo a áudio, vídeo, canvas, geolocalização, localStorage e novas tags semânticas. É o padrão utilizado até hoje.
hoje
Hoje
HTML Living Standard — Evolução contínua
Mantido pelo WHATWG como um living standard, o HTML evolui continuamente sem versões fixas, incorporando novos recursos conforme a web moderna.
🌍 Curiosidade
A primeira página web do mundo, criada por Tim Berners-Lee em 1991, ainda está online em info.cern.ch — é extremamente simples, mas representa o início de tudo que conhecemos como internet!
Cap. 03
Estrutura Básica de um Documento HTML
DOCTYPE · html · head · body · Anatomia completa
Todo documento HTML segue uma estrutura padrão. Esta é a base que todo desenvolvedor web precisa conhecer:
HTML · Estrutura mínima
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minha Primeira Página</title> </head> <body> <h1>Olá, Mundo!</h1> <p>Este é o meu primeiro documento HTML.</p> </body> </html>
| Elemento | Descrição |
|---|---|
<!DOCTYPE html> | Informa que é HTML5. Deve ser sempre a primeira linha do arquivo. |
<html lang="pt-BR"> | Elemento raiz. O atributo lang indica o idioma — importante para SEO e acessibilidade. |
<head> | Metadados, título, links para CSS. O conteúdo aqui NÃO aparece visualmente na página. |
<meta charset="UTF-8"> | Codificação de caracteres — suporta acentos, cedilha e emojis. |
<meta name="viewport"> | Configura responsividade em dispositivos móveis. Essencial! |
<title> | Título que aparece na aba do navegador. Muito importante para SEO. |
<body> | Contém todo o conteúdo visível da página (textos, imagens, vídeos, etc.). |
Cap. 04
Tags e Elementos HTML
Anatomia das tags · Tipos · Atributos
Tags são comandos escritos entre < e > que dizem ao navegador como exibir o conteúdo.
🔬 Anatomia de um Elemento HTML
Um elemento HTML é: tag de abertura + atributos (opcionais) + conteúdo + tag de fechamento.
HTML · Anatomia e tipos de tags
<p class="destaque">Este é um parágrafo</p> ↑ Abertura ↑ Atributo ↑ Conteúdo ↑ Fechamento /* 1 — Tags Pareadas (com conteúdo) */ <h1>Título Principal</h1> <p>Parágrafo de texto</p> <strong>Texto em negrito</strong> /* 2 — Tags Auto-Fechadas (sem conteúdo) */ <br> <!-- Quebra de linha --> <hr> <!-- Linha horizontal --> <img src="imagem.jpg" alt="Descrição"> <input type="text">
📌 Atributos
Atributos fornecem informações adicionais às tags. Sempre na tag de abertura no formato nome="valor". Exemplos: id, class, href, src, alt, style.
Cap. 05
Formatação de Texto
Títulos · Parágrafos · Negrito · Itálico · Marcação · Código
HTML oferece 6 níveis de títulos (h1 a h6) e diversas tags para formatar texto com significado semântico:
HTML · Títulos e formatação
<!-- Hierarquia de títulos --> <h1>Título Principal (h1)</h1> <h2>Subtítulo (h2)</h2> <h3>Seção (h3)</h3> <!-- Formatação semântica --> <strong>Texto importante (negrito semântico)</strong> <em>Texto com ênfase (itálico semântico)</em> <mark>Texto marcado (como marca-texto)</mark> <code>printf("Hello World");</code> <s>Texto riscado</s> <u>Texto sublinhado</u> <!-- Quebras --> Primeira linha<br>Segunda linha <hr> <!-- Linha horizontal separadora -->
⚠ Boas práticas com títulos
- Use apenas um <h1> por página (título principal)
- Siga a hierarquia — não pule níveis (h1 → h2 → h3)
- Títulos são importantes para SEO e acessibilidade
- Prefira
<strong>a<b>: tem significado semântico para leitores de tela
Cap. 06
Listas em HTML
ul · ol · dl · Listas aninhadas
HTML oferece três tipos principais de listas para organizar informações:
HTML · Tipos de lista
<!-- 1. Lista Não Ordenada (ul) — com marcadores --> <ul> <li>Maçã</li> <li>Banana</li> </ul> <!-- 2. Lista Ordenada (ol) — numerada --> <ol> <li>Abrir o navegador</li> <li>Digitar a URL</li> <li>Pressionar Enter</li> </ol> <!-- 3. Lista de Definição (dl) --> <dl> <dt>HTML</dt> <dd>Linguagem de Marcação de Hipertexto</dd> <dt>CSS</dt> <dd>Folhas de Estilo em Cascata</dd> </dl> <!-- 4. Lista Aninhada --> <ul> <li>Frutas <ul> <li>Maçã</li> <li>Banana</li> </ul> </li> </ul>
Cap. 07
Links e Imagens
Tag <a> · Tag <img> · Atributos essenciais
HTML · Links
<a href="https://www.google.com">Ir para o Google</a> <a href="contato.html">Entre em Contato</a> <a href="https://exemplo.com" target="_blank" rel="noopener">Nova aba</a> <a href="mailto:contato@email.com">Enviar E-mail</a> <a href="#secao-contato">Ir para Contato</a>
| Atributo | Descrição |
|---|---|
href | Destino do link (URL, arquivo, e-mail ou âncora interna) |
target="_blank" | Abre em nova aba |
title | Dica ao passar o mouse |
rel="noopener" | Segurança ao abrir links externos em nova aba |
HTML · Imagens
<img src="foto.jpg" alt="Descrição da foto"> <img src="logo.png" alt="Logo" width="200" height="100"> <a href="pagina.html"><img src="banner.jpg" alt="Clique aqui"></a>
⚠ Sempre use o atributo ALT!
- Acessibilidade: leitores de tela descrevem a imagem para pessoas com deficiência visual
- SEO: mecanismos de busca entendem o conteúdo da imagem
- Fallback: exibe texto caso a imagem não carregue
- 📷.jpg — Fotos com boa compressão
- 🎨.png — Imagens com transparência, logos
- 📐.svg — Gráficos vetoriais escaláveis sem perda
- ⚡.webp — Formato moderno com melhor compressão (recomendado!)
Cap. 08
Tabelas em HTML
table · thead · tbody · tfoot · colspan · rowspan
Tabelas organizam dados em linhas e colunas — ideais para notas, horários e relatórios.
HTML · Estrutura completa de tabela
<table> <thead> <tr> <th>Nome</th> <th>Idade</th> <th>Cidade</th> </tr> </thead> <tbody> <tr> <td>João Silva</td> <td>25</td> <td>São Paulo</td> </tr> <tr> <td>Maria Santos</td> <td>30</td> <td>Rio de Janeiro</td> </tr> </tbody> <tfoot> <tr><td colspan="3">Total: 2 registros</td></tr> </tfoot> </table>
- ↔
colspan="n"— Faz a célula ocupar N colunas (mesclagem horizontal) - ↕
rowspan="n"— Faz a célula ocupar N linhas (mesclagem vertical)
💡 Dica moderna
A formatação visual (cores, bordas, espaçamentos) deve ser feita com CSS, não com atributos HTML. O HTML define apenas a estrutura dos dados!
Cap. 09
Formulários HTML
form · input · label · select · textarea · button
Formulários permitem que usuários insiram e enviem dados — base de cadastros, logins, pesquisas e qualquer captura de informação.
HTML · Formulário completo
<form action="processar.php" method="POST"> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" required> <label for="email">E-mail:</label> <input type="email" id="email" name="email" required> <label for="senha">Senha:</label> <input type="password" id="senha" name="senha"> <label for="mensagem">Mensagem:</label> <textarea id="mensagem" name="mensagem" rows="4"></textarea> <label for="curso">Curso:</label> <select id="curso" name="curso"> <option value="informatica">Informática</option> <option value="administracao">Administração</option> </select> <button type="submit">Enviar</button> </form>
💡 Sempre use <label>
Associar <label for="id"> a cada campo é fundamental para acessibilidade e melhora a usabilidade — clicar no label já foca o campo correspondente.
Cap. 10
HTML5 e Elementos Semânticos
header · nav · main · article · section · aside · footer
HTML5 introduziu tags semânticas que atribuem significado ao conteúdo, melhorando SEO e acessibilidade.
HTML5 · Tags semânticas
<header> <h1>Meu Site</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> </ul> </nav> </header> <main> <article> <!-- conteúdo independente: post, artigo --> <h2>Título do Artigo</h2> <p>Conteúdo...</p> </article> <section> <!-- seção temática --> <h2>Seção</h2> </section> </main> <aside> <!-- barra lateral, conteúdo complementar --> <h3>Artigos Relacionados</h3> </aside> <footer> <p>© 2025 Meu Site.</p> </footer>
- 🎵Áudio e vídeo nativos —
<audio>e<video>sem plugins - 🎨Canvas — gráficos e animações 2D via JavaScript
- 📍Geolocalização — API
navigator.geolocation - 💾LocalStorage — armazenamento no navegador sem cookies
Benefício
SEO
Mecanismos de busca entendem melhor a estrutura e importância do conteúdo.
Benefício
Acessibilidade
Leitores de tela navegam mais facilmente pelo conteúdo semântico.
Benefício
Manutenção
Código mais legível e fácil de manter por qualquer desenvolvedor.
Cap. 11
O que é CSS?
Cascading Style Sheets · Aparência & Layout
CSS (Cascading Style Sheets) define a aparência visual. Enquanto o HTML estrutura o conteúdo, o CSS define como ele será exibido.
- 🎨Cores de fundo, texto, bordas e elementos
- 📐Tamanhos, margens, espaçamentos e dimensões
- 🗂Layout — Flexbox, Grid, posicionamento
- 📱Responsividade para diferentes tamanhos de tela
- ✨Animações e transições
CSS
h1 { color: blue; font-size: 30px; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; } button:hover { background-color: #2f5557; }
Cap. 12
O que é JavaScript?
A linguagem de interatividade da Web
JavaScript transforma páginas estáticas em aplicações dinâmicas e interativas, respondendo às ações do usuário em tempo real.
- 🖱Criar ações ao clicar em botões e elementos
- ✅Validar campos de formulários antes do envio
- 🔄Atualizar conteúdo sem recarregar a página (DOM)
- 📦Criar aplicações completas: frontend, backend (Node.js), mobile
JavaScript
// Adiciona ação ao clique document.querySelector("button").onclick = function() { alert("Você clicou no botão!"); }; // Arrow function (sintaxe moderna) document.querySelector("button").addEventListener("click", () => { alert("Clique detectado!"); });
As três tecnologias com papéis bem definidos:
Camada
HTML
Define a estrutura e o conteúdo.
Camada
CSS
Controla a aparência visual.
Camada
JavaScript
Adiciona interatividade.
Cap. 13
Exemplo Completo Integrado
HTML + CSS + JavaScript em um único arquivo
HTML + CSS + JS
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Exemplo Completo</title> <style> body { text-align: center; margin-top: 50px; } button { padding: 10px; background-color: #38686a; color: white; border: none; border-radius: 5px; } </style> </head> <body> <h1>Exemplo Integrado</h1> <button onclick="mostrarMensagem()">Clique</button> <p id="mensagem"></p> <script> function mostrarMensagem() { document.getElementById("mensagem").innerText = "HTML, CSS e JavaScript funcionando juntos!"; } </script> </body> </html>
Cap. 14
Projeto 1 — Contador de Cliques
Manipulação do DOM · variável de estado · eventos
A cada clique, incrementamos uma variável e atualizamos o texto na tela. Teste abaixo:
Demo interativo▶ Ao vivo
Total de cliques
0
HTML + JavaScript
<button onclick="incrementar()">Clique</button> <p id="contador">Total: 0</p> <script> let total = 0; function incrementar() { total++; document.getElementById("contador").innerText = "Total: " + total; } </script>
🧠 O que acontece
let total = 0 declara a variável. ++ incrementa 1 a cada chamada. innerText atualiza o texto do elemento no DOM.
Cap. 15
Projeto 2 — Validação de Formulário
Regex · eventos · feedback visual
Verificamos campos antes do envio ao servidor e exibimos feedback imediatamente:
Demo interativo▶ Ao vivo
JavaScript · Validação com Regex
function validarFormulario() { let nome = document.getElementById("nome").value.trim(); let email = document.getElementById("email").value.trim(); let telefone = document.getElementById("telefone").value.trim(); let emailValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; let telefoneValido = /^[0-9]{10,}$/; if (nome === "") { mensagem.innerHTML = "⚠ Nome obrigatório"; return false; } if (!emailValido.test(email)) { mensagem.innerHTML = "⚠ Email inválido"; return false; } if (!telefoneValido.test(telefone)) { mensagem.innerHTML = "⚠ Telefone inválido"; return false; } mensagem.innerHTML = "✅ Formulário validado com sucesso!"; return false; }
Cap. 16
Por que o JavaScript fica no final?
Performance · DOM ready · carregamento
- 1Melhor performanceO navegador pausa a renderização ao encontrar um script. Com ele no final, o usuário vê a página mais rápido.
- 2DOM já carregadoSe o JS tentar acessar um elemento não lido ainda, ocorre erro (
null). No final, todos os elementos já existem.
⚠ Alternativa moderna
Use defer no <head>: <script src="app.js" defer></script> — carrega em paralelo e executa após o HTML ser lido.
Cap. 17
Separação e Boas Práticas
Separation of Concerns · Checklist de qualidade HTML
HTML · index.html
Estrutura
- Conteúdo da página
- Links para .css e .js
- Tags semânticas
CSS · style.css
Aparência
- Cores e tipografia
- Layout e espaçamento
- Animações
JS · script.js
Comportamento
- Eventos e ações
- Manipulação do DOM
- Lógica e validações
- Estrutura básica completa:
<!DOCTYPE>,<html>,<head>,<body> - Meta charset UTF-8 e meta viewport definidos
- Título descritivo na tag
<title> - Hierarquia correta de títulos (h1 → h2 → h3, sem pular)
- Atributo
altem todas as imagens - Labels associados a todos os campos de formulário
- Links com texto descritivo (evite "clique aqui")
- Indentação consistente (2 ou 4 espaços)
- Tags semânticas HTML5 usadas em vez de
<div>genérico
Cap. 18
Ferramentas Úteis
Editores · Navegadores · DevTools · Validadores
- 🖊Visual Studio Code — Editor gratuito e poderoso. Recomendação principal para iniciantes e profissionais
- 🌐Google Chrome + DevTools (F12) — Inspecionar elementos, depurar JS, testar responsividade
- 🌐Firefox Developer Edition — Focado especialmente em desenvolvimento web
- 📚MDN Web Docs (developer.mozilla.org) — Documentação oficial e completa de HTML, CSS e JS
- 📚W3Schools — Tutoriais interativos com exemplos editáveis
- ✅W3C Markup Validator (validator.w3.org) — Valida HTML e aponta erros de sintaxe
- ✅Can I Use (caniuse.com) — Compatibilidade de recursos com diferentes navegadores
Cap. 19
O que você aprendeu & Próximos Passos
Consolidação · Roadmap de desenvolvimento web
- O que é HTML, CSS e JavaScript e seus papéis
- A história e evolução do HTML (1991 ao presente)
- Estrutura completa de documentos HTML com tabela de referência
- Tags de texto, listas, links, imagens, tabelas e formulários
- Elementos semânticos do HTML5
- Estilização com CSS e interatividade com JavaScript
- Boas práticas, separação de arquivos e ferramentas
Continue evoluindo:
💪 Pratique!
A melhor forma de aprender é construindo projetos reais. Crie sua página pessoal, um blog, um cardápio de restaurante, um currículo online. Todo desenvolvedor profissional começou exatamente onde você está agora!
Comentários