O documento discute programação web, especificamente HTML, CSS e JavaScript. CSS é usado para estilizar o conteúdo HTML, enquanto JavaScript adiciona interatividade. O documento também fornece instruções sobre como abrir e editar arquivos HTML e CSS no Bloco de Notas e salvar alterações.

1. CSS NA
PRÁTICA -
WEBDESIGN
RENATO MELO - 2014

2. Programação
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript:
Inteligência

3. nome
Define um estilo único para
um elemento: body, h1...

4. #nome
Define um estilo único
para um identificador

5. .nome
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.

6. Textos
Links
Estilo:
Fonte
Cores
Alinhamhento
Etc...
PRINCIPAL DIFERENÇA DO HTML E DO CSS

7. #TRABALHO
INDV. 04.04
EXERCÍCIO PREPARATÓRIO

8. INFORMAÇÕES
ÚTEIS

9. 3. ABRA O HTML E O CSS
NO BLOCO DE NOTAS
1. DESCOMPACTE
SEMPRE TUDO NA MESMA
PASTA
2. ABRA O HTML NO
NAVEGADOR

10. 1. ABRA O BLOCO DE NOTAS
2. VÁ EM ABRIR
3. VÁ NA PASTA DOS SEUS ARQUIVOS
4. SELECIONE PARA ABRIR TODOS OS
ARQUIVOS PARA APARECER O HTML E CSS
PARA ABRIR OS ARQUIVOS NO BLOCO DE NOTAS

11. SALVE O HTML OU CSS
NO BLOCO DE NOTAS
QUER VER COMO ESTÁ
INDO AS ALTERAÇÕES?
PRESSIONE A TECLA F5
NO NAVEGADOR

12. QUER ACHAR ALGO NO
SEU CÓDIGO?
Editar - Localizar

13. ATENÇÃO:
Na Direção, cuidado com
Acima e Abaixo

14. DIV:
O nome da DIV sempre será
o correspondente no css

15. renatomelomkt.com.br/esamc/bombril.zip

16. #ALTERAR
1. NO MENU: ALTERAR
HOME PARA BOMBRIL

17. #ALTERAR
2. NA CHAMADA, ALTERAR
PROMOÇÃO PARA
CONCURSO

18. #ALTERAR
3. ALTERAR A COR DOS
TEXTOS ABAIXO DOS ITENS:
FACEBOOK, E-MAIL E SMS
DE CINZA PARA BRANCO
#FFF

19. #ALTERAR
4. TROCAR O LINK DO
FACEBOOK DA BOMBRIL!
DE /BOMBRIL PARA
/BOMBRILOFICIAL

20. #ALTERAR
5. ALTERAR A COR DO
RODAPÉ DE VERMELHO
PARA PRETO: #000

21. FANTA:
renatomelomkt.com.br/esamc/fanta.zip

22. ALUNOS
AMANDHA FRANÇA BELO RIBEIRO
ANGELICA ULITZKA RODRIGUES
ARIÉCIA ASSUNÇÃO
BRUNA PEREIRA
BRUNO FERNANDES NASCIMENTO
ELIS DOS SANTOS TAVARES
FERNANDO RODOLFO DE OLIVEIRA JUNIOR
GUILHERME MARZANO
HUGO VICENTE FERREIRA
INGRID ELOY GASPAR
JEFFERSON ALLAN BORGES
JULIANA DE OLIVEIRA ANDRADE
KELLY CRISTINA ROCHA DE MOURA
LEONARDO TOSHIRO NAKAI
LINDSEY SOREN DOS SANTOS REGO
LUANA MAGALHÃES FIGUEIREDO
LUCIANA CÂMARA MEDEIROS

23. ARRUMAR:
1)No menu, alterar “Romi” para Home
2)Na chamada, corrigir “Promossão”
3)Alterar a cor do texto “Aqui você encontra...” para
branco: #fff
4)Alterar a fonte do mesmo texto para 18px
5)Alterar o link do facebook para a fanpage da Fanta
6)Alterar a cor do texto dos itens (facebook, sms, etc) de
branco para #56585b
7)Alterar a fonte do texto dos itens de Comic Sans para
Trebuchet, ficando: “Trebuchet, Arial, Verdana”;

24. renatomelomkt.com.br/esamc/lacta.zip
LACTA:

25. ALUNOS
LUIZ RICARDO DOS SANTOS
MARCELO HENRIQUE DA SILVA
MARIANA DIAS DA SILVA NOVAES
MARINA BUCHED
PATRÍCIA PRETEL
PEDRO HENRIQUE
RAONY VIANA
RAQUEL DE ALMEIDA CHAIM
RENAN SIMÕES NASCIMENTO
RENATO JUNQUEIRA
TAMMY GABRIELE OLIVEIRA
THAIS GANDRA DE AMORIM
VANESSA BASTOS NUNES
VINÍCIUS GARCIA BELA
WAGNER DE ABREU FERNANDO
WILLIAN MENDES

26. ARRUMAR:
1)No menu, alterar “Promu” para Promo
2)Na chamada, colocar “Promoção Lacta e Você”
3)Alterar a cor do texto da Promoção Lacta de verde para
# 27509c;
4)Arrumar o texto “Aki você...” para o português correto.
5)Alterar o link do facebook para a fanpage da Lacta
6)Alterar a cor do texto dos itens (facebook, sms, etc) de
branco para #56585b
7)Alterar a cor de fundo do rodapé de laranja para # 27509c

27. #ENTREGA
ENVIE PARA:
renatomelo85@gmail.com

28. #PRÉVIA 03
O HTML5 NA WEB
Leia o artigo e faça uma análise daLeia o artigo e faça uma análise da
importância da programação em HTML5importância da programação em HTML5
para as vendas online:para as vendas online:
http://www.e-smart.com.br/blog/evolucao-http://www.e-smart.com.br/blog/evolucao-
html5-participacao-commerce/html5-participacao-commerce/

29. #PRÉVIA 03
REGRINHAS BÁSICAS
Enviar para o e-mail:Enviar para o e-mail:
renatomelo85@gmail.comrenatomelo85@gmail.com
1- Até 21.03 às 18h30 – 100% VALOR1- Até 21.03 às 18h30 – 100% VALOR
2- Até 28.03 às 18h30 – 50% VALOR2- Até 28.03 às 18h30 – 50% VALOR
3- APÓS ÀS 18H30 DO DIA 28.03 = 0% VALOR3- APÓS ÀS 18H30 DO DIA 28.03 = 0% VALOR

30. FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br