Se você quer começar no desenvolvimento web, dominar HTML e CSS é o primeiro passo. Essas duas linguagens são a base de todo site na internet e entender como elas funcionam abre portas para criar suas próprias páginas e até seguir carreira na área.
Neste guia, você vai aprender de forma prática e direta os fundamentos de HTML e CSS, com exemplos e dicas para começar do zero.
🧱 O Que é HTML?
HTML (HyperText Markup Language) é a linguagem de marcação usada para estruturar o conteúdo de uma página na web.
Com HTML, você define:
- Títulos e parágrafos
- Imagens e vídeos
- Links e botões
- Listas, tabelas e formulários
Exemplo básico de HTML:
htmlCopiarEditar<!DOCTYPE html>
<html>
<head>
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Bem-vindo ao meu site.</p>
</body>
</html>
🎨 O Que é CSS?
CSS (Cascading Style Sheets) é a linguagem usada para estilizar o conteúdo criado com HTML.
Com CSS, você define:
- Cores
- Fontes
- Espaçamento
- Layouts e responsividade
Exemplo básico de CSS:
cssCopiarEditarbody {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
}
h1 {
color: #007bff;
text-align: center;
}
🧩 Como HTML e CSS Trabalham Juntos?
Você escreve o HTML para criar a estrutura e usa o CSS para deixar tudo bonito. Eles funcionam juntos em harmonia.
Forma de incluir CSS no HTML:
htmlCopiarEditar<head>
<style>
h1 {
color: red;
}
</style>
</head>
Ou, de forma mais profissional, com um arquivo CSS separado:
htmlCopiarEditar<link rel="stylesheet" href="estilos.css">
📄 Estrutura Básica de uma Página Web
htmlCopiarEditar<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exemplo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Minha Página</h1>
</header>
<main>
<p>Conteúdo principal vai aqui.</p>
</main>
<footer>
<p>© 2025 Meu Nome</p>
</footer>
</body>
</html>
🛠️ Principais Tags HTML
| Tag | Função |
|---|---|
<h1> a <h6> | Títulos |
<p> | Parágrafo |
<a> | Link |
<img> | Imagem |
<ul>, <ol>, <li> | Listas |
<div> | Container genérico |
<form>, <input>, <button> | Formulários |
🎯 Principais Propriedades CSS
| Propriedade | O que faz |
|---|---|
color | Cor do texto |
background-color | Cor de fundo |
font-size | Tamanho da fonte |
margin | Espaço externo |
padding | Espaço interno |
border | Borda |
display | Tipo de exibição (block, flex…) |
🔄 Responsividade com CSS
Use media queries para deixar o site adaptado ao celular:
cssCopiarEditar@media (max-width: 768px) {
h1 {
font-size: 20px;
}
}
🧪 Como Praticar?
- Use sites como CodePen ou JSFiddle
- Instale o VS Code para praticar localmente
- Crie mini projetos: página de perfil, formulário de contato, currículo online
- Pesquise no MDN Web Docs
✅ Dicas Finais
- Comece copiando e adaptando sites simples
- Use boas práticas de indentação e organização
- Compreenda a hierarquia dos elementos HTML
- Experimente! A melhor forma de aprender é testando
Conclusão
Aprender HTML e CSS é o primeiro passo para entrar no mundo do desenvolvimento web. Com dedicação, você será capaz de criar páginas profissionais do zero, com estrutura sólida e visual atrativo.
Esse conhecimento também é essencial para quem deseja seguir para JavaScript, frameworks ou até back-end no futuro.
