HTML CSS E JAVASCRIPT
📚 Guia Completo: HTML, CSS e
JavaScript
HTML, CSS e JavaScript são as três tecnologias fundamentais para o
desenvolvimento web. Juntas, elas permitem criar páginas web completas e
interativas.
🌐 HTML (HyperText Markup Language)
O que é HTML?
HTML é a linguagem de marcação padrão para criar páginas web. Ele define a
estrutura e o conteúdo de uma página através de elementos e tags.
Características Principais:
Linguagem de marcação - não é uma linguagem de programação
Define a estrutura - organiza o conteúdo da página
Usa tags - elementos entre < e >
Fácil de aprender - sintaxe simples e intuitiva
Exemplo Básico de HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Este é meu primeiro parágrafo em HTML.</p>
<a href="[Link] aqui</a>
</body>
</html>
HTML CSS E JAVASCRIPT 1
💡 Importante: Todo documento HTML começa com <!DOCTYPE html> e
é estruturado com as tags <html>, <head> e <body>.
Elementos HTML Essenciais:
Tag Função Exemplo
<h1> até <h6> Cabeçalhos <h1>Título Principal</h1>
<p> Parágrafo <p>Texto aqui</p>
<a> Link <a href="url">Clique</a>
<img> Imagem <img src="[Link]">
<div> Container <div>Conteúdo</div>
<ul> e <li> Lista <ul><li>Item</li></ul>
Exemplo de Página HTML Completa:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, init
ial-scale=1.0">
<title>Exemplo Completo</title>
</head>
<body>
<header>
<h1>Bem-vindo ao Meu Site</h1>
<nav>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
<main>
HTML CSS E JAVASCRIPT 2
<section id="home">
<h2>Página Inicial</h2>
<p>Este é o conteúdo principal da página.</p>
<img src="[Link]" alt="Descrição da imagem">
</section>
<section id="sobre">
<h2>Sobre Nós</h2>
<p>Informações sobre a empresa ou pessoa.</p>
</section>
</main>
<footer>
<p>© 2026 Meu Site. Todos os direitos reservad
os.</p>
</footer>
</body>
</html>
🎨 CSS (Cascading Style Sheets)
O que é CSS?
CSS é a linguagem usada para estilizar documentos HTML. Ele controla a
aparência visual, layout, cores, fontes e responsividade das páginas web.
Características Principais:
Separa conteúdo de apresentação - mantém o código organizado
Controla o design visual - cores, fontes, espaçamentos
Permite responsividade - adaptação a diferentes telas
Usa seletores - para aplicar estilos a elementos específicos
Formas de Adicionar CSS:
1. CSS Inline - Diretamente na tag HTML
<p style="color: blue; font-size: 20px;">Texto azul</p>
HTML CSS E JAVASCRIPT 3
⚠️ Não recomendado - dificulta manutenção
2. CSS Interno - Na tag <style> dentro do <head>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
✓ Melhor que inline - mas apenas para páginas pequenas
3. CSS Externo - Arquivo separado .css
<head>
<link rel="stylesheet" href="[Link]">
</head>
✓✓✓ Mais recomendado - reutilizável e organizado
Sintaxe CSS:
seletor {
propriedade: valor;
outra-propriedade: valor;
}
💡 Estrutura: Seletor identifica o elemento, propriedade define o que
modificar, e valor especifica como modificar.
Exemplo Completo de CSS:
/* Estilos Gerais */
body {
font-family: Arial, sans-serif;
HTML CSS E JAVASCRIPT 4
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Cabeçalho */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Títulos */
h1 {
color: #ff6b6b;
font-size: 36px;
margin-bottom: 10px;
}
h2 {
color: #4ecdc4;
border-bottom: 2px solid #4ecdc4;
padding-bottom: 5px;
}
/* Parágrafos */
p {
color: #555;
line-height: 1.6;
margin: 15px 0;
}
/* Links */
a {
color: #3498db;
text-decoration: none;
transition: color 0.3s;
HTML CSS E JAVASCRIPT 5
}
a:hover {
color: #e74c3c;
text-decoration: underline;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Botões */
.btn {
background-color: #2ecc71;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #27ae60;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Responsividade */
@media (max-width: 768px) {
.grid {
HTML CSS E JAVASCRIPT 6
grid-template-columns: 1fr;
}
}
Propriedades CSS Mais Usadas:
Categoria Propriedades Exemplo
Cores color, background-color color: #ff0000;
Texto font-size, font-family, text-align font-size: 16px;
Espaçamento margin, padding margin: 10px;
Bordas border, border-radius border: 1px solid black;
Layout display, position, flexbox, grid display: flex;
Dimensões width, height width: 100%;
Exemplo de Página HTML + CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdan
a, sans-serif;
background: linear-gradient(135deg, #667eea 0%,
#764ba2 100%);
margin: 0;
padding: 20px;
}
.card {
background: white;
max-width: 600px;
margin: 50px auto;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
HTML CSS E JAVASCRIPT 7
h1 {
color: #667eea;
text-align: center;
margin-bottom: 20px;
}
p {
color: #555;
line-height: 1.8;
}
.btn {
background: #667eea;
color: white;
padding: 12px 30px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
display: block;
margin: 20px auto 0;
transition: all 0.3s;
}
.btn:hover {
background: #764ba2;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="card">
<h1> 🎨
Exemplo de CSS</h1>
<p>Este é um exemplo de como o CSS transforma uma p
ágina HTML simples em algo visualmente atraente!</p>
<p>Com CSS, você pode controlar cores, fontes, espa
HTML CSS E JAVASCRIPT 8
çamentos, animações e muito mais.</p>
<button class="btn">Clique Aqui</button>
</div>
</body>
</html>
⚡ JavaScript
O que é JavaScript?
JavaScript é a linguagem de programação da web. Ela permite criar páginas
interativas, manipular conteúdo dinamicamente e responder a ações do
usuário.
Características Principais:
Linguagem de programação completa - com lógica, loops, funções
Executa no navegador - interação em tempo real
Manipula o DOM - modifica HTML e CSS dinamicamente
Eventos - responde a cliques, digitação, movimento do mouse
Assíncrono - requisições a servidores sem recarregar a página
Formas de Adicionar JavaScript:
1. JavaScript Inline - Diretamente em atributos HTML
<button onclick="alert('Olá!')">Clique</button>
⚠️ Não recomendado - mistura código com conteúdo
2. JavaScript Interno - Na tag <script>
<script>
function mostrarMensagem() {
alert('Olá, Mundo!');
}
</script>
HTML CSS E JAVASCRIPT 9
✓ Bom para scripts pequenos
3. JavaScript Externo - Arquivo separado .js
<script src="[Link]"></script>
✓✓✓ Mais recomendado - organizado e reutilizável
Conceitos Fundamentais:
Variáveis - Armazenam dados
// Três formas de declarar variáveis
let nome = "João"; // Pode ser alterada
const idade = 25; // Não pode ser alterada (cons
tante)
var cidade = "São Paulo"; // Forma antiga (evite usar)
[Link](nome); // Exibe: João
Use let para variáveis que mudam e const para valores fixos.
Tipos de Dados
// Números
let idade = 25;
let preco = 19.99;
// Strings (texto)
let nome = "Maria";
let sobrenome = 'Silva';
// Booleanos (verdadeiro/falso)
let ativo = true;
let logado = false;
// Arrays (listas)
let frutas = ["maçã", "banana", "laranja"];
HTML CSS E JAVASCRIPT 10
// Objetos
let pessoa = {
nome: "João",
idade: 30,
cidade: "Rio de Janeiro"
};
Funções - Blocos de código reutilizáveis
// Declaração de função tradicional
function somar(a, b) {
return a + b;
}
// Arrow function (ES6+)
const multiplicar = (a, b) => a * b;
// Usando as funções
let resultado1 = somar(5, 3); // 8
let resultado2 = multiplicar(4, 2); // 8
[Link](resultado1, resultado2);
Funções são essenciais para organizar e reutilizar código.
Condicionais - Tomam decisões
let idade = 18;
if (idade >= 18) {
[Link]("Você é maior de idade");
} else {
[Link]("Você é menor de idade");
}
// Operador ternário (forma curta)
HTML CSS E JAVASCRIPT 11
let status = idade >= 18 ? "adulto" : "menor";
// Switch
let dia = 3;
switch(dia) {
case 1:
[Link]("Segunda");
break;
case 2:
[Link]("Terça");
break;
case 3:
[Link]("Quarta");
break;
default:
[Link]("Outro dia");
}
Loops - Repetem ações
// For loop
for (let i = 0; i < 5; i++) {
[Link]("Número: " + i);
}
// While loop
let contador = 0;
while (contador < 3) {
[Link]("Contador: " + contador);
contador++;
}
// ForEach (para arrays)
let nomes = ["Ana", "Bruno", "Carlos"];
[Link](nome => {
[Link]("Olá, " + nome);
});
HTML CSS E JAVASCRIPT 12
Manipulação do DOM:
O DOM (Document Object Model) é a representação da página HTML que o
JavaScript pode manipular.
// Selecionar elementos
let titulo = [Link]("titulo");
let botoes = [Link](".btn");
let primeiro = [Link]("p");
// Modificar conteúdo
[Link] = "Novo Título";
[Link] = "<strong>Título em Negrito</strong>";
// Modificar estilos
[Link] = "red";
[Link] = "32px";
// Adicionar/remover classes
[Link]("destaque");
[Link]("antiga");
[Link]("ativo");
// Criar novos elementos
let novoParagrafo = [Link]("p");
[Link] = "Novo parágrafo criado!";
[Link](novoParagrafo);
Eventos:
Eventos permitem que o JavaScript responda a ações do usuário.
// Evento de clique
let botao = [Link]("meuBotao");
[Link]("click", function() {
alert("Botão clicado!");
});
// Evento de mouse hover
HTML CSS E JAVASCRIPT 13
[Link]("mouseenter", function() {
[Link] = "blue";
});
[Link]("mouseleave", function() {
[Link] = "gray";
});
// Evento de formulário
let formulario = [Link]("meuForm");
[Link]("submit", function(e) {
[Link](); // Previne envio padrão
let nome = [Link]("nome").value;
[Link]("Nome digitado: " + nome);
});
// Evento de teclado
[Link]("keydown", function(e) {
[Link]("Tecla pressionada: " + [Link]);
});
Exemplo Completo HTML + CSS + JavaScript:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, init
ial-scale=1.0">
<title>Exemplo Interativo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: #f0f0f0;
}
HTML CSS E JAVASCRIPT 14
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.contador {
font-size: 48px;
text-align: center;
color: #667eea;
margin: 30px 0;
font-weight: bold;
}
.botoes {
display: flex;
justify-content: center;
gap: 10px;
}
button {
background: #667eea;
color: white;
border: none;
padding: 15px 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
HTML CSS E JAVASCRIPT 15
button:hover {
background: #5568d3;
transform: translateY(-2px);
}
[Link] {
background: #e74c3c;
}
[Link]:hover {
background: #c0392b;
}
.input-section {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid #eee;
}
input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
margin: 10px 0;
}
input:focus {
outline: none;
border-color: #667eea;
}
#mensagem {
text-align: center;
margin-top: 15px;
color: #27ae60;
font-weight: bold;
HTML CSS E JAVASCRIPT 16
}
</style>
</head>
<body>
<div class="container">
<h1> 🎯
Contador Interativo</h1>
<div class="contador" id="contador">0</div>
<div class="botoes">
<button id="btnDiminuir"> ➖
Diminuir</button>
<button id="btnAumentar"> ➕
Aumentar</button>
<button class="reset" id="btnReset"> 🔄
Resetar
</button>
</div>
<div class="input-section">
<h2> 📝
Digite seu nome:</h2>
<input type="text" id="inputNome" placeholder
="Digite aqui...">
<div id="mensagem"></div>
</div>
</div>
<script>
// Variáveis
let contador = 0;
// Selecionar elementos
const displayContador = [Link]('co
ntador');
const btnAumentar = [Link]('btnAum
entar');
const btnDiminuir = [Link]('btnDim
inuir');
const btnReset = [Link]('btnRese
t');
const inputNome = [Link]('inputNom
HTML CSS E JAVASCRIPT 17
e');
const mensagem = [Link]('mensage
m');
// Função para atualizar o display
function atualizarContador() {
[Link] = contador;
// Mudar cor baseado no valor
if (contador > 0) {
[Link] = '#27ae60';
} else if (contador < 0) {
[Link] = '#e74c3c';
} else {
[Link] = '#667eea';
}
}
// Evento: Aumentar
[Link]('click', function() {
contador++;
atualizarContador();
});
// Evento: Diminuir
[Link]('click', function() {
contador--;
atualizarContador();
});
// Evento: Resetar
[Link]('click', function() {
contador = 0;
atualizarContador();
});
// Evento: Input de texto
[Link]('input', function() {
HTML CSS E JAVASCRIPT 18
const nome = [Link];
if ([Link] > 0) {
[Link] = `Olá, ${nome}! Bem-v
indo(a)! 👋 `;
} else {
[Link] = '';
}
});
// Atalhos de teclado
[Link]('keydown', function(e) {
if ([Link] === 'ArrowUp') {
contador++;
atualizarContador();
} else if ([Link] === 'ArrowDown') {
contador--;
atualizarContador();
} else if ([Link] === 'r' || [Link] === 'R') {
contador = 0;
atualizarContador();
}
});
</script>
</body>
</html>
💡 Como funciona este exemplo:
HTMLcria a estrutura (títulos, botões, input)
CSSestiliza tudo (cores, espaçamentos, animações)
JavaScriptadiciona interatividade (contador, mensagens, eventos)
🔗 Como HTML, CSS e JavaScript Trabalham Juntos
As três tecnologias são complementares e trabalham em camadas:
HTML CSS E JAVASCRIPT 19
🏗️ HTML 🎨 CSS ⚡ JavaScript
Camada de Conteúdo Camada de Camada de
Define a estrutura Apresentação Comportamento
Organiza o conteúdo Estiliza os elementos Adiciona
Define layouts interatividade
Cria elementos
semânticos Controla cores e Manipula elementos
Base da página fontes Responde a eventos
Torna responsivo Comunica com
servidores
Exemplo de Integração:
<!DOCTYPE html>
<html>
<head>
<style>
.caixa {
width: 200px;
height: 200px;
background: #3498db;
margin: 50px auto;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
cursor: pointer;
transition: all 0.3s;
}
.caixa:hover {
transform: scale(1.1);
}
HTML CSS E JAVASCRIPT 20
.[Link] {
background: #e74c3c;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="caixa" id="minhaCaixa">
Clique em mim!
</div>
<script>
const caixa = [Link]('minhaCaix
a');
[Link]('click', function() {
[Link]('ativa');
if ([Link]('ativa')) {
[Link] = 'Clique novamente!';
} else {
[Link] = 'Clique em mim!';
}
});
</script>
</body>
</html>
Neste exemplo:
HTML cria a estrutura da caixa com <div>
CSS estiliza a caixa (cor, tamanho, animações)
JavaScript adiciona a interação de clique e muda a classe
📊 Comparação e Quando Usar
Tecnologia Tipo Função Principal Aprenda Primeiro?
HTML CSS E JAVASCRIPT 21
HTML
Linguagem de Estrutura e ✅ SIM - Comece por
Marcação conteúdo aqui
CSS Linguagem de Estilo Aparência visual
✅ SIM - Segundo
passo
JavaScript
Linguagem de Interatividade e ✅ SIM - Terceiro
Programação lógica passo
🎯 Ordem de Aprendizado Recomendada:
1. HTML primeiro - Aprenda a estrutura básica de páginas web
2. CSS em seguida - Aprenda a estilizar o que você criou com HTML
3. JavaScript por último - Adicione interatividade às suas páginas
🚀 Recursos e Próximos Passos
Para Continuar Aprendendo:
W3Schools HTML - Tutorial completo de HTML com exemplos práticos
W3Schools CSS - Aprenda todos os conceitos de CSS
W3Schools JavaScript - Do básico ao avançado em JavaScript
Dicas Importantes:
✨ Dicas de Ouro:
Pratique muito!A prática é essencial para aprender
Comece com projetos simplese vá aumentando a complexidade
Use as ferramentas de desenvolvedor do navegador(F12) para
experimentar
Não tenha medo de errar- erros fazem parte do aprendizado
Consulte a documentaçãosempre que tiver dúvidas
Ferramentas Úteis:
Editor de Código: VS Code, Sublime Text, ou qualquer editor de sua
preferência
Navegador: Chrome, Firefox (com DevTools)
HTML CSS E JAVASCRIPT 22
Validadores: W3C Validator para checar seu código
GitHub: Para versionar e compartilhar seus projetos
✅ Explicação feita
HTML CSS E JAVASCRIPT 23