0% acharam este documento útil (0 voto)

14 visualizações23 páginas

HTML e CSS

Enviado por

darcydeoliveirajunior

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

14 visualizações23 páginas

HTML e CSS

Enviado por

darcydeoliveirajunior

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 23

Módulo 1 – Introdução ao HTML

O que é HTML?

HTML (HyperText Markup Language) é a linguagem base da web. Ele estrutura o

conteúdo de páginas da internet.

● HTML não é linguagem de programação. É de marcação: define o que é

cada coisa, não o que ela faz

Estrutura básica de um arquivo HTML:

<!DOCTYPE html>

<html>

<head>

<title>Minha Primeira Página</title>

</head>

<body>

<h1>Olá, mundo!</h1>

<p>Essa é minha primeira página HTML.</p>

</body>

</html>

Explicando:

● <!DOCTYPE html>: Informa ao navegador que o documento é HTML5.

● <html>: Envolve todo o conteúdo da página.

● <head>: Contém metadados (informações da página).

● <title>: Define o título da aba do navegador.

● <body>: Tudo que aparecerá visualmente na página.

Tags mais comuns para conteúdo:

Tag Função

<h1> a <h6> Títulos (h1 = mais importante)

<p> Parágrafo

<br> Quebra de linha

<hr> Linha horizontal (divisor)

<strong> Deixa o texto em negrito (semântico)

<em> Dá ênfase (itálico semântico)

Exemplo:
<body>
<h1>Bem-vindo ao meu site!</h1>
<p>Esse site foi criado por mim. <strong>Estou aprendendo
HTML!</strong></p>
<p>Legal, né?<br>Vamos continuar.</p>
<hr>
</body>

Exercício 1 – Crie sua primeira página:

Crie um arquivo chamado index.html com o seguinte conteúdo:

1. Um título com seu nome.

2. Um parágrafo contando o que você está aprendendo.

3. Um segundo parágrafo explicando por que quer aprender HTML.

4. Uma linha horizontal separando os conteúdos.

Módulo 2 – Listas, Links e Imagens
Agora que você já entende a estrutura básica de uma página HTML, vamos aprender três
elementos fundamentais para enriquecer seu conteúdo:

1. Listas

Lista não ordenada – <ul> (unordered list)

Exibe itens com marcadores (•):

<h2>Minhas linguagens favoritas:</h2>

<ul>

<li>JavaScript</li>

</ul>

Lista ordenada – <ol> (ordered list)

Exibe itens numerados:

<h2>Passos para criar um site:</h2>

<ol>

<li>Aprender HTML</li>

<li>Estudar CSS</li>

<li>Praticar JavaScript</li>

</ol>
2. Links – <a>
Permite criar hiperlinks para outras páginas ou sites.

Estrutura:
<a href="URL">Texto clicável</a>

Exemplos:

<p>Visite meu <a href="https://github.com/seuusuario"

target="_blank">GitHub</a></p>

<a href="contato.html">Ir para a página de contato</a>

Dica: target="_blank" abre o link em nova aba.

3. Imagens – <img>
Exibe imagens de forma visual.

Estrutura:
<img src="caminho/da-imagem.jpg" alt="Descrição da imagem">

src: Caminho da imagem (pode ser URL ou local)

alt: Texto alternativo (aparece se a imagem falhar ou para acessibilidade)

Exemplo:

<img src="https://via.placeholder.com/200" alt="Imagem de exemplo">

Exercício 2 – Crie um currículo simples

Crie um novo arquivo curriculo.html com os seguintes elementos:

1.Seu nome no <h1>

2. Um parágrafo com uma breve descrição sua

3.Uma lista ordenada com suas experiências anteriores

4.Uma lista não ordenada com suas habilidades

5.Um link para seu LinkedIn ou portfólio

6. Uma imagem sua (use um link ou uma imagem qualquer da internet)

Módulo 3 – Tabelas e Formulários

1. Tabelas – <table>

Estrutura básica:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fulano</td>
<td>28</td>
<td>Curitiba</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
<td>São Paulo</td>
</tr>
</tbody>
</table>

Tags usadas:

Tag Função
<table> Define a tabela

<tr> Linha da tabela (table row)

<th> Cabeçalho (table header – negrito)

<td> Dado da tabela (table data)

<thead> Cabeçalho da tabela (organização)

<tbody> Corpo da tabela

Exercício 3 – Criando uma Tabela de Produtos

Objetivo: Praticar a criação de tabelas HTML utilizando as principais tags.

Crie uma página HTML que contenha uma tabela com os dados de produtos de uma
loja. A tabela deve seguir o seguinte modelo:

Produto Categoria Preço Em

Estoque

Notebook Dell Informática R$3500 Sim

