O documento explica os fundamentos do HTML e CSS, destacando a importância dessas linguagens na construção de páginas web. O HTML é usado para estruturar o conteúdo através de tags, enquanto o CSS é utilizado para estilizar essa estrutura. Além disso, são fornecidos exemplos práticos de código e analogias sobre como HTML e CSS funcionam juntos na criação de um site.

1. HTML E CSS
PARA PEQUENAS GAFANHOTAS

2. Na base da estrutura de uma página da Web está o HTML
(HyperText Markup Language ou, em português, Linguagem
de Marcação de HiperTexto).
HTML é o que o navegador "lê" para apresentar a página
ao usuário em frente ao computador.
Para o browser conseguir ler o arquivo, é preciso criá-lo
com extensão “.html” ou “.htm”, caso contrário o browser não
irá renderizar o conteúdo corretamente.
O QUE É HTML?

3. <tag>
<outraTag>texto</outraTag>
</tag>
TAGS ANINHADAS
<tag>Conteúdo da tag</tag>
ESTRUTURA DE UMA TAG
O HTML trabalha com tags
TAGS HTML

4. Títulos
(Do 1 ao 7)
<hn>
PRINCIPAIS TAGS
Parágrafos
<p>
Links
<a>
Imagens
<img>
Tabelas
<table>
Campos
<input>

5. Abra o arquivo em
um navegador e irá
aparecer o texto
“Olá Mundo” em
tamanho grande na
página!
o/
Abra o arquivo em um
editor de texto, digite
<h1>Olá Mundo</h1>
e salve o arquivo
Crie um arquivo com
o nome index.html
321
COMO CRIAR MEU 1º HTML?

6. No estilo de uma página da Web está o CSS (Cascading
Style Sheets, em português, Folha de Estilos em Cascata).
O CSS controla fontes, cores, margens, linhas, alturas,
larguras, imagens de fundo, posicionamentos e muito mais.
Com o CSS é possível criar diversos estilos diferentes
para uma mesma estrutura em HTML.
O QUE É CSS?

7. tag - estilo para uma tag
id - estilo para um elemento único, definido por uma “#"
classe - estilo para um grupo de elementos, definido por um “."
TIPOS DE SELETORES
seletor { propriedade: valor }
ESTRUTURA DE UM SELETOR
O CSS trabalha com seletores
SELETORES CSS

8. identificador
único
#id
EXEMPLOS
identificador
grupos
.class
identifica
tags
tag
#title .list img

9. Abra o arquivo em
um navegador e irá
aparecer o texto
“Olá Mundo” em
vermelho
o/
Digite:
<style>
h1 {color: red;}
</style>
Abra o arquivo
index.html
321
COMO CRIAR MEU 1º CSS?

10. <style>
h1 {color: red;}
#title {color: orange;}
.hello {color: blue;}
</style>
<h1>Olá mundo </h1>
<h1 id="title">Olá mundo </h1>
<h1 class="hello">Olá mundo </h1>
INDEX.HTML

11. CSS é o que deixa o site mais
amigável e bonito, assim como o
que deixa uma casa mais bonita
são as pinturas, decoração, etc.
ANALOGIA DA CASA
HTML é a estrutura de uma
página, assim como a estrutura
de uma casa são as madeiras,
concretos, etc.

12. Editor de texto para
HTML & CSS
SUBLIME TEXT
Tutoriais gratuitos
para aprender HTML
& CSS
CODECADEMY
TIPS AND TRICKS

13. OBRIGADA!
INAJARALEPPA@GMAIL.COM