Aprenda HTML e CSS de CSS de forma fácil e divertida!

Prévia do material em texto

Aprenda HTML e CSS de 
CSS de forma fácil e 
divertida!
Neste curso, você vai aprender a criar páginas da web incríveis, do zero, 
do zero, utilizando as tecnologias mais populares para desenvolvimento 
desenvolvimento front-end.
by Paulo Odilon
Introdução ao HTML
O que é HTML?
HTML é uma linguagem de 
marcação utilizada para criar 
páginas web.
Como funciona?
Cada tag HTML possui uma função 
função específica que representa 
representa um elemento na página.
página.
Por que usar?
HTML é a base de toda a estrutura e 
conteúdo de qualquer site.
Estrutura básica de uma página HTML
Doctype e HTML
Toda página HTML começa com o 
Doctype e a tag HTML.
Head e Body
Os conteúdos da página são divididos 
divididos entre o Head e o Body.
Tags HTML
A estrutura de uma página HTML é 
composta por várias tags.
Tags de texto em HTML
1 Parágrafos
A tag <p> é usada para criar parágrafos de texto.
2Cabeçalhos
Os cabeçalhos, representados pelas tags <h1> até 
<h1> até <h6>, são utilizados para destacar títulos 
títulos e subtítulos.
3 Texto em destaque
A tag <em> é usada para enfatizar o texto e a tag 
a tag <strong> para dar maior ênfase.
Tags de imagem e links em HTML
Tag <img>
A tag <img> é utilizada para inserir 
imagens na página.
Tag <a>
A tag <a> é usada para criar links para 
outras páginas.
Links em imagens
As imagens também podem ser usadas 
usadas como links para outras páginas.
páginas.
Tags Semânticas
1 O que são?
São tags HTML que 
possuem significado e 
estruturação semântica.
2 Exemplos
<header>, <nav>, <main>, 
<main>, <section>, 
<article>, <aside>, 
<footer>.
3 Vantagens
Melhoram a acessibilidade, a navegação e a indexação do 
conteúdo pelos mecanismos de busca.
Layouts com Tags Semânticas
1 <header> e <footer>
O <header> contém informações como títulos e 
títulos e links para outras páginas, e o <footer> 
<footer> informações adicionais.
2<nav>
Usado para criar menus de navegação.
3 <section> e <article>
<section> pode ser usada para dividir a página em 
página em seções e <article> para representar um 
representar um conteúdo independente.
Modelos de Layouts
Layout em Colunas
Combinando tags semânticas, é 
possível criar layouts com colunas de 
colunas de conteúdo.
Exemplo: <header>, <nav>, <section>, 
<section>, <article>, <aside>, <footer>
<footer>
Layout em Grade
Usando CSS Grid, é possível criar 
layouts com uma grade de células.
células.
Exemplo: <div> com classe "grid-
container" e várias <div> internas
Layout Flexível
Usando CSS Flexbox, é possível criar 
criar layouts flexíveis com alinhamento 
alinhamento e distribuição de 
elementos.
Exemplo: <div> com classe "flex-
container" e vários <div> internos
internos
Introdução ao CSS
1 O que é CSS?
CSS é uma linguagem de 
estilo utilizada para 
modificar a aparência de 
elementos HTML.
2 Como funciona?
Cada propriedade CSS é 
utilizada para alterar 
características específicas 
dos elementos HTML.
3 Por que usar?
CSS permite personalizar o estilo de qualquer página, tornando
tornando-
-
a mais atraente e profissional.
a 
Estilizando elementos com CSS
1 Seletor de Elemento
O seletor de elemento é usado para selecionar um 
selecionar um elemento HTML específico.2Seletor de Classe
O seletor de classe é usado para estilizar um 
elemento HTML através de uma classe específica.
específica.
3 Seletor de ID
O seletor de ID é usado para selecionar um 
elemento HTML através do seu ID.
Propriedades de CSS
Propriedades de Texto
Ex: font-size, font-weight, color, 
text-align.
Propriedades de Fundo
Ex: background-color, background-
image, background-repeat.
Propriedades de Borda
Ex: border-style, border-width, 
border-color.
Criando layouts responsivos com CSS
Design Responsivo
Significa que o layout da página é 
ajustado dinamicamente para se adaptar 
adaptar a diferentes tamanhos de tela.
tela.
Media Queries
São utilizadas para aplicar diferentes 
diferentes estilos CSS de acordo com as 
com as características do dispositivo 
dispositivo utilizado para acessar a 
página.
Flexbox
O Flexbox é uma ferramenta do CSS que 
que permite criar layouts flexíveis que se 
que se adaptam aos diferentes tamanhos 
tamanhos de tela.
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12