Geladeira Eletrodoméstico R$2300 Não

Consul

Cadeira Gamer Móveis R$850 Sim

Requisitos:

1. Use as tags <table>, <thead>, <tbody>, <tr>, <th> e <td>.

2. O cabeçalho da tabela deve estar dentro da tag <thead>.

3. Os dados dos produtos devem estar dentro da tag <tbody>.

4. Utilize pelo menos 3 linhas de produtos.

5. A tabela deve ter 4 colunas: Produto, Categoria, Preço, Em Estoque.

Módulo 4 – Semântica e Boas Práticas

HTML semântico significa usar as tags certas para cada tipo de conteúdo. Isso ajuda
na acessibilidade, no SEO (Google entende melhor sua página) e na manutenção do
código.

1. HTML Semântico
Tags semânticas principais:

Tag Função

<header> Cabeçalho do site ou seção

<nav> Navegação (menus, links)

<main> Conteúdo principal da página

<section> Seção de conteúdo (como capítulos ou blocos)

<article> Conteúdo independente (ex: post de blog, notícia)

<aside> Conteúdo lateral (ex: barra lateral, anúncios)

<footer> Rodapé do site ou seção

<figure> + <figcaption> Imagem com legenda associada

Exemplo de página semântica:

<h1>Blog do Seu Nome</h1>

<nav>

<a href="index.html">Início</a>

<a href="contato.html">Contato</a>

</nav>

</header>

<main>

<h2>Como estou aprendendo HTML</h2>

<p>Estou usando um curso passo a passo. Está sendo

ótimo!</p>

</article>

</section>

<aside>

<h3>Sobre mim</h3>

<p>Sou um desenvolvedor em aprendizado!</p>

</aside>

</main>

<p>© 2025 Seu Nome</p>

</footer>

</body>

2. Boas práticas em HTML

Use:

● Tags semânticas (<main>, <section>, etc.)

● Texto alternativo nas imagens (alt)

● Código indentado corretamente

● Textos organizados em parágrafos, listas, títulos

● Letras minúsculas nas tags HTML

● Comentários para organizar:

Evite:

● Usar <div> para tudo (“divzite”)

● Usar <br> várias vezes para espaçamento (use CSS)

● Nomear arquivos com espaço (prefira: meu-curriculo.html)

Exercício 4 – Página semântica pessoal

Crie um arquivo chamado sobre-mim.html com:

1. <header> com seu nome e navegação com links fictícios

○ Navegação com <nav>
○ Links com <a href=”./index.html”>
2. <main> com:

○ Uma <section> contendo um <article> com seu texto de apresentação

○ Um <aside> com seus hobbies ou curiosidades

3. <footer> com seu nome, ano e direitos autorais

4. Use pelo menos 5 tags semânticas

Módulo 5 – Introdução ao CSS

CSS (Cascading Style Sheets) é a linguagem usada para definir cores, fontes, tamanhos,
espaçamentos e até animações nas páginas HTML.

1. Como aplicar CSS

● Inline (dentro da tag)

<p style="color: red;">Texto em vermelho</p>

Evite usar muito — útil apenas para testes rápidos.

● Interno (dentro do HTML, na tag <style>)

<head>

<style>

p {

color: blue;

</style>

</head>

● Externo (arquivo separado .css) – Recomendado

1. Crie um arquivo chamado estilos.css
2. Linke no HTML:

2. Seletores básicos

Por tag:
body {
background-color: #f0f0f0;
}

Por classe (class="destaque"):

.destaque {
color: red;
}

Por id (id="titulo"):
#titulo {
font-size: 24px;
}

Use classes para elementos repetidos e ids para únicos.

3. Propriedades mais usadas

Propriedade O que faz

color Cor do texto

background-color Cor de fundo

font-size Tamanho da fonte

font-family Tipo de fonte (ex: Arial, Verdana)

margin Espaço externo

padding Espaço interno

border Borda do elemento

text-align Alinhamento do texto (left, center)

4. Exemplo prático

HTML (index.html)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Primeira Página Estilizada</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1 class="titulo">Olá, mundo!</h1>
<p class="destaque">Essa é a minha primeira página com CSS.</p>
</body>
</html>

CSS (estilos.css)
body {
background-color: #fafafa;
font-family: Arial, sans-serif;
}

.titulo {
color: darkblue;
text-align: center;
}

.destaque {
color: darkred;
font-size: 18px;
}

Exercício 5 – Página Estilizada

Crie:

● Um arquivo pagina.html com um título e dois parágrafos

● Um arquivo estilo.css com:

○ Cor de fundo clara

○ Cor de texto escura

○ Fonte diferente

○ Título centralizado e com cor diferente

○ Espaçamento entre os parágrafos (usando margin ou padding)

