**Documento Completo: Introdução ao Front-End com HTML e CSS**
> **Objetivo**: Ensinar, de forma clara, prática e detalhada, como criar páginas web usando
**HTML (estrutura)** e **CSS (estilo)** — as duas tecnologias essenciais do desenvolvimento
front-end.
---
## 1. O que é Front-End?
**Front-End** é a parte **visível e interativa** de um site ou aplicação web — aquilo que o
usuário vê e com o qual interage diretamente no navegador (como botões, menus, textos,
imagens, formulários etc.).
As três pilares do front-end são:
1. **HTML** → Estrutura da página
2. **CSS** → Estilo visual (cores, layout, fontes)
3. **JavaScript** → Comportamento e interatividade *(não abordado aqui, mas importante
saber que existe)*
Neste documento, vamos focar **apenas em HTML e CSS**, do básico ao intermediário.
---
## 2. O que é HTML?
**HTML** significa **HyperText Markup Language** (Linguagem de Marcação de Hipertexto).
Ele **não é uma linguagem de programação**, mas sim uma **linguagem de marcação**
usada para estruturar o conteúdo de uma página web.
### ✅ Características do HTML:
- Usa **tags** (ou elementos) para definir partes do conteúdo.
- É lido por navegadores (Chrome, Firefox, Edge etc.).
- Funciona mesmo sem internet (arquivos `.html` locais).
---
## 3. Estrutura Básica de um Documento HTML
Todo documento HTML válido começa com esta estrutura:
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Página</title>
</head>
<body>
<!-- Conteúdo visível vai aqui -->
<h1>Olá, mundo!</h1>
<p>Este é um parágrafo.</p>
</body>
</html>
```
### Explicação linha por linha:
| Linha | Função |
|------|--------|
| `<!DOCTYPE html>` | Declara que este é um documento HTML5 (versão moderna). |
| `<html lang="pt-BR">` | Elemento raiz; define o idioma como português do Brasil. |
| `<head>` | Contém metadados (informações invisíveis ao usuário, mas importantes para o
navegador e SEO). |
| `<meta charset="UTF-8">` | Define a codificação de caracteres (permite acentos, ç, etc.). |
| `<meta name="viewport"...>` | Torna a página responsiva (boa em celulares). |
| `<title>` | Define o título que aparece na aba do navegador. |
| `<body>` | Tudo dentro dele será exibido na página. |
---
## 4. Principais Tags HTML (com exemplos)
### **Tags de Texto**
| Tag | Função | Exemplo |
|-----|--------|--------|
| `<h1> a <h6>` | Cabeçalhos (h1 = mais importante) | `<h1>Título Principal</h1>` |
| `<p>` | Parágrafo | `<p>Este é um texto normal.</p>` |
| `<strong>` | Negrito (ênfase semântica) | `<strong>Importante!</strong>` |
| `<em>` | Itálico (ênfase) | `<em>Destaque aqui</em>` |
| `<br>` | Quebra de linha | `Linha 1<br>Linha 2` |
| `<hr>` | Linha horizontal (divisória) | `<hr>` |
### **Listas**
```html
<!-- Lista ordenada (numérica) -->
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>
<!-- Lista não ordenada (com marcadores) -->
<ul>
<li>Maçã</li>
<li>Banana</li>
</ul>
```
### **Links e Imagens**
```html
<!-- Link externo -->
<a href="[Link] o site</a>
<!-- Link para email -->
<a href="[Link] e-mail</a>
<!-- Imagem -->
<img src="[Link]" alt="Descrição da imagem">
```
> **Importante**: O atributo `alt` é obrigatório por acessibilidade (leitores de tela usam
essa descrição).
### **Tabelas**
```html
<table border="1">
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>25</td>
</tr>
</tbody>
</table>
```
### **Formulários (muito usados!)**
```html
<form action="/enviar" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br><br>
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha"><br><br>
<input type="submit" value="Enviar">
</form>
```
> - `label` vincula texto ao campo (`for` = `id` do input).
> - `type` define o tipo de dado (text, email, password, number, date, etc.).
### **Divisões e Seções**
- `<div>` → Container genérico (sem significado semântico).
- `<section>` → Seção temática (ex: "Sobre", "Contato").
- `<header>` → Cabeçalho da página ou seção.
- `<footer>` → Rodapé.
- `<nav>` → Menu de navegação.
- `<main>` → Conteúdo principal.
> ✅ Use tags semânticas sempre que possível — elas ajudam leitores de tela e motores de
busca!
---
## 5. O que é CSS?
**CSS** (Cascading Style Sheets) é a linguagem usada para **estilizar** páginas HTML: cores,
fontes, espaçamentos, layouts, animações etc.
Sem CSS, seu site seria só texto preto em fundo branco.
---
## 6. Como Incluir CSS em uma Página?
### Opção 1: **Estilo inline** (não recomendado)
```html
<p style="color: red; font-size: 20px;">Texto vermelho</p>
```
### Opção 2: **Tag `<style>` no `<head>`**
```html
<head>
<style>
p{
color: blue;
font-family: Arial;
</style>
</head>
```
### Opção 3: **Arquivo externo** (✅ melhor prática!)
```html
<head>
<link rel="stylesheet" href="[Link]">
</head>
```
> Crie um arquivo chamado `[Link]` na mesma pasta do HTML.
---
## 7. Sintaxe Básica do CSS
```css
seletor {
propriedade: valor;
outra-propriedade: valor;
```
Exemplo:
```css
h1 {
color: #2c3e50;
font-size: 32px;
text-align: center;
```
---
## 8. Seletores CSS Comuns
| Seletor | Exemplo | O que seleciona |
|--------|--------|------------------|
| `h1` | `h1 { ... }` | Todos os `<h1>` |
| `.classe` | `.destaque { ... }` | Elementos com `class="destaque"` |
| `#id` | `#topo { ... }` | Elemento com `id="topo"` (único!) |
| `p strong` | `p strong { ... }` | `<strong>` dentro de `<p>` |
| `*` | `* { margin: 0; }` | Todos os elementos |
> Dica: Prefira **classes** para estilizar vários elementos iguais. Use **IDs** apenas para
elementos únicos (ex: âncoras de rolagem).
---
## 9. Propriedades CSS Mais Usadas
### Cores e Fundos
```css
color: #ff0000; /* vermelho */
background-color: #f0f0f0;
background-image: url('[Link]');
```
### Fontes
```css
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
```
### Espaçamento (Box Model)
Todo elemento tem:
- **content** (conteúdo)
- **padding** (espaço interno)
- **border** (borda)
- **margin** (espaço externo)
```css
.caixa {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px auto; /* centraliza */
```
### Layout Básico
```css
/* Alinhar elementos em linha */
display: inline;
/* Bloco com largura definida */
display: block;
/* Moderno: Flexbox (recomendado!) */
.container {
display: flex;
justify-content: space-between;
align-items: center;
/* Grid (para layouts complexos) */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
```
### Responsividade (Mobile First!)
Use **media queries**:
```css
/* Estilo padrão (móvel) */
.coluna {
width: 100%;
/* Em telas maiores que 768px */
@media (min-width: 768px) {
.coluna {
width: 50%;
}
```
---
## 10. Exemplo Prático Completo
### Arquivo: `[Link]`
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Site</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="cabecalho">
<h1>Bem-vindo ao Meu Site</h1>
<nav>
<a href="#sobre">Sobre</a> |
<a href="#contato">Contato</a>
</nav>
</header>
<main>
<section id="sobre">
<h2>Sobre Mim</h2>
<p>Sou estudante de eletrônica e telecomunicações, apaixonado por tecnologia e soluções
open-source.</p>
</section>
<section id="contato">
<h2>Contato</h2>
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" required><br>
<label for="email">E-mail:</label>
<input type="email" id="email" required><br>
<button type="submit">Enviar</button>
</form>
</section>
</main>
<footer>
<p>© 2026 – Todos os direitos reservados.</p>
</footer>
</body>
</html>
```
### Arquivo: `[Link]`
```css
/* Reset básico */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f9f9f9;
color: #333;
padding: 20px;
.cabecalho {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
.cabecalho nav a {
color: #ecf0f1;
text-decoration: none;
margin: 0 10px;
.cabecalho nav a:hover {
text-decoration: underline;
main {
max-width: 800px;
margin: 30px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
margin: 20px 0 10px;
color: #2980b9;
form {
margin-top: 15px;
label {
display: block;
margin-top: 10px;
input {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
```
> ✅ Esse exemplo já é **responsivo**, **acessível** e usa boas práticas!
---
## 11. Dicas Finais
1. **Valide seu HTML**: use [[Link]
2. **Use o DevTools**: clique com o botão direito → "Inspecionar" no Chrome.
3. **Pratique todos os dias**: crie pequenos projetos (currículo, página de receitas, etc.).
4. **Aprenda Flexbox e Grid**: são essenciais para layouts modernos.
5. **Não copie código sem entender**: digite tudo à mão para fixar.
---
## 12. Próximos Passos (Depois do HTML + CSS)
- Aprender **JavaScript** (interatividade)
- Estudar **frameworks CSS** como Bootstrap ou Tailwind
- Explorar **pré-processadores** como Sass
- Criar sites **responsivos e acessíveis**
- Publicar seu site com **GitHub Pages** (grátis!)