Apostila: Prática de HTML e CSS
Prof. Andracir Alves Oliveira
Introdução
Neste curso, você aprenderá a criar páginas web usando HTML (para
estrutura) e CSS (para estilização). Cada módulo inclui teoria e prática para
que você possa aplicar imediatamente o que aprendeu.
Módulo 1: Estrutura Básica do HTML
Objetivo:
Compreender a estrutura de uma página HTML e criar seu primeiro arquivo.
Conceitos:
1. Tags HTML:
o <html>: Define o documento HTML.
o <head>: Contém metadados da página.
o <body>: Contém o conteúdo visível da página.
2. Estrutura básica de um documento HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Bem-vindo ao HTML!</h1>
<p>Esta é minha primeira página web.</p>
</body>
</html>
Atividade Prática:
1. Crie um arquivo chamado index.html.
2. Copie o código acima e salve o arquivo.
3. Abra o arquivo em um navegador e veja o resultado.
Módulo 2: Introdução ao CSS
Objetivo:
Entender como o CSS estiliza o HTML e aplicar estilos básicos.
Conceitos:
1. O que é CSS?
o CSS (Cascading Style Sheets) é usado para estilizar páginas
HTML.
2. Formas de usar CSS:
o Inline:
o <p style="color: blue;">Texto azul</p>
o Interno:
o <style>
o body {
o background-color: lightgray;
o }
o </style>
o Externo:
o <link rel="stylesheet" href="estilos.css">
3. Exemplo de um arquivo CSS:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p{
color: darkgray;
}
Atividade Prática:
1. Crie um arquivo chamado estilos.css.
2. Adicione o código CSS acima.
3. Vincule o CSS ao HTML usando:
4. <link rel="stylesheet" href="estilos.css">
5. Abra o arquivo HTML no navegador e veja as alterações.
Módulo 3: Trabalhando com Tags HTML
Objetivo:
Conhecer e usar tags comuns do HTML.
Tags Comuns:
1. Títulos:
2. <h1>Título 1</h1>
3. <h2>Título 2</h2>
4. <h3>Título 3</h3>
5. Parágrafos e Quebras de Linha:
6. <p>Este é um parágrafo.</p>
7. <br>
8. Imagens:
9. <img src="imagem.jpg" alt="Descrição da imagem">
10. Links:
11. <a href="https://www.google.com" target="_blank">Visite o Google</a>
Atividade Prática:
1. Adicione várias tags ao seu arquivo HTML e observe o resultado.
Módulo 4: Trabalhando com CSS
Objetivo:
Aprender as principais propriedades do CSS e criar designs mais elaborados.
Propriedades Comuns:
1. Cor e Fonte:
2. h1 {
3. color: red;
4. font-size: 32px;
5. font-family: 'Times New Roman', serif;
6. }
7. Espaçamento:
8. p {
9. margin: 20px;
10. padding: 10px;
11. }
12. Bordas:
13. div {
14. border: 1px solid black;
15. border-radius: 10px;
16. }
17. Layouts com Flexbox:
18. .container {
19. display: flex;
20. justify-content: center;
21. align-items: center;
22. }
Atividade Prática:
1. Crie uma página com um layout simples usando CSS e Flexbox.
Flexbox (abreviação de Flexible Box Layout) é um método moderno de layout do
CSS usado para organizar e alinhar elementos em uma página de forma eficiente,
especialmente em layouts responsivos. Ele é projetado para trabalhar com caixas
(divs, parágrafos, etc.) e distribuir espaço entre elas de maneira flexível, adaptando-se
ao tamanho da tela.
Projeto Final
Objetivo:
Construir uma página web completa combinando HTML e CSS.
Requisitos:
1. Uma página com:
o Título e subtítulo.
o Um menu de navegação.
o Conteúdo principal com texto e imagens.
o Um rodapé.
2. Estilização com CSS para:
o Cores e espaçamentos personalizados.
o Layout responsivo.
Exemplo Simples:
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projeto Final</title>
<link rel="stylesheet" href="projeto.css">
</head>
<body>
<header>
<h1>Meu Projeto Final</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Bem-vindo!</h2>
<p>Este é um exemplo de página web.</p>
</section>
<img src="imagem.jpg" alt="Imagem Exemplo">
</main>
<footer>
<p>© 2025 - Meu Site</p>
</footer>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 20px;
}
nav ul {
list-style: none;
display: flex;
gap: 15px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px;
}
ATIVIDADE:
Faça uma pagina com HTML e CSS que contenha os seguintes elementos:
A pagina que cada dupla fará, de acordo com o tema escolhido, com HTML e
CSS deve ter:
• Uma estrutura clara e organizada.
• Elementos visuais como imagens e seções bem definidas.
• Estilo responsivo e visualmente agradável.
• Boa acessibilidade para todos os usuários.
• Deve conter pelo menos os elementos abaixo.
1. Estrutura Básica
1. Doctype e Tag HTML
o Define o tipo de documento e estrutura básica.
html
CopiarEditar
<!DOCTYPE html>
<html lang="pt-BR">
</html>
2. Cabeçalho (<head>)
o Metadados, título, e links externos.
html
CopiarEditar
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página</title>
<link rel="stylesheet" href="estilos.css">
</head>
3. Corpo (<body>)
o Contém todo o conteúdo visível.
2. Elementos Essenciais
1. Título Principal (<header> e <h1>)
o Um cabeçalho claro e bem estruturado.
html
CopiarEditar
<header>
<h1>Bem-vindo ao Meu Site</h1>
</header>
2. Menu de Navegação (<nav>)
o Links para as seções da página.
html
CopiarEditar
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
3. Seções de Conteúdo (<section> e <article>)
o Divida o conteúdo em partes lógicas.
html
CopiarEditar
<section id="sobre">
<h2>Sobre Nós</h2>
<p>Somos especialistas em desenvolvimento web.</p>
</section>
4. Imagens (<img>)
o Para tornar a página visualmente atraente.
html
CopiarEditar
<img src="imagem.jpg" alt="Descrição da imagem">
5. Rodapé (<footer>)
o Informações de rodapé, como direitos autorais ou links úteis.
html
CopiarEditar
<footer>
<p>© 2025 Meu Site. Todos os direitos reservados.</p>
</footer>
3. Estilização Essencial com CSS
1. Estilo Global
o Define fonte, margens e cores gerais.
css
CopiarEditar
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
2. Layout Responsivo
o Usando Flexbox ou Grid para organizar o layout.
css
CopiarEditar
header, nav, footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
nav ul {
list-style: none;
display: flex;
gap: 15px;
}
nav a {
text-decoration: none;
color: #333;
}
3. Estilização de Links
o Para melhorar a navegação.
css
CopiarEditar
a{
color: blue;
}
a:hover {
color: darkblue;
text-decoration: underline;
}
4. Imagens Responsivas
o Garantir que imagens se ajustem ao tamanho da tela.
css
CopiarEditar
img {
max-width: 100%;
height: auto;
}
4. Elementos de Acessibilidade
1. Texto Alternativo para Imagens (alt)
o Descreve a imagem para usuários que usam leitores de tela.
html
CopiarEditar
<img src="logo.png" alt="Logotipo da empresa">
2. Títulos Claros e Hierárquicos
o Use <h1>, <h2>, etc., em ordem lógica para facilitar a leitura.
html
CopiarEditar
<h1>Página Principal</h1>
<h2>Seção</h2>
3. Navegação Fácil
o Links claros e fáceis de acessar.
5. Projeto Completo
HTML:
html
CopiarEditar
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Bem-vindo ao Meu Site</h1>
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="sobre">
<h2>Sobre Nós</h2>
<p>Este é um site de exemplo para aprender HTML e CSS.</p>
</section>
<section id="contato">
<h2>Contato</h2>
<p>Envie-nos uma mensagem!</p>
</section>
</main>
<footer>
<p>© 2025 Meu Site. Todos os direitos reservados.</p>
</footer>
</body>
</html>
CSS:
css
CopiarEditar
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: white;
padding: 10px 20px;
text-align: center;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 15px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px 0;
}
