# **Tutorial Completo de HTML5 e CSS3: Do Básico ao Avançado**
## **📌 Introdução**
HTML5 e CSS3 são as tecnologias fundamentais para criar websites
modernos. Este tutorial cobrirá desde os conceitos básicos até técnicas
avançadas, com exemplos práticos.
---
# **📝 Parte 1: HTML5 (Estrutura Básica)**
## **1.1 O que é HTML5?**
HTML (*HyperText Markup Language*) é a linguagem de marcação
usada para estruturar conteúdo na web.
### **Estrutura Básica de um Documento HTML5**
```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>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Este é meu primeiro site em HTML5.</p>
</body>
</html>
```
**📌 Explicação:**
- `<!DOCTYPE html>` → Define o tipo de documento como HTML5.
- `<html lang="pt-BR">` → Idioma do site (português do Brasil).
- `<head>` → Contém metadados (título, codificação, etc.).
- `<body>` → Onde fica o conteúdo visível.
---
## **1.2 Principais Tags HTML5**
### **📌 Cabeçalhos**
```html
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Terceiro Nível</h3>
```
*(Vai de `<h1>` a `<h6>`)*
### **📌 Parágrafos e Formatação**
```html
<p>Este é um parágrafo.</p>
<strong>Negrito</strong>
<em>Itálico</em>
<u>Sublinhado</u>
```
### **📌 Links e Imagens**
```html
<a href="https://google.com">Visite o Google</a>
<img src="imagem.jpg" alt="Descrição da Imagem" width="300">
```
### **📌 Listas**
```html
<ul> <!-- Lista não ordenada -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol> <!-- Lista ordenada -->
<li>Primeiro</li>
<li>Segundo</li>
</ol>
```
### **📌 Tabelas**
```html
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
</tr>
</table>
```
### **📌 Formulários**
```html
<form action="/enviar" 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>
<button type="submit">Enviar</button>
</form>
```
---
# **🎨 Parte 2: CSS3 (Estilização)**
## **2.1 O que é CSS3?**
CSS (*Cascading Style Sheets*) é usado para estilizar páginas HTML.
### **Formas de Adicionar CSS**
1. **Inline (no próprio HTML)**
```html
<h1 style="color: blue;">Título Azul</h1>
```
2. **Interno (dentro do `<head>`)**
```html
<style>
h1 { color: red; }
</style>
```
3. **Externo (arquivo `.css` separado)**
```html
<link rel="stylesheet" href="estilo.css">
```
---
## **2.2 Seletores CSS**
### **📌 Seletores Básicos**
```css
p { color: green; } /* Todos os parágrafos */
#destaque { background: yellow; } /* Elemento com id="destaque" */
.classe { font-size: 20px; } /* Elementos com class="classe" */
```
### **📌 Seletores Avançados**
```css
a:hover { color: red; } /* Efeito ao passar o mouse */
input[type="text"] { border: 1px solid #ccc; } /* Atributo específico */
```
---
## **2.3 Propriedades CSS Mais Usadas**
### **📌 Cores e Fundos**
```css
body {
color: #333; /* Cor do texto */
background-color: #f4f4f4; /* Cor de fundo */
background-image: url("fundo.jpg");
}
```
### **📌 Margens e Espaçamento**
```css
div {
margin: 10px; /* Espaço externo */
padding: 15px; /* Espaço interno */
border: 1px solid black;
}
```
### **📌 Fontes e Texto**
```css
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
text-align: center;
text-decoration: underline;
}
```
### **📌 Flexbox (Layout Moderno)**
```css
.container {
display: flex;
justify-content: center; /* Alinhamento horizontal */
align-items: center; /* Alinhamento vertical */
gap: 20px; /* Espaço entre itens */
}
```
### **📌 Grid (Layout Avançado)**
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colunas */
gap: 10px;
}
```
---
# **🚀 Parte 3: Projeto Prático**
## **3.1 Criando um Site Básico**
### **Estrutura HTML**
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Meu Site</h1>
<nav>
<a href="#">Home</a>
<a href="#">Sobre</a>
</nav>
</header>
<main>
<section>
<h2>Bem-vindo!</h2>
<p>Este é um site de exemplo.</p>
</section>
</main>
<footer>
<p>© 2023 Meu Site</p>
</footer>
</body>
</html>
```
### **Estilização CSS (`style.css`)**
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
width: 100%;
}
```
---
# **🎯 Conclusão**
Agora você já sabe:
✅ **HTML5** para estruturação de conteúdo.
✅ **CSS3** para estilização avançada.
✅ **Flexbox e Grid** para layouts responsivos.
**Próximos passos:**
🔹 Aprender **JavaScript** para interatividade.
🔹 Explorar **frameworks como Bootstrap**.
🔹 Praticar criando projetos reais!
**📢 Dica:** Use o [CodePen](https://codepen.io/) ou [JSFiddle]
(https://jsfiddle.net/) para testar códigos online!
🚀 **Boa programação!** 🚀
