Curso: HTML + CSS / SASS
Carga horária: 21h
Objetivo: Aprender os fundamentos
de criação de páginas web
Agenda do Curso
- Introdução ao HTML
- Estrutura básica de um documento HTML
- Tags e elementos HTML
- Estilização com CSS
- Seletores e propriedades CSS
- Box model e layout responsivo
- Introdução ao pré-processador SASS
- Tailwind CSS
Introdução ao HTML
- HTML = HyperText Markup Language
- Estrutura a informação de uma página
- Define títulos, parágrafos, imagens, links, listas etc.
- Navegadores interpretam o código HTML
Exemplo simples de HTML
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é meu primeiro site.</p>
</body>
</html>
Estrutura básica de um documento HTML
- <!DOCTYPE html> → Define versão do HTML
- <html> → Raiz do documento
- <head> → Informações da página (metadados)
- <body> → Conteúdo visível ao usuário
Tags e elementos HTML
- <h1> a <h6> → Títulos
- <p> → Parágrafos
- <a> → Links
- <img> → Imagens
- <ul>, <ol>, <li> → Listas
Exemplo:
<a href="[Link] para o Google</a>
<img src="[Link]" alt="Foto de exemplo">
Navegadores da Web
-O objetivo de um navegador da web (Chrome, Edge, Firefox,
Safari) é ler documentos HTML e exibi-los corretamente.
-Um navegador não exibe as tags HTML, mas as usa para
determinar como exibir o documento:
Estrutura da página HTML
Nota: O conteúdo
dentro da seção
<body> será exibido
em um navegador. O
conteúdo dentro do
elemento <title> será
mostrado na barra de
título do navegador
ou na guia da página.
Histórico de HTML
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Documentos HTML
- Todos os documentos HTML devem começar com uma
declaração de tipo de documento: <! DOCTYPE html>.
- O próprio documento HTML começa com <html> e
termina com </html>.
- A parte visível do documento HTML está entre <body>
e </body>.
O <! DOCTYPE> Declaração
-O <! A declaração DOCTYPE> representa o tipo de
documento e ajuda os navegadores a exibir páginas da web
corretamente.
-Ele só deve aparecer uma vez, no topo da página (antes de
quaisquer tags HTML).
-O <! A declaração DOCTYPE> não diferencia maiúsculas de
minúsculas.
Títulos HTML
-Os cabeçalhos HTML são definidos com as tags <h1>
para <h6>.
-<h1> define o título mais importante. <h6> define o
título menos importante:
Parágrafos HTML
Parágrafos HTML são definidos com a tag <p>:
Links HTML
Os links HTML são definidos com a tag <a>:
- O destino do link é especificado no atributo href.
- Os atributos são usados para fornecer informações
adicionais sobre elementos HTML.
- Você aprenderá mais sobre atributos em um capítulo
posterior.
Imagens HTML
- As imagens HTML são definidas com a tag <img>.
- O arquivo de origem (src), texto alternativo (alt),
largura e altura são fornecidos como atributos:
Elementos HTML vazios
- Elementos HTML sem conteúdo são chamados de
elementos vazios.
- A tag <br> define uma quebra de linha e é um elemento
vazio sem uma tag de fechamento:
HTML não é sensível a maiúsculas e
minúsculas
- As tags HTML não diferenciam maiúsculas de
minúsculas: <P> significa o mesmo que <p>.
- O padrão HTML não requer tags minúsculas, mas o
W3C recomenda minúsculas em HTML e exige
minúsculas para tipos de documentos mais rigorosos,
como XHTML.
Atributos HTML
- Os atributos HTML fornecem informações adicionais sobre
elementos HTML.
- Todos os elementos HTML podem ter atributos
- Os atributos fornecem informações adicionais sobre elementos.
- Os atributos são sempre especificados na tag inicial.
- Os atributos geralmente vêm em pares nome/valor como:
name="value"
O atributo href
- A tag <a> define um hiperlink. O atributo href
especifica a URL da página para a qual o link vai:
O Atributo src
- A tag <img> é usada para incorporar uma imagem em
uma página HTML. O atributo src especifica o caminho
para a imagem a ser exibida:
O Atributo src
- Existem duas maneiras de especificar a URL no atributo src:
1. URL Absoluto - Links para uma imagem externa que está hospedada em outro site.
Exemplo: src=“[Link]
Notas: Imagens externas podem estar protegidas por direitos autorais. Se você não obtiver
permissão para usá-lo, pode estar violando as leis de direitos autorais. Além disso, você
não pode controlar imagens externas; ela pode ser removida ou alterada de repente.
2. URL relativa - Links para uma imagem que está hospedada no site. Aqui, a URL não inclui
o nome de domínio. Se a URL começar sem uma barra, ela será relativa à página atual.
Exemplo: src="img_girl.jpg". Se a URL começar com uma barra, ela será relativa ao
domínio. Exemplo: src=“/images/img_girl.jpg".
Dica: É quase sempre melhor usar URLs relativos. Eles não quebrarão se você mudar de
domínio.
Os atributos de largura e altura
A tag <img> também deve conter os atributos de
largura e altura, que especificam a largura e a altura
da imagem (em pixels):
O atributo alt
O atributo alt necessário para a tag <img> especifica
um texto alternativo para uma imagem, se a imagem
por algum motivo não puder ser exibida. Isso pode ser
devido a uma conexão lenta, ou um erro no atributo
src, ou se o usuário usar um leitor de tela.
O atributo de estilo
O atributo style é usado para adicionar estilos a um
elemento, como cor, fonte, tamanho e muito mais.
O atributo lang
Você deve sempre incluir o atributo lang dentro da tag
<html>, para declarar o idioma da página da Web. Isso
se destina a auxiliar mecanismos de pesquisa e
navegadores.
O atributo do título
- O atributo de título define algumas informações extras
sobre um elemento.
- O valor do atributo de título será exibido como uma
dica de ferramenta quando você passar o mouse sobre
o elemento:
Listas
- O HTML oferece algumas maneiras diferentes de
marcar listas. Há listas ordenadas (<ol>), não ordenadas
(<ul>) e de descrição (<dl>).
- Os itens de lista (<li>) são aninhados em listas
ordenadas e não ordenadas.
- Em uma lista de descrição, você encontra termos de
descrição (<dt>) e detalhes da descrição <dd>.
Listas não ordenadas
- O elemento <ul> é o elemento pai das listas não
ordenadas de itens.
- Os únicos filhos de um <ul> são um ou mais elementos
de item de lista <li>.
Listas ordenadas
- O elemento <ol> é o elemento pai das listas ordenadas
de itens.
- Os únicos filhos de um <ol> são um ou mais elementos
<li> ou itens de lista.
- No entanto, os "marcadores" nesse caso são números
de vários tipos.
- O tipo pode ser definido em CSS com a propriedade
list-style-type ou com o atributo type.
O atributo do título
Exercício 1 – Crie um arquivo chamado [Link] e escreva a estrutura básica de um
documento HTML5.
Exercício 2 – Adicione um título para sua página dentro da tag <title>.
Exercício 3 – Dentro do <body>, insira: Um título principal com <h1> e um parágrafo com
<p>
Exercício 4 – Adicione subtítulos <h2> e <h3> para organizar a página com pelo menos 2
parágrafos diferentes.
Exercício 5 – Crie um link que leve o usuário para o site do Google ([Link]
Exercício 6 – Adicione uma imagem qualquer usando a tag <img>. Use o atributo alt para
descrever a imagem.
Exercício 7 – Crie uma lista com 3 itens representando seus hobbies favoritos.
Exercício 8 – Crie uma lista numerada com os 5 passos para preparar um café.
Exercício 9 – Adicione um comentário explicando o que cada parte do seu código faz.
Second Class
Formatting Elements
• Os elementos de formatação foram projetados para exibir tipos especiais de
texto:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Tables
• As tabelas HTML permitem que os desenvolvedores
da web organizem os dados em linhas e colunas.
Table Cells
• Cada célula da tabela é definida por uma tag <td> e
uma </td>.
Table Rows
• Cada linha de tabela começa com um <tr> e termina
com uma tag </tr>.
HTML Block and Inline Elements
• Cada elemento HTML tem um valor de exibição
padrão, dependendo do tipo de elemento que é.
• Os dois valores de exibição mais comuns são bloco e
inline.
Block-level Elements
• Um elemento de nível de bloco sempre começa em
uma nova linha, e os navegadores adicionam
automaticamente algum espaço (uma margem) antes
e depois do elemento.
• Um elemento de nível de bloco sempre ocupa toda a
largura disponível (estende-se para a esquerda e para a
direita o máximo possível).
• Dois elementos de bloco comumente usados são: <p>
e <div>.
Block-level Elements
Inline Elements
• Um elemento embutido não começa em uma nova
linha.
• Um elemento embutido ocupa apenas a largura
necessária.
• Este é um elemento <span> dentro de um parágrafo.
Inline Elements
Inline Elements
Elemento <div>
• O elemento <div> é usado como um contêiner para
outros elementos HTML.
• O elemento <div> é, por padrão, um elemento de
bloco, o que significa que ocupa toda a largura
disponível e vem com quebras de linha antes e
depois.
<div> como um recipiente
• O elemento <div> é frequentemente usado para
agrupar seções de uma página da web.
HTML Layout Elements
• O HTML tem vários elementos semânticos que definem as diferentes
partes de uma página da web:
• <header> - Defines a header for a document or a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details that the user can open and close
on demand
• <summary> - Defines a heading for the <details> element
HTML Layout Elements
HTML Forms
• O elemento HTML <form> é usado para criar um
formulário HTML para entrada do usuário:
The <input> Element
• O elemento HTML <input> é o elemento de
formulário mais usado.
• Um elemento <input> pode ser exibido de várias
maneiras, dependendo do atributo type.
The <input> Element
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
• O <input type="text"> define um campo de entrada
de linha única para entrada de texto.
Document Object Model (DOM)
• O DOM é uma interface de programação para
documentos HTML e XML.
• Representa o documento como uma árvore de nós
(nodes).
Estrutura da Árvore
• Documento: raiz da árvore.
• Elementos (tags): nós principais (ex: <html>, <body>,
<p>text</p>).
• Atributos: informações adicionais dos elementos.
• Texto: conteúdo dentro das tags.
Papel do DOM
• Conecta o código HTML/CSS ao JavaScript.
• Permite que o JavaScript acesse, modifique e
atualize:
• Estrutura (elementos, tags).
• Conteúdo (texto, atributos).
• Estilos (CSS).
Principais Operações
• Localizar elementos (getElementById,
querySelector).
• Alterar conteúdo ([Link],
[Link]).
• Modificar estilo ([Link]).
• Criar/Remover nós (createElement, appendChild,
removeChild).
Importância
• Base para páginas dinâmicas e interativas.
• Sem o DOM, JavaScript não teria como manipular o
conteúdo exibido.
Selecionar elementos
Alterar conteúdo
Alterar estilo
Criar e adicionar elementos
Resultado: adiciona um novo item em uma lista (<ul>).
Exercício: Lista de Compras Interativa
Crie uma página web que permita ao usuário adicionar
itens a uma lista de compras, mostrando-os na tela. O
usuário deve poder:
1. Digitar um item em um formulário.
2. Adicionar o item à lista clicando em um botão.
3. Ver todos os itens adicionados (armazenados em
um array).
4. Ter a opção de limpar a lista com outro botão.
Exercício: Lista de Compras Interativa
HTML
• Um layout simples com header, main e footer.
• Um formulário com um campo de texto e dois botões (Adicionar e Limpar lista).
• Uma div ou ul para exibir os itens.
JavaScript
• Um array para armazenar os itens.
• Funções para:
• Adicionar itens ao array e exibir na tela.
• Limpar o array e a lista exibida.
• Manipulação de DOM para atualizar a lista em tempo real.
CSS
Estilização com CSS
- CSS = Cascading Style Sheets
- Define a aparência da página (cores, tamanhos,
espaçamento)
- Três formas de aplicar CSS:
- Inline → style=""
- Interno → <style> dentro do HTML
- Externo → arquivo .css separado
Exemplo de CSS externo
• <link rel="stylesheet" href="[Link]">
• CSS:
• body {
• background-color: #f0f0f0;
• font-family: Arial, sans-serif;
• }
• h1 {
• color: blue;
• }
Seletores e propriedades CSS
• Seletor por tag: p { color: red; }
• Seletor por classe: .destaque { font-weight: bold; }
• Seletor por id: #titulo { font-size: 24px; }
• Propriedades comuns:
• color
• background-color
• font-size
• margin, padding
Box Model
Cada elemento é uma caixa:
• Content → conteúdo
• Padding → espaço interno
• Border → borda
• Margin → espaço externo
Importante para layouts responsivos
Box Model
Fonte: [Link]
guide-84745874daba&psig=AOvVaw0em4ZX28YwmUt4NT9n3iBB&ust=1757024353885000&source=images&cd=vfe&opi=89978449&ve
d=0CBUQjRxqFwoTCMDUp_jPvY8DFQAAAAAdAAAAABAE
Exemplo de Box Model
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
Layout responsivo
• Páginas devem se adaptar a diferentes telas
• Técnicas:
• Unidades relativas (% , em , rem, vh, vw)
• Media queries
• Flexbox e Grid
Exemplo de Media Query
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Introdução ao SASS
• SASS = Syntactically Awesome Stylesheets
• Extensão do CSS com recursos extras:
• Variáveis
• Aninhamento
• Mixins e funções
• Arquivos .scss → compilados para .css
Exemplo de SASS
$cor-principal: #3498db;
body {
font-family: Arial;
color: $cor-principal;
h1 {
font-size: 2em;
}
}
Introdução ao Tailwind
• Biblioteca de CSS utilitário
• Usa classes prontas para aplicar estilos
• Evita escrever CSS manualmente
• Exemplo: class="text-center text-blue-500 p-4"
Exemplo com Tailwind
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-blue-600">Bem-
vindo!</h1>
<p class="text-gray-700">Este é um exemplo com
Tailwind.</p>
</div>
Resumo Final
• HTML → estrutura da página
• CSS → estilização e layout
• Box Model → organização dos elementos
• Responsividade → adaptação a telas
• SASS → produtividade no CSS
• Tailwind → estilo rápido com classes
COLOCAR TÍTULO AQUI
COLOCAR TÍTULO AQUI
COLOCAR TÍTULO AQUI
COLOCAR TÍTULO AQUI