Módulo 6 – Layout com CSS: Box Model e Flexbox

Tudo no HTML é uma "caixa". Este módulo vai te ensinar como controlar o
tamanho, espaçamento e posicionamento dessas caixas de forma elegante e
responsiva.

1. Entendendo o Box Model (Modelo de Caixa)

Cada elemento HTML é tratado como uma caixa com 4 partes:
Exemplo:
.caixa {

width: 200px;

padding: 20px;

border: 2px solid black;

margin: 30px;

Display: block, inline, inline-block, flex

display O que faz

block Ocupa uma linha inteira (ex: <div>)

inline Ocupa só o conteúdo (ex: <span>)

inline-block Como inline, mas aceita width e height

flex Organiza os filhos em linha ou coluna (Flexbox)

📚 Atividade de Revisão – Módulos Anteriores

Objetivo:

Colocar em prática tudo o que você aprendeu até agora!

🚀 Instruções:
1. Crie um arquivo chamado projeto-revisao.html.

2. Neste arquivo, monte uma página simples contendo:

● Um título principal da página.

● Um parágrafo explicando sobre um tema que você goste (pode ser

jogo, filme, esporte, etc).

● Uma imagem relacionada ao tema (pode ser da internet).

● Uma lista com pelo menos 3 itens.

● Um link que leve para outro site.

3. Use a tag <style> dentro do mesmo arquivo para adicionar um

pouco de CSS:

● Dê uma cor de fundo para o fundo da página.

● Dê uma cor de fundo para o parágrafo ou para a lista.

● Altere o tamanho (largura e altura) de algum elemento.

● Coloque padding, borda e margem em algum item (por exemplo, o

parágrafo ou a imagem).

🧠 Dica:
Você já viu todas as tags e estilos necessários para isso, então tente fazer
sozinho(a)!
O importante não é ficar perfeito, mas sim praticar o que foi aprendido.

📘 Atividade de Casa – Módulo 6: Layout com CSS (Box Model)

Objetivo:
Você vai praticar a criação de caixas no HTML e controlar o tamanho, as bordas e os
espaços entre elas usando o Box Model.

🚀 Passo a passo da atividade:

1. Crie um arquivo chamado index.html.

2. Dentro do body, crie 3 caixas usando a tag <div>.

3. No arquivo separado, crie o style.css, aplique as seguintes regras para as

caixas:

● Dê um tamanho fixo para as caixas com width e height.

● Coloque uma cor de fundo usando background.

● Coloque um espaçamento interno com padding.

● Adicione uma borda visível com border.

● Coloque um espaçamento externo entre as caixas com margin.

4. Use display: block para que as caixas fiquem uma embaixo da outra.

✏️ Exemplo do que você deve fazer (em palavras):

● Crie uma caixa azul de 200x200 pixels com uma borda preta, padding de 20px e
margin de 30px.

⚠️ Não copie código pronto. Tente escrever sozinho(a).

Use só HTML e CSS simples.

🧠 Dica:
Lembre-se:
O modelo de caixa tem tamanho (width/height), espaço dentro da caixa (padding), a
borda (border) e o espaço fora da caixa (margin).
3. Layout com Flexbox
Exemplo básico:
Html

</div>

Css

.container {

display: flex;

.item {

background-color: lightblue;

padding: 20px;

margin: 10px;

Principais propriedades Flex:

Propriedade O que faz

display: flex; Ativa o flex container

flex-direction Direção (row, column)

justify-content Alinhamento horizontal (center, space-between)

align-items Alinhamento vertical (center, flex-start, etc.)

flex-wrap Permite quebrar linha (wrap)

gap Espaço entre os itens

Exemplo de layout com Flexbox

HTML

<div>Início</div>

<div>Sobre</div>

<div>Contato</div>

</div>

CSS

.menu {
display: flex;

justify-content: space-around;

background-color: #222;

color: white;

padding: 15px;

Exercício 6 – Mini site com Flexbox

1. Crie um arquivo layout.html

2. Crie um header, um main com 3 caixas lado a lado e um footer

3. Use CSS com display: flex para:

○ Colocar as 3 caixas lado a lado (colunas)

○ Centralizar o conteúdo horizontalmente

○ Adicionar padding, margin e gap entre os elementos

Dica: use .container { display: flex; } e estilize os filhos com

.item.

Módulo 7 – Responsividade com Media Queries e

Unidades Relativas

1. O que é um site responsivo?

É um site que se adapta ao tamanho da tela, seja ela pequena (celular) ou grande
(monitor). O conteúdo se reorganiza para manter a boa usabilidade.
2. Unidades relativas vs absolutas
Unidades absolutas (fixas):

Unidade Significado

px Pixels

cm Centímetros