HTML > CSS
<--! Williames Camilo -->
HTML
01 Oque é HTML
HMTL 02 Estrutura Básica
03 Principais Tags e Atributos
HTML
• Utilizada para criar e estruturar páginas web
• Organizar o conteúdo através de tags
(HyperText Markup Language)
• Definir o significado de apresentação da página
HTML
Função: Estruturar o conteúdo das páginas web.
Não é uma linguagem de programação, mas de marcação.
Metáfora Visual: “HTML é o esqueleto da página web.”
Por que o HTML é
Importante?
HTML
Base para qualquer página web.
Trabalha com CSS (estilo) e JavaScript (interatividade)
Compatível com todos os navegadores.
Estrutura Básica de uma Página HTML
HTML
● <!DOCTYPE>: Define o tipo de documento.
Componentes ● <html>: Raiz da página.
● <head>: Metadados (título, charset).
● <body>: Conteúdo visível.
<tag>Conteúdo</tag>
TAGS HTML
Tags = Elementos que definem ● Abertura: <tag>
o conteúdo.
● Fechamento: </tag>
● Tag Simples: <tag atributo=“”>
TAGS
DE ESTRUTURAÇÃO
TAGS DE ESTRUTURAÇÃO
Categoria Tag Descrição
<!DOCTYPE> Define o tipo e a versão do documento (ex.: HTML5).
<html> Tag raiz que envolve todo o conteúdo HTML.
Estrutura
<head> Contém metadados do documento (não visível).
Básica
<title> Define o título da página (exibido na aba do navegador).
<body> Contém o conteúdo visível da página.
TAGS DE ESTRUTURAÇÃO
Categoria Tag Descrição
<header> Define o cabeçalho da página ou seção (ex.: logo, menus).
<nav> Define uma seção de navegação (links).
<main> Define o conteúdo principal da página (1 por documento).
Conteúdo <section> Define seções do conteúdo (ex.: blocos de texto ou imagens).
Semântico <article> Define conteúdo independente e reutilizável (ex.: postagens de blog).
<aside> Define conteúdo relacionado, como barras laterais ou widgets.
<footer> Define o rodapé da página ou seção (ex.: contatos, direitos autorais).
Vantagens
● Melhor Organização
● Melhor SEO
● Facilita a leitura (acessibilidade)
TAGS DE ESTRUTURAÇÃO
Categoria Tag Descrição
Containers <div> Container genérico em bloco para agrupamento e estilização.
Genéricos <span> Container genérico em linha para estilizar partes do texto.
TAGS DE ESTRUTURAÇÃO
Categoria Tag Descrição
<h1> - <h6> Define títulos e subtítulos com hierarquia (h1 é o mais importante).
<p> Define parágrafos de texto.
Texto e <a> Cria links para navegação.
Estruturação <ul> / <ol> Define listas não ordenadas (<ul>) ou ordenadas (<ol>).
<li> Define um item dentro de uma lista (<ul> ou <ol>).
<img> Insere imagens. Atributos importantes: src (caminho) e alt (texto alternativo).
TAGS
TAGS HTML
<a> Links e Navegação
● href: URL destino.
● target=“_blank": Abre em nova aba.
● Ordenadas (<ol>): com números.
TAGS HTML
<ol> Listas
● Ordenadas (<ul>): com bullets
TAGS HTML
<ul> Listas
Atributos Importantes
● src: Caminho da imagem
TAGS HTML ● alt: Texto alternativo
<img> Imagens
TAGS HTML
<table> Tabelas
● <table>: Define a tabela
● <tr>: Linha da Tabela
● <th>: Cabeçalho
● <td>: Celula de Dados
TAGS HTML
<form> Formulários
Usado para entrada de dados
Tipos de Input
TAGS HTML
<div>
<span>
● <div>: Container em bloco para agrupamento
● <span>: Container em linha para pequenos trechos
Atributos Comuns
class e id
ATRIBUTOS
class
id
HTML Semântico
HTML Semântico
CSS
01 O que é o CSS
CSS 02 Formas de Uso
03 Sintaxe, seletores e
propriedades essenciais
CSS • Linguagem usada para estilizar páginas HTML
(Cascading Style Sheets) • Objetivo de melhorar a aparência visual da página
Casos de Uso
● Uso:
- Personalização de Layout
- Cores
- Fontes
CSS - Espaçamento
- Responsividade
Casos de uso
● Exemplos Aplicação:
- Temas do sites
- Animações simples
- Estilização de formulários
Sintaxe e Seletores
CSS
Sintaxe e Seletores ● Tipos de Seletores:
- elemento:
p {color: red; }
- classe:
.nomeClasse {font-size: 20px; }
- ID:
#nomeId { background: gray; }
Formas de Uso
• Inline:
O CSS é escrito diretamente nos elementos HTML usando
o atributo style
CSS • Interno:
Formas de Uso O CSS é incluído dentro da tag <style> no cabeçalho da
página HTML
• Externo:
O CSS é colocado em um arquivo separado, geralmente
com a extensão .css, e vinculado ao arquivo HTML através
da tag <link>
• Inline:
CSS
Formas de Uso
• Interno
CSS
Formas de Uso
• Externo
CSS
Formas de Uso
Cores e Background
• Nome:
red, blue, green ...
CSS
Cores • Hexadecimal:
#FF5733
• RGB:
rbg(255, 255, 255)
• Cor de fundo:
CSS background-color
Background • Imagem de fundo:
Background-image
CSS
Background
Estilo de Texto e
Fontes
• Propriedades mais comuns:
CSS Cor: color
Tamanho: font-size
Estilos de Texto e Fonte Tipo: font-family
Estilo: font-style
Peso: font-weight
CSS
Estilos de Texto e Fonte
Revisando
CSS
• O que é CSS e casos de uso
Revisado • Formas de uso: inline, interno e externo
• Sintaxe, seletores e propriedades essenciais
BOAS PRÁTICAS
Boas Práticas HTML
Código Limpo e Organizado: Use indentação.
Semântica: Use tags corretas.
Acessibilidade: Inclua alt em imagens.
