Exemplo 1 — Página HTML5 básica com CSS externo
Objetivo
Mostrar a estrutura mínima de um documento HTML5 e como ligar o CSS externo.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 1 - HTML5 com CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Minha Primeira Página com CSS</h1>
<p>Este é um exemplo simples para aprender HTML5 e CSS no VS Code.</p>
</body>
</html>
Arquivo [Link]
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
h1 {
color: darkblue;
}
p {
font-size: 18px;
}
O que esse exemplo ensina
• Estrutura básica do HTML5
• Uso da tag <link> para conectar o CSS
• Estilização do body, h1 e p
Exemplo 2 — Trabalhando com seletor de ID e seletor de classe
Objetivo
Ensinar a diferença entre id e class.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 2 - ID e Classe</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header id="cabecalho-principal">
<h1>Portal da Turma</h1>
</header>
<main>
<p class="texto-comum">Este parágrafo usa uma classe.</p>
<p class="texto-comum">Este também usa a mesma classe.</p>
<p id="paragrafo-especial">Este parágrafo usa um ID.</p>
</main>
</body>
</html>
Arquivo [Link]
body {
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
}
#cabecalho-principal {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px;
}
.texto-comum {
color: #444;
font-size: 18px;
margin: 15px;
}
#paragrafo-especial {
color: white;
background-color: #27ae60;
padding: 10px;
margin: 15px;
}
O que esse exemplo ensina
• #id estiliza um elemento único
• .classe pode ser reutilizada em vários elementos
• Organização visual da página
Exemplo 3 — Box Model na prática
Objetivo
Mostrar conteúdo, padding, border e margin.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 3 - Box Model</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Exemplo do Box Model</h1>
<div class="caixa">
Esta caixa possui conteúdo, espaçamento interno, borda e margem.
</div>
</body>
</html>
Arquivo [Link]
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.caixa {
width: 300px;
padding: 20px;
border: 4px solid #555;
margin: 20px 0;
background-color: #f9f9f9;
}
O que esse exemplo ensina
• width: largura da caixa
• padding: espaço interno
• border: borda
• margin: espaço externo
Exemplo 4 — Menu horizontal com Flexbox
Objetivo
Mostrar como organizar itens em linha com Flexbox.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 4 - Flexbox</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<nav class="nav-container">
<a href="#" class="nav-item">Início</a>
<a href="#" class="nav-item">Sobre</a>
<a href="#" class="nav-item">Serviços</a>
<a href="#" class="nav-item">Contato</a>
</nav>
</body>
</html>
Arquivo [Link]
body {
margin: 0;
font-family: Arial, sans-serif;
}
.nav-container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #333;
padding: 15px;
}
.nav-item {
color: white;
text-decoration: none;
font-weight: bold;
}
.nav-item:hover {
color: yellow;
}
O que esse exemplo ensina
• display: flex
• justify-content
• align-items
• efeito :hover
Exemplo 5 — Layout com cartões usando CSS Grid
Objetivo
Apresentar uma grade simples com cards.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 5 - CSS Grid</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header id="topo">
<h1>Galeria de Cards</h1>
</header>
<main class="container">
<section class="grid-layout">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
</section>
</main>
</body>
</html>
Arquivo [Link]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#topo {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem;
}
.container {
padding: 20px;
}
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.card {
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
padding: 20px;
text-align: center;
border-radius: 8px;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
border-color: #3498db;
}
O que esse exemplo ensina
• display: grid
• grid-template-columns
• gap
• efeito visual nos cards
Esse modelo está alinhado com o exemplo prático da própria apostila.
Exemplo 6 — Formulário simples com HTML5 e CSS
Objetivo
Apresentar campos comuns de formulário e estilização básica.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 6 - Formulário</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="formulario">
<h1>Cadastro de Aluno</h1>
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu
nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="Digite seu
e-mail">
<label for="curso">Curso:</label>
<select id="curso" name="curso">
<option>Ciência da Computação</option>
<option>Sistemas de Informação</option>
<option>Engenharia da Computação</option>
</select>
<button type="submit">Enviar</button>
</form>
</div>
</body>
</html>
Arquivo [Link]
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
padding: 20px;
}
.formulario {
max-width: 400px;
background-color: white;
padding: 20px;
border-radius: 8px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
margin-bottom: 5px;
}
input, select, button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
background-color: #2c3e50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #1a252f;
}
O que esse exemplo ensina
• Formulários em HTML5
• Campos input, select e button
• Organização visual com CSS
Exemplo 7 — Responsividade com Media Query
Objetivo
Mostrar como adaptar o layout conforme o tamanho da tela.
Arquivo [Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo 7 - Responsividade</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="conteudo">
<div class="bloco">Bloco 1</div>
<div class="bloco">Bloco 2</div>
<div class="bloco">Bloco 3</div>
</div>
</body>
</html>
Arquivo [Link]
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.conteudo {
display: flex;
gap: 20px;
}
.bloco {
flex: 1;
padding: 30px;
background-color: lightblue;
text-align: center;
border: 1px solid #333;
}
/* Quando a tela for menor que 768px */
@media (max-width: 768px) {
.conteudo {
flex-direction: column;
}
}
O que esse exemplo ensina
• Conceito de responsividade
• Uso de @media
• Mudança de layout horizontal para vertical
A apostila também enfatiza a importância das media queries para adaptação a diferentes
dispositivos.
Sugestão de uso em sala de aula no VS Code
Uma sequência didática interessante seria:
1. começar com o Exemplo 1, para mostrar a estrutura do HTML5;
2. depois aplicar ID e classe no Exemplo 2;
3. apresentar o Box Model no Exemplo 3;
4. avançar para Flexbox no Exemplo 4;
5. depois trabalhar Grid no Exemplo 5;
6. praticar com formulários no Exemplo 6;
7. finalizar com responsividade no Exemplo 7.
Para uso no laboratório com VS Code
Uma sequência didática interessante seria:
1. começar com o Exemplo 1, para mostrar a estrutura do HTML5;
2. depois aplicar ID e classe no Exemplo 2;
3. apresentar o Box Model no Exemplo 3;
4. avançar para Flexbox no Exemplo 4;
5. depois trabalhar Grid no Exemplo 5;
6. praticar com formulários no Exemplo 6;
7. finalizar com responsividade no Exemplo 7.
Dica prática para laboratório
No VS Code, crie uma pasta para cada exemplo, contendo:
• [Link]
• [Link]
Depois abra o arquivo [Link] no navegador.