HTML e CSS

HTML
HTML e CCSS
SS
HTML
HTML e CCSS
SS
HTML
HTML e CCSS
SS
HTML e CSS
HTML e CSS
HTML e CSS
HTML
HTML
TM L e CS
CSSS
HTML
HTML
TM L e CS
CSSS
HTML
HTML e CCSS
SS
HTML
HTML e CCSS
SS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML
HTML e CCSS
SS
HTML
HTML e CCSS
SS
HTML
HTML e CCSS
SS
HTML e CSS
HTML e CSS
HTML e CSS
Caderno de Exercícios HTML
HTML e C
HTML
HTML e C
CSS
SS
CSS
SS
HTML e CSS HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
Caderno de Exercícios HTML e CSS

Copyright © 2019
Todos os direitos reservados. Lei 9.610/98 e atualizações.
Nenhuma parte desta publicação impressa poderá ser reproduzida
ou transmi da, por quaisquer meios empregados, sejam eletrônicos,
mecânicos, fotográficos, gravações, etc. Todas as marcas e imagens
de hardware, so ware e outros, u lizados e/ou mencionados nesta
obra, são propriedades de seus respec vos fabricantes, donos e/ou
criadores.

Esta apos la é de uso exclusivo das unidades de ensino com sistema

Interaso .

2
 Caderno de Exercícios HTML e CSS

Sumário
1. Introdução ao HTML ................................................................................. 5
2. Tags Essenciais .......................................................................................... 6
3. Prá cas de Desenvolvimento ................................................................... 7
4. Títulos ....................................................................................................... 9
5. Tags de Texto .......................................................................................... 13
6. Editores HTML ........................................................................................ 16
7. Introdução ao CSS................................................................................... 18
8. Es lização de Fonte - 1 ........................................................................... 20
9. Es lização de Fonte - 2 ........................................................................... 22
10. Edição de Cores .................................................................................... 25
11. Es lização de Cor .................................................................................. 27
12. Inserir Comentários .............................................................................. 31
13. Adicionar Imagens ................................................................................ 34
14. Formatos de Imagem............................................................................ 37
15. Plano de Fundo..................................................................................... 39
16. Personalização de Imagens................................................................... 42
17. Links - 1................................................................................................. 45
18. Links - 2................................................................................................. 47
19. Es lização de Links ............................................................................... 50
20. Listas Ordenadas .................................................................................. 53
21. Listas Não Ordenadas ........................................................................... 57
22. Classe e ID ............................................................................................ 61
23. Atributos de Posicionamento ............................................................... 64
24. Divs - 1 .................................................................................................. 67
25. Divs - 2 .................................................................................................. 71
26. Criação de Layout - 1 ............................................................................ 75
27. Criação de Layout - 2 ............................................................................ 79
28. Disposição da Página ............................................................................ 83
29. Projeto de Exemplo - 1 ......................................................................... 88
30. Projeto de Exemplo - 2 ......................................................................... 91
31. Projeto de Exemplo - 3 ......................................................................... 95
32. Projeto de Exemplo - 4 ....................................................................... 100
33. Criação de Menu ................................................................................ 107
34. Es lização de Menu ............................................................................ 111

3
Caderno de Exercícios HTML e CSS

35. Criação de Submenu........................................................................... 116

36. Projeto de Exemplo - 5 ....................................................................... 120
37. Projeto de Exemplo - 6 ....................................................................... 124
38. Criação de Formulário ........................................................................ 130
39. Es lização de Formulário.................................................................... 134
40. Projeto de Exemplo - 7 ....................................................................... 140
41. Mapeamento de Imagens - 1 ............................................................. 147
42. Mapeamento de Imagens - 2 ............................................................. 150
43. Fontes ................................................................................................. 153
44. Reset e Normalize............................................................................... 156
45. Projeto de Exemplo - 8 ....................................................................... 160
46. Projeto de Exemplo - 9 ....................................................................... 166
47. Projeto de Exemplo - 10 ..................................................................... 172
48. Validação de Códigos .......................................................................... 183

4
 Caderno de Exercícios HTML e CSS

1. INTRODUÇÃO AO HTML
Iniciamos o curso estudando os conceitos que englobam a constru-
ção de um site, entendendo a u lidade de um código em HTML. Para colo-
car em prá ca o seu aprendizado a seguir encontram-se alguns exercícios.

1. Basicamente, o que é o HTML?

2. O que as ligações de hipertexto permitem em uma página web?

3. Para que serve um arquivo no formato CSS?

4. Nas lacunas a seguir marque V para verdadeiro ou F para falso de

acordo com as afirmações:

( ) Uma coleção de páginas web armazenadas em uma única

pasta ou em subpastas relacionadas de um servidor web é
conhecida como site.
( ) Tanto a codificação em HTML quanto a personalização em CSS
são englobadas no Web Design.
( ) O HTML é uma linguagem de programação avançada, muito
u lizada na construção de servidores web.
( ) A preocupação fundamental do Web Designer é construir si-
tes complexos com recursos avançados que não são acessí-
veis a qualquer usuário.

5
Caderno de Exercícios HTML e CSS

2. TAGS ESSENCIAIS
Nesse capítulo conhecemos as tags essenciais na estrutura de docu-
mentos HTML, criando um primeiro exemplo. Na sequência encontram-se
algumas a vidades para exercitar o seu entendimento sobre o assunto.

1. O que a tag <html> faz?

2. Qual a diferença entre as tags <head> e <body>?

Passo a passo:

1. Para começar acesse o Menu Iniciar e abra o Bloco de Notas.

2. Na primeira linha abra a tag digitando: <html>
3. Tecle <Enter> duas vezes para dei-
xar uma linha em branco. Depois, <html>
<head>
feche a tag digitando: </html>
4. Posicione o cursor na linha em </head>
branco e digite: <head> <body>
5. Tecle <Enter> duas vezes para pular Oi! Meu nome é José!
uma linha e feche a tag do cabeça- </body>
lho digitando: </head> </html>
6. Posicione o cursor após o fecha-
mento da tag head e tecle <Enter>. Estrutura do código
7. Abra uma nova tag digitando: <body>

6
 Caderno de Exercícios HTML e CSS

8. Pule uma linha teclando <Enter> duas vezes e digite: </body>

9. Posicione o cursor dentro da tag <body> e digite uma frase in-
cluindo o seu nome. Por exemplo: Oi! Meu nome é José!
10. Clique em Arquivo e selecione Salvar como.
11. Expanda as opções da caixa de listagem Tipo e selecione To-
dos os arquivos.
12. Defina a Área de Trabalho como local de armazenamento.
13. No campo Nome digite: nome.html
14. Clique em Salvar para confirmar.
15. Feche o Bloco de Notas.
16. Na Área de Trabalho dê um duplo clique sobre o arquivo HTML
para abri-lo no navegador.

Resultado da codificação no navegador

17. Observe a página web. Para encerrar feche o navegador e ex-
clua o arquivo HTML.

3. PRÁTICAS DE DESENVOLVIMENTO
Durante esse capítulo conhecemos algumas prá cas de desenvolvi-
mento que são essenciais para a codificação de páginas web. Resolva as
a vidades a seguir para exercitar seus estudos.

1. Na computação, o que é a indentação e para que ela serve?

7
Caderno de Exercícios HTML e CSS

2. Qual a diferença entre as teclas <Tab> e <Espaço>?

Passo a passo:

1. Encontre o arquivo preparado para esse capítulo, chamado

"indentacao.html". Se precisar de ajuda para encontrá-lo,
peça ao seu instrutor.
2. Clique com o botão direito sobre o arquivo "indentacao.html",
direcione o cursor sobre a opção Abrir com e selecione Bloco
de notas.

<html>
<head>
</head>
<body>
Teste de organização de documento HTML!
</body>
</html>

Arquivo indentacao.html

3. Selecione todas as linhas presentes dentro da tag <html>.

4. Com as linhas selecionadas, tecle <Tab>.
5. Tecle <Ctrl> + <Z> para desfazer a operação.
6. Posicione o cursor antes da abertura da tag <head> e pressio-
ne <Tab>.
7. Faça o mesmo para todas as outras linhas presentes dentro da
tag <html>, posicionando o cursor antes do início da linha e
teclando <Tab>.

8
 Caderno de Exercícios HTML e CSS

8. Posicione o cursor no início do texto presente dentro da tag

<body> e tecle <Tab>.

<html>
<head>
</head>
<body>
Teste de organização de documento HTML!
</body>
</html>

Código indentado

9. Acesse o menu Arquivo e clique em Salvar.

10. Minimize o Bloco de Notas e abra o arquivo "indentacao.
html" no navegador.
11. Observe como ficou a página web. Depois, feche o navegador
e o Bloco de Notas.

4. TÍTULOS
Aprendemos a adicionar tulos de diferentes níveis em um documen-
to HTML. Exercite seu aprendizado com as a vidades a seguir.

1. Qual a diferença entre as tags de tulo <h1> e <h6>?

9
Caderno de Exercícios HTML e CSS

2. Ao alterar um documento HTML, o que é preciso fazer para visuali-

zar suas alterações no navegador?

Passo a passo:

1. Acesse o Menu Iniciar e abra o Bloco de Notas.

2. Digite a estrutura do código, aplicando as tabulações corretas
e teclando <Enter> ao final de cada linha:

<html>
<head>
</head>
<body>
</body>
</html>

Estrutura do arquivo

3. Posicione o cursor dentro da tag <body> e tecle <Tab> duas

vezes. Então, digite:

<html>
<head>
</head>
<body>
<h1>Título 1</h1>
</body>
</html>

Adicionando ơtulo 1

4. Acesse o menu Arquivo e clique em Salvar como.

5. Defina a Área de Trabalho como local de armazenamento.

10
 Caderno de Exercícios HTML e CSS

6. Expanda as opções da caixa de listagem Tipo e selecione To-

dos os arquivos.
7. Em Nome digite: textos.html
8. Clique em Salvar para confirmar.
9. Minimize o Bloco de Notas e abra o arquivo "textos.html" no
navegador dando um duplo clique sobre ele.

Visualização do arquivo textos.html

10. Observe como ficou o tulo. Depois, retorne ao Bloco de Notas.

11. Posicione o cursor após o fechamento da tag <h1> e tecle <En-
ter>.
12. Pressione <Tab> duas vezes e digite: <h2>Título 2</h2>
13. Tecle <Ctrl> + <S> para salvar as alterações e retorne ao na-
vegador.

Título 2 adicionado na página

14. Tecle <F5> para atualizar a página web.

15. Após visualizar o novo tulo, retorne ao Bloco de Notas.
16. Tecle <Enter> após o fechamento da tag <h2>.

11
Caderno de Exercícios HTML e CSS

17. Digite os códigos a seguir, teclando <Tab> duas vezes antes do

início de cada linha:

<html>
<head>
</head>
<body>
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
</body>
</html>

Adicionando os ơtulos
18. Salve as alterações teclando <Ctrl> + <S>.

Visualização dos ơtulos no navegador

19. Volte ao navegador e atualize a página teclando <F5>.

20. Visualize as alterações na página. Para encerrar feche o nave-
gador e o Bloco de Notas.

12
 Caderno de Exercícios HTML e CSS

5. TAGS DE TEXTO
Nesse capítulo conhecemos novas tags para o texto e aprendemos
a inserir atributos para elas. Faça as a vidades a seguir para pra car seu
entendimento sobre o assunto.

1. Como se adiciona um atributo em uma tag?

2. Analise as afirmações:

1. A forma ideal de se personalizar os elementos é através da

codificação in line (em linha).
2. Uma forma de se inserir texto no documento HTML é colocan-
do-o na tag de parágrafo, que é simbolizada pela letra "st".
3. O atributo align é muito u lizado para alterar a posição de
elementos dentro da página.
4. Dentro da tag <p> deve-se colocar todo o conteúdo textual
que se encaixa em um parágrafo.

Estão corretas somente:

a) 1 e 2.
b) 2 e 3.
c) 1 e 4.
d) 3 e 4.

13
Caderno de Exercícios HTML e CSS

Passo a passo:

1. Primeiramente abra o arquivo "textos.html" no Bloco de Notas.

Se precisar de ajuda para encontrar o arquivo, peça ao seu ins-
trutor.
2. Posicione o cursor após o texto h1 e tecle <Espaço>.
3. Digite o atributo e seu valor: align="center"
4. Acesse o menu Arquivo e clique em Salvar.
5. Minimize o Bloco de Notas e abra o arquivo "textos.html" no
navegador.
6. Observe o novo alinhamento no primeiro tulo e, depois, vol-
te ao Bloco de Notas.
7. Posicione o cursor após o texto h2, tecle <Espaço> e digite:
align="left"
8. Posicione o cursor após o texto h3 e tecle <Espaço>. Digite o
atributo e o valor: align="right"

<html>
<head>
</head>
<body>
<h1 align="center">Título 1</h1>
<h2 align="left">Título 2</h2>
<h3 align="right">Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
</body>
</html>

Adicionando os alinhamentos

9. Acesse o menu Arquivo e clique em Salvar.

10. Retorne ao navegador e atualize a página.
11. Visualize os alinhamentos nos tulos. Depois, clique no bo-
tão Restaurar Tamanho para diminuir o tamanho da janela
do navegador.

14
 Caderno de Exercícios HTML e CSS

Visualização do alinhamento no navegador

12. Observe como os tulos se comportam e clique no botão Ma-

ximizar.
13. Volte ao Bloco de Notas, posicione o cursor após o fechamen-
to da tag <h1> e tecle <Enter>.
14. Tecle <Tab> duas vezes para aplicar a tabulação correta. Então,
digite: <p>Exemplo de parágrafo de texto.</p>
15. Salve as alterações. Depois, volte ao navegador e atualize a
página.
16. Retorne ao Bloco de Notas, posicione o cursor após a le-
tra p da tag e tecle <Espaço>. Digite o atributo e seu valor:
align="center"
17. Posicione o cursor dentro do parágrafo, após a palavra de. Em
seguida, digite: <br>

<body>
<h1 align="center">Título 1</h1>
<p align="center">Exemplo de <br> parágrafo de
texto.</p>
<h2 align="left">Título 2</h2>
<h3 align="right">Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
</body>

Adicionando os alinhamentos

15
Caderno de Exercícios HTML e CSS

18. Salve as alterações no documento HTML e atualize a página

no navegador.

Visualização no navegador

19. Após visualizar as alterações, feche o navegador e o Bloco de

Notas.

6. EDITORES HTML
Conhecemos alguns editores HTML, evidenciando suas caracterís -
cas e aprendendo a instalar o Sublime Text. Faça os exercícios referentes
para colocar em prá ca seus estudos.

1. Quando um soŌware se enquadra na categoria de freemium?

16
 Caderno de Exercícios HTML e CSS

2. No Sublime Text o que é possível fazer através do menu Preferences?

Passo a passo:

O passo a passo se inicia com o download e instalação do editor Sublime

Text. Caso ele já esteja instalado em seu computador, pule para o passo 10.

1. Acesse o Menu Iniciar e abra um navegador web.

2. Na barra de endereços digite www.sublimetext.com e tecle
<Enter> para acessar o site.
3. Clique em Download para acessar a área com as opções para
adquirir o programa.

Download do programa

4. Verifique a versão do sistema operacional de seu computador.

Se precisar de ajuda para descobrir a versão, peça ao seu ins-
trutor. Depois, clique no link referente ao seu sistema opera-
cional para fazer o download do instalador do programa.
5. Após o download ser realizado, clique no instalador para exe-
cutá-lo.
6. No primeiro passo da instalação clique no botão Next para
manter o local de instalação padrão.
7. Marque a caixa de verificação para que um atalho do programa
seja criado no menu de exploração. Prossiga clicando em Next.
8. Inicie a instalação clicando no botão Install.

17
Caderno de Exercícios HTML e CSS

9. Após o programa ser instalado, clique em Finish. Depois, feche

o navegador.
10. Acesse o Menu Iniciar e abra o Sublime Text.
11. Clique em File e selecione Open File.
12. Encontre e selecione o arquivo "textos.html" e clique em Abrir.
13. Observe como o código é exibido no programa. Clique em Pre-
ferences e selecione Color Scheme.

Botão Preferences

14. Teste todas as opções de esquema de cores disponíveis, obser-

vando a diferença entre elas.
15. Após testar as opções de esquema de cores, defina a opção
Breakers.
16. Feche o documento HTML, clicando no botão referente em
sua aba.
17. Para encerrar feche o Sublime Text.

7. INTRODUÇÃO AO CSS
Durante esse capítulo conhecemos o CSS (Cascading Style Sheets),
estudando sua importância e funcionalidade. Prossiga com seus estudos fa-
zendo os exercícios a seguir.

18
 Caderno de Exercícios HTML e CSS

1. Basicamente o que é CSS?

2. Qual a diferença entre HTML e CSS?

3. No CSS do que é composta uma declaração?

4. Nas lacunas a seguir marque V para verdadeiro ou F para falso de

acordo com as afirmações:

( ) O código CSS pode ser aplicado somente dentro de uma tag

especial chamada style.
( ) A estrutura da sintaxe CSS é composta por uma tag específica e
uma linha de programação.
( ) A maneira mais usual de se aplicar o CSS é criar um link para
um arquivo CSS que contém os es los.
( ) Com a variação de atualizações dos navegadores, o suporte
ao CSS pode variar.

19
Caderno de Exercícios HTML e CSS

8. ESTILIZAÇÃO DE FONTE ͳ 1
Foi iniciado o estudo prá co sobre os códigos CSS, aprendendo a es-
lizar elementos através da tag <style>. Na sequência encontram-se exercí-
cios para prá ca.

1. O que o Sublime faz quando se inicia a digitação de uma tag?

2. Como o Sublime destaca os componentes de uma declaração?

Passo a passo:

1. Acesse o Menu Iniciar e abra o Sublime Text.

2. Clique em File e selecione Open File.
3. Busque e selecione o arquivo "textos.html". Depois, clique em
Abrir.
4. Posicione o cursor após a abertura da tag <head> e tecle <En-
ter>.
5. Digite a abertura e fechamento da tag <style>:
<style></style>
6. Posicione o cursor após a abertura da tag style e tecle <Enter>.
7. Digite o seletor e a abertura da chave: h4{
8. Com a chave fechada automa camente e o cursor posiciona-
do entre elas, tecle <Enter>.
9. Comece digitando a propriedade da declaração: text
10. Observe as opções de sugestão e selecione text-align.

20
 Caderno de Exercícios HTML e CSS

11. Com a propriedade inserida, após os dois pontos, digite o va-

lor: center
12. Finalize a declaração digitando o ponto e vírgula. O bloco de
declaração deve ficar assim:

h4{
text-align:center;
}

13. Tecle a combinação <Ctrl> + <S> para salvar as alterações no

documento.
14. Minimize a janela do Sublime e abra o arquivo "textos.html"
no navegador.

CSS aplicado no ơtulo 4

15. Observe as alterações no quarto tulo. Em seguida, retorne

ao Sublime.
16. Dentro da tag <style>, posicione o cursor após o elemento h4,
digite a vírgula e os outros elementos: , h5, h6

h4, h5, h6{

text-align:center;
}

21
Caderno de Exercícios HTML e CSS

17. Salve as alterações teclando <Ctrl> + <S>. Depois, volte ao na-

vegador e atualize a página.

Visualização no navegador

18. Visualize as alterações nos alinhamentos dos tulos e feche o

navegador.
19. Feche o documento clicando no botão de sua aba e, em segui-
da, feche o Sublime.

9. ESTILIZAÇÃO DE FONTE ͳ 2
Conhecemos novas propriedades para es lizar a fonte de texto, alte-
rando a família de fontes, seu tamanho e es lo. Para colocar em prá ca o
seu aprendizado faça as a vidades a seguir.

22
 Caderno de Exercícios HTML e CSS

1. Para que serve a propriedade font-family? O que ela permite?

2. Qual a diferença entre as fontes do po sans-serif e serif?

Passo a passo:

1. Para começar abra o Sublime Text.

2. Clique em File e selecione Open File.
3. Abra o arquivo textos.html.
4. Apague o atributo e valor presente dentro da tag <p>.
5. Dentro da tag <style> posicione o cursor após a chave de fe-
chamento do primeiro bloco de declarações e tecle <Enter>.
6. Digite a tag e abra a chave: p{
7. Com o cursor posicionado entre as chaves, tecle <Enter>.
8. Digite a declaração: font-family:Georgia;

p{
font-family:Georgia;
}

9. Tecle <Ctrl> + <S> para salvar as alterações no projeto.

23
Caderno de Exercícios HTML e CSS

10. Minimize a janela do Sublime e abra o arquivo textos.html no

navegador.

Visualização no navegador com a fonte Georgia

11. Observe como ficou a fonte do parágrafo. Depois, volte ao

Sublime.
12. Posicione o cursor após o valor Georgia e digite: , serif
13. Salve as alterações no documento e atualize a página no na-
vegador.

Visualização no navegador com a fonte serif

14. Volte ao Sublime, posicione o cursor após a palavra Georgia

e tecle s
15. Salve as alterações e atualize a página no navegador.
16. Visualize as alterações na fonte do parágrafo. Retorne ao Su-
blime e tecle <Ctrl> + <Z> para desfazer a alteração no nome
do primeiro valor.

24
 Caderno de Exercícios HTML e CSS

17. Posicione o cursor após o ponto e vírgula da primeira declara-

ção e tecle <Enter>.
18. Digite a declaração: font-size:30px;
19. Salve as alterações no código e atualize a página.
20. Volte ao Sublime. Selecione e apague as letras px e, no lugar,
digite: pt
21. Salve as alterações no documento e atualize a página.
22. Posicione o cursor após o ponto e vírgula da segunda declara-
ção e tecle <Enter>.
23. Digite a propriedade e seu valor: font-weight:bold;
24. Salve as alterações no código e atualize a página no navegador.
25. Retorne ao Sublime. Posicione o cursor após a terceira decla-
ração e tecle <Enter>.
26. Digite: font-style:italic;
27. O bloco de declarações deve ficar assim:

p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
}

28. Salve as alterações e atualize a página no navegador.

29. Observe como ficou a página. Feche o navegador.
30. Para encerrar feche o documento HTML e o Sublime.

10. EDIÇÃO DE CORES

Nesse capítulo começamos a estudar sobre a edição de cores em do-
cumentos HTML, aprendendo a u lizar seus códigos em RGB e em hexade-
cimal. Desenvolva seu aprendizado realizando as a vidades referentes.

25
Caderno de Exercícios HTML e CSS

1. Qual é o propósito principal do sistema RGB?

2. Por que basta dois dígitos em hexadecimal para representar a in-

tensidade de cada parâmetro RGB?

Passo a passo:

1. Acesse o Menu Iniciar e abra o Sublime Text.

2. Clique em File e selecione Open File.
3. Busque e abra o arquivo "textos.html".
4. Na tag <style> posicione o cursor após a quarta declaração do
bloco e tecle <Enter>.
5. Digite a declaração: color:red;

p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
color:red;
}

6. Tecle a combinação <Ctrl> + <S> para salvar as alterações.

7. Minimize a janela do programa e abra o arquivo "textos.html"
no navegador.

26
 Caderno de Exercícios HTML e CSS

Aplicação da propriedade color

8. Observe a alteração na cor do parágrafo. Depois, retorne ao

Sublime para testar o valor de outra forma.
9. Dê um duplo clique sobre o valor red para selecioná-lo e tecle
<Delete> para apagá-lo.
10. No lugar digite o valor: rgb(255, 0, 0)
11. Salve as alterações e atualize a página no navegador.
12. Observe que a cor con nua a mesma. Volte ao Sublime.
13. Apague o código da cor em RGB. No lugar digite o valor em
hexadecimal: #FF0000
14. Salve as alterações e atualize a página.
15. Visualize que a cor permanece a mesma. Feche o navegador
e o Sublime.

11. ESTILIZAÇÃO DE COR

Es lizamos a cor de um elemento com diferentes exemplos, apren-
dendo também a u lizar um disco de cores. A seguir encontram-se alguns
exercícios para desenvolver seu aprendizado.

27
Caderno de Exercícios HTML e CSS

1. Qual a diferença entre as cores branco e preto?

2. Analise as afirmações:

( ) O Adobe Color oferece recursos para se encontrar uma cor

desejada através de harmonias e modos dis ntos.
( ) Quanto mais próximo do valor 0, o parâmetro fica mais escu-
ro, e quanto mais próximo do FF, ele fica mais intenso.
( ) Quando nos três parâmetros o primeiro dígito de cada par for
0, é possível resumir o código hexadecimal em somente três
caracteres.
( ) Cores análogas são as cores que são opostas entre si, estando
em pontas diferentes do círculo cromá co.

Estão corretas somente:

a) 1 e 2.
b) 1 e 3.
c) 2 e 4.
d) 3 e 4.

Passo a passo:

1. Abra o Sublime Text e o arquivo "textos.html".

2. Apague o valor da propriedade color e, no lugar, digite:
#FF9700

28
 Caderno de Exercícios HTML e CSS

p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
color:#FF9700;
}

Alterando a cor

3. Tecle <Ctrl> + <S> para salvar as alterações.

4. Minimize a janela do Sublime e abra o arquivo "textos.html"
no navegador.

Alterando a propriedade color

5. Volte ao Sublime e apague o valor da propriedade color. No

lugar digite o valor: #FFFFFF
6. Salve as alterações e atualize a página no navegador.
7. Volte ao Sublime e subs tua o valor de color para: #000000
8. Salve o código e atualize a página no navegador para visualizar
as alterações.
9. Abra uma nova aba no navegador.
10. Na barra de endereços digite color.adobe.com e tecle <Enter>.

29
Caderno de Exercícios HTML e CSS

Site da Adobe

11. No disco de cores clique no seletor da cor base e arraste até

um tom de vermelho desejado.
12. Selecione o seu código em hexadecimal. Depois, tecle <Ctrl> +
<C> para copiá-lo.
13. Volte ao Sublime e apague o valor atual da propriedade color.
14. Tecle <Ctrl> + <V> para colar o código do tom de vermelho
escolhido.
15. Salve as alterações no código e volte ao navegador.
16. No navegador clique na aba referente ao documento HTML
para acessá-lo.
17. Atualize a página para visualizar as alterações.
18. Após visualizar a página, feche o navegador e o Sublime.

30
 Caderno de Exercícios HTML e CSS

12. INSERIR COMENTÁRIOS

Durante esse capítulo aprendemos a u lizar os comentários de di-
ferentes maneiras, descrevendo algo do código ou invalidando comandos.
Con nue seus estudos com as a vidades a seguir.

1. Como é a sintaxe do comentário para o HTML?

2. Como se insere um comentário nos códigos em CSS?

Passo a passo:

1. Para iniciar abra o Sublime Text e o arquivo "textos.html".

2. Posicione o cursor após a abertura da tag <head> e tecle <En-
ter>.
3. Inicie a abertura do comentário digitando: <!--
4. Tecle <Espaço> e feche o comentário digitando: -->
5. Posicione o cursor após os traços da abertura, tecle <Espaço>
e digite: Início da Estilização do Texto
6. Tecle <Ctrl> + <S> para salvar as alterações.
7. Minimize a janela do Sublime e abra o arquivo "textos.html"
no navegador com um duplo clique.
8. Volte ao Sublime, posicione o cursor após o fechamento da
tag <style> e tecle <Enter>.

31
Caderno de Exercícios HTML e CSS

9. Digite o comentário: <!-- Fim da Estilização do Texto -->

<head>
<!-- Início da estilização do texto -->
<style>
h4,h5,h6{
text-align:center;
}
p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
color:#FF2A22;
}
</style>
<!-- Fim da Estilização do Texto -->
</head>

Inserindo comentário em uma linha

10. Posicione o cursor antes de iniciar a declaração da proprieda-
de font-weight.
11. Digite a abertura do comentário: /*
12. Posicione o cursor após a declaração da propriedade color e fe-
che o comentário digitando: */

p{
font-family:Georgias, serif;
font-size:30pt;
/*font-weight:bold;
font-style:italic;
color:#FF2A22;*/
}

Inserindo comentário em bloco

13. Salve as alterações e atualize a página no navegador.

14. Após visualizar as alterações, retorne ao Sublime.

32
 Caderno de Exercícios HTML e CSS

Resultado do texto após comentário

15. Apague a abertura e o fechamento do comentário em CSS.

16. Salve as alterações, volte ao navegador e atualize a página.

Texto sem o comentário

17. Observe como a fonte do parágrafo ficou.

18. Volte ao Sublime, posicione o cursor no início da declaração da
propriedade color e digite: /*
19. Posicione o cursor no fim da declaração de cor e digite: */
20. Tecle <Enter> e digite a nova declaração: color:#5121FB;
21. Salve as alterações e atualize a página no navegador.

33
Caderno de Exercícios HTML e CSS

22. Observe a nova cor da fonte do parágrafo. Após isso, feche o

navegador clicando no local indicado.

Nova cor aplicada ao parágrafo

23. Feche o documento HTML e o Sublime.

13. ADICIONAR IMAGENS

Aprendemos a inserir uma imagem na página web, conhecendo
alguns de seus atributos. Faça os exercícios a seguir para treinar o seu
aprendizado.

1. Qual a função da tag < tle>?

34
 Caderno de Exercícios HTML e CSS

2. Para que serve o atributo de imagem src? Como é sua sintaxe?

Passo a passo:

1. Abra o Sublime Text.

2. Clique em File e selecione Save As.
3. Em Tipo mantenha a opção All Files selecionada. No campo
Nome digite: teste.html
4. Com a pasta Documentos definida como local de armazena-
mento, clique em Salvar para confirmar.
5. Comece abrindo a tag html digitando: <html
6. Tecle <Enter> para aceitar a sugestão da tag.
7. Com a estrutura criada, após a abertura da tag < tle> digite:
Teste

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
</body>
</html>

Estrutura criada

8. Clique em File e selecione Save.

9. Acesse o Menu Iniciar e clique em Documentos.
10. Dê um duplo clique sobre o arquivo "teste.html" para abri-lo
no navegador.

35
Caderno de Exercícios HTML e CSS

Título adicionado a página

11. Observe o nome da página mostrado no navegador. Volte para

a pasta Documentos.
12. Clique em Nova pasta na Faixa de Opções e a nomeie como:
Testes HTML
13. Arraste o arquivo "teste.html" para dentro da pasta Testes
HTML.
14. Abra a pasta Testes HTML e crie uma nova pasta com o nome
img.
15. Abra a pasta img. Depois, minimize a janela, busque e abra a
pasta Imagens de Exemplo. Se precisar de ajuda para encon-
trá-la, peça ao seu instrutor.
16. Selecione todos os arquivos e tecle <Ctrl> + <C> para copiá-
-lo. Volte para a pasta img e tecle <Ctrl> + <V> para colar o
arquivo.
17. Retorne ao Sublime. Em seguida, posicione o cursor na linha
dentro da tag <body> e tecle <Tab> para aplicar a indentação
correta.
18. Digite o código: <img src="img/img2.jpg">

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
<img src="img/img2.jpg">
</body>
</html>

Inserindo imagem

36
 Caderno de Exercícios HTML e CSS

19. Salve as alterações no código e atualize a página no navegador.

20. Visualize a imagem e, depois, volte ao Sublime.
21. Posicione o cursor após o atributo src, tecle <Espaço> e digite:
title="Imagem de Exemplo"

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
<img src="img/img2.jpg" title="Imagem de Exemplo">
</body>
</html>

Inserindo ơtulo na imagem

22. Salve as alterações e atualize a página no navegador.

23. Direcione o cursor sobre a imagem e visualize seu nome.

Visualização no navegador do ơtulo da imagem

24. Feche o navegador, a pasta e o Sublime.

14. FORMATOS DE IMAGEM

Nesse capítulo conhecemos diferentes formatos de imagem, estu-
dando suas diferenças e aplicações. A seguir encontram-se algumas a vida-
des referentes ao conteúdo estudado.

37
Caderno de Exercícios HTML e CSS

1. Pelo que é formada uma imagem do po bitmap?

2. Como funciona uma imagem do po vetor?

3. Qual a vantagem do formato PNG em relação ao formato GIF?

4. Relacione os formatos a seguir com suas respec vas descrições:

1. BMP
2. JPG
3. GIF
4. PNG

38
 Caderno de Exercícios HTML e CSS

( ) Possui uma boa taxa de compressão ajustável, permi ndo

equilibrar a qualidade com o tamanho da imagem.
( ) Foi o primeiro formato de imagem com alta taxa de compres-
são, reduzindo consideravelmente o tamanho das imagens.
( ) U liza um algoritmo de compactação muito eficiente, geran-
do imagens de alta qualidade e um tamanho razoável para os
padrões atuais da internet.
( ) Nesse formato não há compressão do arquivo, o tornando
muito pesado.

15. PLANO DE FUNDO

Nesse capítulo aprendemos a alterar a cor do plano de fundo da pági-
na, além de se definir uma imagem para ele. A seguir encontram-se alguns
exercícios para complementar seus estudos.

1. Por que é importante o usuário se preocupar em es lizar os ele-

mentos da página em um arquivo CSS?

2. Relacione as opções a seguir com suas respec vas descrições:

1. Tag link
2. Atributo rel
3. Atributo bgcolor
4. Propriedade background-image

( ) Permite alterar a cor do plano de fundo da página.

( ) É u lizada para vincular um arquivo externo ao documento
HTML.
( ) Define uma imagem como plano de fundo da página.
( ) É aplicado para informar a relação entre o link e sua função.

39
Caderno de Exercícios HTML e CSS

Passo a passo:

1. Abra o Sublime Text e o arquivo "teste.html".

2. Posicione o cursor dentro da abertura da tag <body>, tecle
<Espaço> e digite: bgcolor="#AAAAAA"

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body bgcolor="#AAAAAA">
<img src="img/img2.jpg" title="Imagem de Exemplo">
</body>
</html>

Inserindo cor de fundo na página

3. Tecle <Ctrl> + <S> para salvar as alterações.

4. Busque e abra a pasta Testes HTML no computador e, dentro
dela, abra o arquivo "teste.html" no navegador.

Cor de fundo alterada

5. Observe a cor de fundo da página. Depois, retorne ao Sublime.

6. Apague o atributo bgcolor e seu valor.
7. Salve as alterações no documento.

40
 Caderno de Exercícios HTML e CSS

8. Clique em File e selecione New File para criar um novo arquivo.

9. Com o novo arquivo criado, clique em File e selecione Save As.
10. Defina a pasta Testes HTML como local de armazenamento.
11. Em Tipo mantenha a opção All Files selecionada. No campo
Nome digite: style.css
12. Clique no botão Salvar para confirmar.
13. No arquivo CSS digite o elemento e abra as chaves: body {
14. Com o cursor posicionado entre as chaves, tecle <Enter>.
15. Digite a declaração: background-color:#F945EA;

body{
background-color:#F945EA;
}

Arquivo style.css

16. Salve as alterações no arquivo CSS e volte ao documento HTML.

17. Posicione o cursor após o fechamento da tag < tle> e tecle
<Enter>.
18. Digite a tag:<link rel="stylesheet" href="style.
css">

<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Inserindo o arquivo style.css no código HTML

19. Salve as alterações e atualize a página no navegador.

Alterando a cor de fundo com CSS

41
Caderno de Exercícios HTML e CSS

20. Observe a nova cor de fundo. Depois, volte ao Sublime e aces-

se o arquivo CSS.
21. Selecione a declaração atual e tecle <Delete> para apagá-la.
22. Digite a declaração: background-image:url("img/img1.
jpg");

body{
background-image:url("img/img1.jpg");
}

Arquivo style.css
23. Salve as alterações no código, volte ao navegador e atualize a
página.
24. Visualize a imagem preenchendo o fundo da página. Para en-
cerrar feche o navegador, a pasta, os arquivos e o Sublime.

16. PERSONALIZAÇÃO DE IMAGENS

Aqui aprendemos a realizar a personalização de imagens, aplicando
bordas e alterando a largura e altura. Na sequência encontram-se a vida-
des referentes ao capítulo.

1. O que a propriedade CSS border permite?

2. Em qual ocasião se u liza o valor do tamanho em porcentagem?

42
 Caderno de Exercícios HTML e CSS

Passo a passo:

1. Abra o Sublime Text.

2. Com o programa aberto, abra nele os arquivos "teste.html" e
"style.css", presentes dentro da pasta Testes HTML.
3. No arquivo CSS apague a declaração de plano de fundo.
4. Salve as alterações e acesse o documento HTML.
5. Posicione o cursor após o atributo tle da tag <img>, tecle
<Espaço> e digite: border="10"
6. Salve as alterações no código. Depois, minimize a janela do
Sublime e abra o arquivo "teste.html" no navegador.

Borda inserida na imagem

7. Observe a borda aplicada na imagem. Em seguida, retorne ao

Sublime.

43
Caderno de Exercícios HTML e CSS

8. Apague o atributo border da tag <img>, salve as alterações e

acesse o arquivo CSS.
9. Apague o elemento body e, no lugar, digite: img
10. Dentro do bloco de declarações, digite:
border:3px solid #FF0000;

img{
border:3px solid #FF0000;
}

Arquivo style.css
11. Salve as alterações e atualize a página no navegador.
12. Visualize a nova borda e volte ao Sublime.
13. Acesse o documento HTML, posicione o cursor após o atributo
tle, tecle <Espaço> e digite: height="350" width="350"

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.
css”>
</head>
<body>
<img src="img/img2.jpg" title="Imagem de Exemplo"
height=”350” width=”350”>
</body>
</html>

Alterando o tamanho da imagem

14. Salve as alterações no código, volte ao navegador e atualize a
página.
15. Retorne ao Sublime e apague o atributo height.
16. Selecione o valor de width, tecle <Delete> e, no lugar, digite:
75%
17. Salve as alterações e atualize a página no navegador.

44
 Caderno de Exercícios HTML e CSS

18. Observe as alterações no tamanho da imagem. Depois, dimi-

nua o tamanho da janela do navegador.
19. Após visualizar o novo tamanho da imagem, maximize nova-
mente a janela do navegador.
20. Volte ao Sublime e apague o atributo width da tag <img>.
21. Salve as alterações e acesse o arquivo CSS.
22. Com o cursor posicionado após a declaração atual, tecle <Enter>.
23. Digite a declaração da largura: width:512px;
24. Tecle <Enter> e digite a declaração da altura: height:384px;
25. Salve as alterações no código. O bloco ficará assim:

img{
border:3px solid #FF0000;
width:512px;
height:384px;
}

Arquivo style.css

26. Volte ao navegador e atualize a página.

27. Após visualizar a página, feche o navegador, a pasta, os arqui-
vos e o Sublime.

17. LINKS ͳ 1
Aprendemos a u lizar a tag <a>, inserindo links na página. Faça as
a vidades propostas para colocar em prá ca o seu aprendizado.

1. Para que um fragmento de URL é u lizado?

45
Caderno de Exercícios HTML e CSS

2. Qual a função do atributo target?

Passo a passo:

1. Abra o Sublime Text.

2. Com o programa aberto, abra nele os arquivos "teste.html" e
"style.css", presentes dentro da pasta Testes HTML.
3. No documento HTML posicione o cursor após a abertura da
tag <body> e tecle <Enter>.
4. Digite a tag de link: <a href="https://www.google.
com">Buscar</a><br>
5. Salve as alterações teclando <Ctrl> + <S>.
6. Minimize a janela do Sublime e abra o arquivo "teste.html"
no navegador.
7. Posicione o cursor sobre o link e observe seu caminho na parte
inferior da janela.
8. Dê um clique no link.
9. Clique no botão do navegador para voltar à página anterior.
10. Retorne ao Sublime.
11. Após o fim da tag do primeiro link, tecle <Enter> e digite: <a
href="img/img4.jpg" target="_blank"> Imagem </
a><br>

<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.
css">
</head>
<body>
<a href="https://www.google.com">Buscar</a><br>
<a href="img/img4.jpg" target="_blank">Imagem</a><br>
<img src="img/img2.jpg" title="Imagem de Exemplo"
height="350" width="350">
</body>

Inserindo links

46
 Caderno de Exercícios HTML e CSS

12. Salve as alterações e atualize a página no navegador.

Visualização dos links

13. Clique no link da imagem para abri-la em outra aba.

14. Feche a aba com a imagem e volte ao Sublime.
15. Selecione e apague o valor atual do atributo target. No lugar
digite: _self
16. Salve as alterações e atualize a página no navegador.
17. Clique no link referente à imagem.
18. Volte à página anterior clicando no botão do navegador. De-
pois, feche o navegador.
19. No Sublime tecle <Ctrl> + <Z> até voltar ao valor _blank em
target.
20. Salve as alterações. Depois, feche os arquivos, o Sublime e a
pasta Testes HTML.

18. LINKS ͳ 2
Durante esse capítulo aprendemos a u lizar links que levam para a
mesma página, além de u lizar uma imagem como link. A seguir encon-
tram-se alguns exercícios para prá ca.

47
Caderno de Exercícios HTML e CSS

1. Para que serve o atributo name?

2. O que o atributo target com o valor _blank permite?

Passo a passo:

1. Abra o Sublime Text e o arquivo "teste.html". O arquivo so-

freu algumas modificações para facilitar o trabalho do usuário.
2. Posicione o cursor após o código da terceira imagem e tecle
<Enter>.
3. Digite o tulo: <h2>Bem-vindo</h2>
4. Tecle <Enter> e digite o texto: <p>Bem-vindo ao curso de
HTML e CSS.</p>
5. Posicione o cursor após a tag de abertura do tulo <h2> e di-
gite a tag com o atributo: <a name="chegada">
6. Feche a tag de link, posicionando o cursor antes do fechamen-
to de <h2> e digitando: </a>
7. A linha de código deve ficar assim:

<h2><a name="chegada">Bem-vindo</a></h2>

8. Posicione o cursor após a abertura da tag <body> e tecle

<Enter>.
9. Digite o link: <a href="#chegada">Bem-vindo</a><br>

48
 Caderno de Exercícios HTML e CSS

<body>
<a href="#chegada">Bem-vindo</a><br>
<a href="https://www.google.com">Buscar</a><br>
<a href="img/img4.jpg" target="_blank">Imagem</a><br>
<img src="img/img2.jpg" title="Imagem de Exemplo"><br>
<img src="img/img6.jpg" title="Imagem de Exemplo"><br>
<img src="img/img7.jpg" title="Imagem de Exemplo"><br>
<h2><a name="chegada">Bem-vindo</a></h2>
<p>Bem-vindo ao curso de HTML e CSS.</p>
</body>

Inserindo links

10. Salve as alterações no documento. Minimize a janela do Subli-

me e abra o arquivo "teste.html" no navegador.

Link Bem-vindo

11. Dê um clique no link Bem-vindo.

12. Retorne ao Sublime, posicione o cursor antes da abertura da
tag da primeira imagem e digite: <a>
13. Coloque o cursor após o código da primeira imagem e feche a
tag de link: </a>
14. Posicione o cursor dentro da tag de abertu-
ra do link, tecle <Espaço> e digite o atributo:
href="https://images.google.com"

49
Caderno de Exercícios HTML e CSS

15. Ainda dentro da tag de abertura do link, tecle <Espaço> e digi-

te: target="_blank"
16. O código ficará assim:

<a href="https://images.google.com" target="_blank"> <img

src="img/img2.jpg" title="Imagem de Exemplo"> </a> <br>

Inserindo links
17. Salve as alterações, volte ao navegador e atualize a página.
18. Clique na primeira imagem.
19. Observe o site aberto em uma nova aba. Feche o navegador.

Link aberto em uma nova aba

20. Para finalizar feche o documento "teste.html" e o Sublime.

19. ESTILIZAÇÃO DE LINKS

Nesse capítulo aprendemos a es lizar os links através de códigos CSS.
Para colocar em prá ca o seu aprendizado resolva as a vidades a seguir.

50
 Caderno de Exercícios HTML e CSS

1. Quando o atributo hover é u lizado? O que ele permite?

2. Relacione as propriedades a seguir com suas respec vas funções:

( 1 ) font-family
( 2 ) font-size
( 3 ) color
( 4 ) text-decoraƟon

( ) Pode ser u lizado para remover um efeito do texto.

( ) Serve para alterar a família de fonte.
( ) Es liza a cor da fonte.
( ) Define o tamanho da fonte.

Passo a passo:

1. Abra o Sublime Text e os arquivos "teste.html" e "style.css"

que estão dentro da pasta Testes HTML.
2. No arquivo CSS posicione o cursor após o fechamento do pri-
meiro bloco de declarações e tecle <Enter>.
3. Tecle <Enter> mais uma vez para deixar uma linha em branco
entre os blocos.
4. Inicie o bloco digitando o seletor e abrindo a chave: a{
5. Pressione <Enter> para completar as chaves e aplicar a inden-
tação.

a{
font-family:calibri, sans-serif;
}

Arquivo style.css

51
Caderno de Exercícios HTML e CSS

6. Dentro do bloco digite a declaração:

font-family:Calibri, sans-serif;
7. Salve as alterações. Minimize a janela do Sublime e abra o ar-
quivo "teste.html" no navegador.
8. Retorne ao Sublime e, com o cursor posicionado ao final da pri-
meira declaração, tecle <Enter>.

Links com a cor alterada

9. Digite a declaração: color:#8CD5FF;

10. Salve as alterações e atualize a página no navegador.
11. Após visualizar a nova cor, volte ao Sublime.
12. Tecle <Enter> ao final da segunda declaração e digite:
text-decoration:none;

a{
font-family:calibri, sans-serif;
color:#8CD5FF;
text-decoration:none;
}

Arquivo style.css

13. Salve as alterações no código, volte ao navegador e atualize

a página.
14. Retorne ao Sublime.
15. Coloque o cursor após o fechamento do bloco atual e tecle
<Enter> duas vezes.
16. Inicie o novo bloco digitando: a:hover{

52
 Caderno de Exercícios HTML e CSS

17. Tecle <Enter> para completar as chaves do bloco.

18. Digite a declaração: color:#85FF80;
19. Tecle <Enter> e digite a declaração: font-size:20px;

a:hover{
color:#85FF80;
font-size:20px;
}

Arquivo style.css
20. Salve as alterações e atualize a página no navegador.

Efeito hover aplicado no primeiro link

21. Aponte o cursor sobre o primeiro link.

22. Direcione o cursor para cima dos outros links e observe o efei-
to. Depois, feche o navegador.
23. Para encerrar feche os arquivos e o Sublime.

20. LISTAS ORDENADAS

Aprendemos a criar listas ordenadas no documento HTML, persona-
lizando com diferentes atributos. Resolva os exercícios a seguir para colocar
em prá ca os seus estudos.

53
Caderno de Exercícios HTML e CSS

1. Por que os valores do atributo type são case sensiƟve? Dê um

exemplo de sua aplicação.

2. O que o atributo start permite na lista?

Passo a passo:

1. Para começar abra o Sublime Text.

2. Com um novo arquivo em branco, clique em File e selecione
Save As.
3. Nomeie o arquivo como listas.html.
4. Salve o arquivo dentro da pasta Testes HTML. Se precisar de
ajuda para encontrar a pasta, peça ao seu instrutor.
5. Abra a tag html digitando: <html
6. Aceite a sugestão do programa teclando <Enter>.
7. Com a estrutura do HTML já criada e o cursor posicionado en-
tre as tags de tulo, digite: Exemplo de Listas
8. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar
a indentação correta.
9. Digite a tag de lista ordenada: <ol></ol>
10. Posicione o cursor entre as tags de abertura e fechamento da
lista e tecle <Enter>.
11. Para o primeiro item da lista digite: <li>Primeiro</li>

54
 Caderno de Exercícios HTML e CSS

12. Insira mais quatro itens na lista:

<ol>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ol>

Inserindo lista ordenada

13. Salve as alterações no código. Minimize a janela do Sublime e

abra o arquivo "listas.html" no navegador.
14. Após visualizar a lista, volte ao Sublime.

Visualização da lista no navegador

15. Posicione o cursor na abertura da tag <ol>, tecle <Espaço> e

digite: type="I"

<ol type="I">
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ol>

Alterando o Ɵpo da lista

55
Caderno de Exercícios HTML e CSS

16. Salve as alterações, volte ao navegador e atualize a página.

Visualização da lista no navegador

17. Retorne ao Sublime, apague o valor do atributo type e, no lu-

gar, digite: a
18. Atualize a página no navegador após salvar as alterações no
código.

Visualização da lista no navegador

19. No Sublime apague o valor de type e, no lugar, digite: 1

20. Posicione o cursor após o atributo type e tecle <Espaço>.
21. Digite o atributo start e seu valor: start="10"
22. Salve as alterações, volte ao navegador e atualize a página.
23. Retorne ao Sublime e posicione o cursor dentro da tag de
abertura do terceiro item da lista.
24. Tecle <Espaço> e digite o atributo value: value="6"

56
 Caderno de Exercícios HTML e CSS

<ol type="1" start="10">

<li>Primeiro</li>
<li>Segundo</li>
<li value="6">Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ol>

Alterando o Ɵpo da lista

25. Salve as alterações e atualize a página no navegador.

Visualização no navegador

26. 26. Feche o navegador, os arquivos e o Sublime.

21. LISTAS NÃO ORDENADAS

Aqui aprendemos a criar uma lista não ordenada, a compondo com
imagem, link e textos. Prossiga com os seus estudos fazendo as a vidades
a seguir.

1. Para que são u lizadas as listas não ordenadas?

57
Caderno de Exercícios HTML e CSS

2. Como se define o po de marcador para cada item da lista indivi-

dualmente?

Passo a passo:

1. Abra o Sublime e o arquivo "listas.html".

2. Selecione a tag <ol> e o seu conteúdo. Depois, tecle <Delete>.
3. Com o cursor posicionado dentro de <body>, inicie a lista não
ordenada digitando: <ul></ul>
4. Posicione o cursor entre as chaves de abertura e fechamento
da lista e tecle <Enter>.
5. Digite os itens:

<li>Cachorro</li>
<li>Gato</li>
<li>Peixe</li>
<li>Porco</li>
<li>Cavalo</li>

6. Tecle <Ctrl> + <S> para salvar as alterações. Minimize a janela

do Sublime e abra o arquivo "listas.html" no navegador.

Lista não ordenada

7. Observe a lista não ordenada. Em seguida, retorne ao Sublime.

58
 Caderno de Exercícios HTML e CSS

8. Posicione o cursor dentro da tag de abertura da lista e tecle

<Espaço>. Digite o atributo e seu valor: type="circle"

<ul type="circle">
<li>Cachorro</li>
<li>Gato</li>
<li>Peixe</li>
<li>Porco</li>
<li>Cavalo</li>
</ul>

Alterando o Ɵpo da lista

9. Salve as alterações, volte ao navegador e atualize a página.

Visualização no navegador

10. Após visualizar a página, volte ao Sublime.

11. Apague o valor de type e, no lugar, digite: disc
12. Posicione o cursor dentro da tag de abertura do quinto item.
Então, tecle <Espaço> e digite: type="square"

<ul type="disc">
<li>Cachorro</li>
<li>Gato</li>
<li>Peixe</li>
<li>Porco</li>
<li type="square">Cavalo</li>
</ul>

Alterando o Ɵpo da lista

59
Caderno de Exercícios HTML e CSS

13. Salve as alterações e atualize a página no navegador.

Alterando o Ɵpo do quinto item da lista

14. Volte ao Sublime e apague o texto do primeiro item da lista.

15. Digite a tag de imagem com o atributo referente ao seu cami-
nho: <img src="img/img8.jpg">
16. Posicione o cursor após o atributo src, tecle <Espaço> e digi-
te: width="100" height="100"

<ul type="disc">
<li><img src="img/img8.jpg" width="100" height="100">
</li>
<li>Gato</li>
<li>Peixe</li>
<li>Porco</li>
<li type="square">Cavalo</li>
</ul>

Inserindo imagem no primeiro item

17. Salve as alterações no código e atualize a página no navegador.

18. Retorne ao Sublime. Depois, selecione o texto do quinto item
e tecle <Delete>.
19. Para esse item digite a tag de link: <li type="square"><a
href="img/img7.jpg" target="_blank"> Imagem </
a></li>
20. Salve as alterações, vá para o navegador e atualize a página.
21. Clique no link presente na lista.

60
 Caderno de Exercícios HTML e CSS

22. Feche a aba aberta que contém a imagem.

Arquivo finalizado

23. Para finalizar feche o navegador, o documento HTML e o Su-

blime.

22. CLASSE E ID
Durante esse capítulo foi ensinado a nomear elementos através dos
atributos class e id, evidenciando suas diferenças. Coloque em prá ca seu
aprendizado com os exercícios a seguir.

1. Qual a diferença entre id e classe?

61
Caderno de Exercícios HTML e CSS

2. Como o CSS iden fica uma classe e um id no seletor?

Passo a passo:

1. Comece abrindo o Sublime e o arquivo "listas.html".

2. Apague a tag de imagem presente no primeiro item da lista.
3. Dentro do primeiro item digite: Cachorro
4. Posicione o cursor após o fechamento da tag de tulo, tecle <En-
ter> e digite: <link rel="stylesheet" href="style.
css">
5. Abra o arquivo "style.css" no Sublime.
6. Acesse a aba do documento HTML, posicione o cursor dentro
da tag de abertura do segundo item da lista, tecle <Espaço> e
digite: class="item"

<li class="item">Gato</li>

7. O segundo item deve ficar assim:

8. Salve as alterações e acesse a aba do arquivo CSS.
9. Posicione o cursor após a chave de fechamento do úl mo blo-
co de declarações e tecle <Enter> duas vezes.
10. Digite o seletor e abra a chave do bloco: .item{
11. Tecle <Enter> para organizar o bloco.
12. Digite a declaração: color:#543CFF;
13. O bloco de declarações deve ficar assim:

.item{
color:#543CFF;
}

Arquivo style.css

62
 Caderno de Exercícios HTML e CSS

14. Salve as alterações no código. Minimize o Sublime e abra o ar-

quivo "listas.html" no navegador.

Visualização no navegador

15. Após observar a página, retorne ao Sublime e acesse o docu-

mento HTML.
16. Posicione o cursor dentro da tag de abertura do primeiro item
da lista, tecle <Espaço> e digite: class="item"
17. Salve as alterações e atualize a página no navegador.
18. Volte ao Sublime, posicione o cursor dentro da abertura da tag
do terceiro item da lista, tecle <Espaço> e digite: id="peixe"

<ul type="disc">
<li class="item">Cachorro</li>
<li class="item">Gato</li>
<li id="peixe">Peixe</li>
<li>Porco</li>
<li type="square"><a href="img/img7.jpg" target="
_blank”>Imagem</a></li>
</ul>

Inserindo classe e id na lista

19. Salve as alterações e acesse o arquivo CSS.

20. Posicione o cursor após a chave que fecha o bloco da classe e
tecle <Enter> duas vezes.
21. Digite o seletor com o id e abra as chaves do novo bloco de
declarações: #peixe{

63
Caderno de Exercícios HTML e CSS

22. Tecle <Enter> para organizar o bloco.

23. Digite a declaração para alterar o tamanho da fon-
te: font-size:22px;
24. Tecle <Enter> e digite a declaração para alterar a
cor: color:#B930FF;

#peixe{
font-size:22px;
color:#B930FF;
}

Arquivo style.css
25. Salve as alterações no código e atualize a página no navegador.

Visualização no navegador

26. Após visualizar a página, feche o navegador.

27. Para encerrar feche os arquivos e o Sublime.

23. ATRIBUTOS DE POSICIONAMENTO

Nesse capítulo estudamos as propriedades de margem, reposicio-
nando o elemento na página. Na sequência encontram-se algumas a vida-
des para exercitar o seu entendimento sobre o assunto.

64
 Caderno de Exercícios HTML e CSS

1. Para que serve a propriedade CSS margin?

2. Nas lacunas a seguir marque V para verdadeiro ou F para falso de

acordo com as afirmações:

( ) Quando somente um valor é especificado na propriedade

margin, a mesma margem é aplicada para todos os quatro
lados.
( ) Ao especificar quatro valores na propriedade margin, as mar-
gens são aplicadas aos lados inferior, superior, esquerdo e di-
reito, nesta ordem.
( ) Quando o valor para a margem é escrito com o número e as
letras "px", o tamanho da margem é interpretado em porcen-
tagem, sendo um valor rela vo.
( ) Ao se escrever o valor "auto" para a margem, o navegador
define uma margem adequada para ser u lizada.

Passo a passo:

1. Abra o Sublime com os arquivos "listas.html" e "style.css".

2. Minimize a janela do programa e abra o arquivo "listas.html"
no navegador.
3. Após visualizar a lista, volte ao Sublime e acesse o arquivo CSS.
4. Posicione o cursor após a chave que fecha o úl mo bloco e
tecle <Enter> duas vezes.
5. Digite o seletor com a tag e abra as chaves: ul{
6. Organize o bloco teclando <Enter> entre as chaves.
7. Digite a declaração: margin:10%;

ul{
margin:10%;
}

Arquivo style.css

65
Caderno de Exercícios HTML e CSS

8. Salve as alterações e atualize a página no navegador.

Aplicando a margem com porcentagem

9. Diminua o tamanho da janela do navegador.
10. Clique no botão Maximizar para deixar a janela do navegador
em tela inteira.
11. Retorne ao Sublime e apague o valor em porcentagem.
12. Para a margem digite o valor: 200px 5px 15px 300px

ul{
margin:200px 5px 15px 300px;
}

Arquivo style.css
13. Salve as alterações, volte ao navegador e atualize a página.
14. Reduza o tamanho da janela do navegador.
15. Observe a posição da lista e maximize a janela clicando no bo-
tão referente.
16. Retorne ao Sublime e apague a declaração da propriedade
margin.
17. Digite a declaração: margin-top:100px;

66
 Caderno de Exercícios HTML e CSS

18. Tecle <Enter> e digite: margin-left:auto;

ul{
margin-top:100px;
margin-left:auto;
}

Arquivo style.css
19. Salve as alterações e atualize a página.

Visualização no navegador

20. Visualize como ficou a lista e feche o navegador.

21. Feche os arquivos e o Sublime.

24. DIVS ͳ 1
Foi iniciado o estudo sobre as divs, onde aprendemos a inserir e exibir
uma na página. Desenvolva o seu aprendizado realizando as a vidades a
seguir.

67
Caderno de Exercícios HTML e CSS

1. O que são divs? O que elas permitem?

2. O que a propriedade background permite a um elemento?

Passo a passo:

1. Abra o Sublime Text.

2. Clique em File e selecione New File.
3. Com o novo arquivo criado, clique em File e selecione Save As.
4. Defina a pasta Testes HTML como local de armazenamento. Se
precisar de ajuda para encontrar a pasta, peça ao seu instrutor.
5. Nomeie o arquivo como divs.html e clique em Salvar.
6. Inicie a tag html digitando: <html
7. Tecle <Enter> para aceitar a sugestão do Sublime e criar a es-
trutura básica do documento HTML.
8. Com o cursor posicionado entre as tags de tulo, digite: Divs

<head>
<title>Divs</title>
</head>

Adicionando o ơtulo
9. 9. Posicione o cursor dentro de <body> e tecle <Tab> para apli-
car a indentação correta.

68
 Caderno de Exercícios HTML e CSS

10. Crie a div digitando: <div></div>

11. Posicione o cursor dentro da tag de abertura da div, tecle <Es-
paço> e digite: class="area"

<body>
<div class="area">
</div>
</body>

Adicionando a classe area

12. Salve as alterações no código. Depois, clique em File e selecio-
ne New File.
13. Salve o novo arquivo na pasta Testes HTML com o nome
divs.css.
14. Volte ao documento HTML, posicione o cursor após o fecha-
mento da tag de tulo e tecle <Enter>.
15. Digite a tag para vincular o arquivo CSS:
<link rel="stylesheet" href="divs.css">
16. Salve as alterações, acesse o arquivo CSS, digite o seletor com
a classe e abra as chaves do bloco: .area{
17. Tecle <Enter> para organizar o bloco.
18. Digite a propriedade de largura: width:250px;
19. Tecle <Enter> e digite a propriedade de altura: height:250px;

.area{
width:250px;
heigth:250px;
}

Arquivo divs.css
20. Salve as alterações no código.
21. Minimize a janela do Sublime e abra o arquivo "divs.html" no
navegador.
22. Retorne ao Sublime e, com o cursor posicionado ao final da
segunda declaração, tecle <Enter>.
23. Digite a propriedade e a cor: background-color:#FF402E;

69
Caderno de Exercícios HTML e CSS

Visualização no navegador

24. Salve as alterações, volte ao navegador e atualize a página.

25. Observe a div na página. Depois, volte ao Sublime e apague o
valor de width.
26. No lugar digite o valor em porcentagem: 50%

.area{
width:50%
heigth:250px;
}

Arquivo divs.css
27. Salve as alterações e atualize a página no navegador.
28. Diminua o tamanho da janela do navegador, observe o com-
portamento da div e, depois, maximize a janela.
29. Retorne ao Sublime e apague o valor de width. No lugar digite
o valor fixo: 400px

.area{
width:400px;
heigth:250px;
}
Arquivo divs.css

70
 Caderno de Exercícios HTML e CSS

30. Atualize a página no navegador após salvar as alterações.

Div com 400px de largura

31. Após visualizar a div, feche o navegador, os arquivos e o Su-

blime.

25. DIVS ͳ 2
Aprendemos a posicionar divs na página e alterar o comportamento
entre elas. Faça os exercícios a seguir para colocar em prá ca seus estudos.

1. O que o atributo posiƟon com o valor absolute permite?

71
Caderno de Exercícios HTML e CSS

2. Qual a diferença entre os valores de float top, leŌ e right?

Passo a passo:

1. Abra o Sublime com os arquivos "divs.html" e "divs.css".

2. Posicione o cursor após a tag de fechamento da primeira div
e tecle <Enter>.
3. Digite a tag de uma nova div: <div></div>
4. Coloque o cursor dentro da tag de abertura da nova div, tecle
<Espaço> e digite: class="area"

<body>
<div class="area"></div>
<div class="area"></div>
</body>

Estrutura do HTML
5. Salve as alterações, minimize a janela do programa e abra o ar-
quivo "divs.html" no navegador.
6. Após visualizar as divs, retorne ao Sublime.
7. Acesse o arquivo CSS, posicione o cursor ao final da terceira
declaração e tecle <Enter>.
8. Digite a declaração da margem: margin:5px;

.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
}

Arquivo div.css

72
 Caderno de Exercícios HTML e CSS

9. Salve as alterações, volte ao navegador e atualize a página.

Aplicando margem nas divs

10. Volte ao Sublime, posicione o cursor após a chave de fecha-

mento do primeiro bloco e tecle <Enter> duas vezes.
11. Digite o seletor e abra as chaves do novo bloco: * {
12. Tecle <Enter> para organizar o bloco.
13. Digite a declaração para zerar a margem: margin:0;
14. Após salvar as alterações, atualize a página no navegador.
15. Retorne ao Sublime, posicione o cursor após a quarta declara-
ção do primeiro bloco e tecle <Enter>.
16. Digite a declaração da posição: position:absolute;
17. Tecle <Enter> e digite a coordenada em top: top:100px;

73
Caderno de Exercícios HTML e CSS

18. Pressione <Enter> novamente e digite a coordenada em le :

left:100px;

.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
position:absolute;
top:100px;
left:100px;
}
*{
margin:0;
}

Arquivo divs.css

19. Salve as alterações e atualize a página no navegador.

Visualização no navegador

74
 Caderno de Exercícios HTML e CSS

20. Retorne ao Sublime. Depois, selecione e apague as declara-

ções da posição e das coordenadas leŌ e top.
21. Digite a declaração do float: float:right;

.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:right;
}

Arquivo divs.css

22. Salve as alterações e atualize a página.

Divs posicionadas a direita

23. Volte ao Sublime e apague o valor de float. No lugar digite: left

24. Atualize a página no navegador após salvar as modificações.
25. Feche o navegador, os arquivos e o Sublime.

26. CRIAÇÃO DE LAYOUT ͳ 1

Aqui aprendemos novos recursos para a div, estudando as proprieda-
des padding e overflow. A seguir encontram-se alguns exercícios para com-
plementar seus estudos.

75
Caderno de Exercícios HTML e CSS

1. Qual a função da propriedade padding?

2. O que a propriedade overflow permite?

Passo a passo:

1. Abra o Sublime com os arquivos "divs.html" e "divs.css".

2. No documento HTML posicione o cursor entre as tags da primei-
ra div e digite: <p>Esse é um exemplo de parágrafo.</p>
3. Salve as alterações no código e abra o arquivo "divs.html" no
navegador.

<!DOCTYPE html>
<html>
<head>
<title>Divs</title>
</head>
<body>
<div class="area">
<p>Esse é um exemplo de parágrafo.</p>
</div>
<div class="area"></div>
</body>
</html>

Adicionando um parágrafo
4. Após visualizar a página, volte ao Sublime e acesse o arquivo
CSS.
5. Posicione o cursor após a chave que fecha o segundo bloco de
declarações e tecle <Enter> duas vezes.

76
 Caderno de Exercícios HTML e CSS

6. Digite o seletor e abra as chaves: p{

7. Tecle <Enter> para organizar o bloco.
8. Digite a declaração para alterar o tamanho da fonte:
font-size:60px;
9. Tecle <Enter> e digite a declaração para aplicar o negrito:
font-weight:bold;

p{
font-size:60px;
font-weight:bold;
}

Arquivo divs.css

10. Salve as alterações e atualize a página no navegador.

Parágrafo em negrito na primeira div

11. Retorne ao Sublime, posicione o cursor após a úl ma de-

claração do bloco referente a div, tecle <Enter> e digite:
padding:20px;
12. Após salvar as alterações, atualize a página no navegador.
13. Volte ao Sublime, apague o valor do tamanho da fonte do pa-
rágrafo e, no lugar, digite: 100px

77
Caderno de Exercícios HTML e CSS

14. Salve as alterações e atualize a página no navegador.

15. Retorne ao Sublime, posicione o cursor após a declaração do
padding, tecle <Enter> e digite: overflow:hidden;

.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:left;
padding:20px;
overflow:hidden;
}

Arquivo divs.css

16. Atualize a página no navegador após salvar as alterações.

Propriedade hidden aplicada

17. Volte ao Sublime, apague o valor atual de overflow e, no lugar,

digite: scroll

78
 Caderno de Exercícios HTML e CSS

.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:left;
padding:20px;
overflow:scroll;
}

Arquivo divs.css

18. Salve as alterações e atualize a página.

Propriedade scroll aplicada

19. Arraste a barra de rolagem ver cal até o final e observe o con-
teúdo da div.
20. Feche o navegador, os arquivos e o Sublime.

27. CRIAÇÃO DE LAYOUT ͳ 2

Nesse capítulo conhecemos novos recursos para as divs, definindo
tamanhos máximos para os conteúdos e aplicando sombras. Na sequência
encontram-se alguns exercícios referentes a esse conteúdo.

79
Caderno de Exercícios HTML e CSS

1. O que a propriedade max-width faz?

2. Analise as afirmações:

1. A propriedade box-shadow é u lizada para adicionar efeitos

de sombra em volta de um elemento.
2. Para definir uma altura máxima u liza-se a propriedade min
-height.
3. O seletor universal da página é representado pelo caractere
exclamação (!).
4. A propriedade box-sizing com o valor border-box permite
manter a largura de um elemento fixa.

Estão corretas somente:

a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.

Passo a passo:

1. Comece abrindo o Sublime com os arquivos "divs.html" e

"divs.css".
2. No documento HTML posicione o cursor entre as tags
de abertura e fechamento da segunda div e digite:
<img src="img/img6.jpg">

<div class="area">
<img src="img/img6.jpg">
</div>

Adicionando um parágrafo

80
 Caderno de Exercícios HTML e CSS

3. Salve as alterações no código e abra o arquivo "divs.html" no

navegador.

Imagem inserida na div

4. Após visualizar a imagem dentro da div, volte ao Sublime e
acesse o arquivo CSS.
5. Posicione o cursor após a chave que fecha o bloco de declaza-
ções do parágrafo e tecle <Enter> duas vezes.
6. Digite o seletor e abra as chaves: img{
7. Organize o bloco teclando <Enter>.
8. Digite a declaração: max-width:100%;
9. Salve as alterações e atualize a página no navegador.
10. Retorne ao Sublime. Com o cursor posicionado ao fim
da declaração de max-width, tecle <Enter> e digite:
max-height:100%;

img{
max-width:100%;
max-height:100%;
}

Arquivo divs.css
11. Salve as alterações, volte ao navegador e atualize a página.

81
Caderno de Exercícios HTML e CSS

Propriedades max-width e max-heigth aplicadas

12. Após visualizar a imagem, volte ao Sublime, posicione o cursor

após a declaração dentro do seletor universal e tecle <Enter>.
13. Digite a declaração: box-sizing:border-box;
14. Salve as alterações e atualize a página.
15. Retorne ao Sublime, posicione o cursor após a úl -
ma declaração do bloco da div, tecle <Enter> e digite:
box-shadow:5px 5px 2px #0000FF;

.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:left;
padding:20px;
overflow:scroll;
box-sizing:border-box;
box-shadow:5px 5px 2px #0000FF;
}

Arquivo divs.css

16. Após salvar as alterações, atualize a página.

82
 Caderno de Exercícios HTML e CSS

Visualização no navegador

17. Para encerrar feche o navegador, os arquivos e o Sublime.

28. DISPOSIÇÃO DA PÁGINA

Durante esse capítulo aprendemos a criar uma estrutura de página,
u lizando diferentes divs. A seguir encontram-se alguns exercícios para de-
senvolver seu aprendizado.

1. O que é preciso fazer para iden ficar um id no CSS?

2. Como é possível centralizar os elementos dentro de uma área?

83
Caderno de Exercícios HTML e CSS

Passo a passo:

1. Abra o Sublime Text e crie um novo documento.

2. Salve esse arquivo dentro da pasta Testes HTML com o nome
estrutura.html.
3. Com o documento criado, abra a tag html digitando:<html
4. Tecle <Enter> para aceitar a sugestão do Sublime e criar a es-
trutura do HTML.
5. Com o cursor posicionado entre as tags de tulo, digite:
Exemplo de Estrutura
6. Posicione o cursor dentro de <body>, tecle <Tab> e digite:
<div id="cabecalho"></div>

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Estrutura</title>
</head>
<body>
<div id="cabecalho"></div>
</body>
</html>

Arquivo estrutura.html

7. Salve as alterações no documento e crie um novo arquivo.

8. Salve o novo arquivo com o nome estrutura.css na pasta Tes-
tes HTML.
9. No arquivo CSS digite o bloco de declarações:

#cabecalho {
width:1000px;
height:200px;
background-color:#E8685F;
}

Arquivo estrutura.css

84
 Caderno de Exercícios HTML e CSS

10. Salve as alterações e acesse o documento HTML.

11. Posicione o cursor após a tag do tulo, tecle <Enter> e digite:
<link rel="stylesheet" href="estrutura.css">

<head>
<title>Exemplo de Estrutura</title>
<link rel="stylesheet" href="estrutura.css">
</head>

Inserindo a folha de esƟlo

12. Salve as alterações e, em seguida, abra o arquivo "estrutura.

html" no navegador.
13. Observe a div que representa o cabeçalho da página. Depois,
retorne ao Sublime e acesse o arquivo CSS.

Visualização da div cabecalho

14. Com o cursor posicionado após a chave que fecha o bloco do

cabeçalho, tecle <Enter> duas vezes.
15. Digite o bloco de declarações:

body {
width:1000px;
margin:auto;
}

Arquivo estrutura.css

16. Salve as modificações e acesse o documento HTML.

85
Caderno de Exercícios HTML e CSS

17. Abaixo da primeira div digite: <div id="area1"></div>

18. Salve as alterações e acesse o arquivo CSS.
19. Após o úl mo bloco de declarações, digite o novo bloco:

#area1 {
width:1000px;
height:500px;
background-color:#FFBA6E;
}

Arquivo estrutura.css

20. Após salvar as alterações, atualize a página no navegador.

21. Retorne ao Sublime e acesse o documento HTML.
22. Abaixo da segunda div digite: <div id="area2"></div>
23. Salve as alterações e acesse o arquivo CSS.
24. Digite o bloco com as propriedades:

#area2 {
width:700px;
height:300px;
background-color:#ED81FF;
}

Arquivo estrutura.css

25. Salve as alterações e atualize a página no navegador.

26. Retorne ao Sublime e acesse o documento HTML.
27. Abaixo da terceira div digite: <div id="area3"></div>
28. Salve as modificações e acesse o arquivo CSS.
29. Digite o bloco de declarações:

#area3 {
width:300px;
height:300px;
background-color:#7738E8;
}

Arquivo estrutura.css

86
 Caderno de Exercícios HTML e CSS

30. Salve as alterações e atualize a página.

31. Volte ao Sublime, posicione o cursor após a úl ma declaração
do bloco da div area2, tecle <Enter> e digite: float:left;

#area2 {
width:700px;
height:300px;
background-color:#ED81FF;
float:left;
}

Arquivo estrutura.css

32. Coloque o cursor após a úl ma declaração do bloco referente

a div area3, tecle <Enter> e digite: float:left;

#area3 {
width:300px;
height:300px;
background-color:#7738E8;
float:left;
}

Arquivo estrutura.css

33. Atualize a página no navegador após salvar as alterações no

código.
34. Retorne ao Sublime e acesse o documento HTML.
35. Abaixo da quarta div digite: <div id="rodape"></div>

<body>
<div id="cabecalho"></div>
<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
<div id="rodape"></div>
</body>

Estrutura das divs

87
Caderno de Exercícios HTML e CSS

36. Salve as alterações e acesse o arquivo CSS.

37. Digite o bloco do rodapé com as declarações:

#rodape {
width:1000px;
height:200px;
background-color:#FF827B;
float:left;
}

Arquivo estrutura.css

38. Salve as modificações e atualize a página.

Visualização das divs cabecalho e area1

39. Desça a barra de rolagem para visualizar melhor o rodapé.

40. Feche o navegador, os arquivos e o Sublime.

29. PROJETO DE EXEMPLO ͳ 1

Foi iniciada a criação de um site de exemplo, que será composto por
cinco páginas diferentes, recebendo diversos recursos estudados durante o
curso. Con nue seus estudos com as a vidades referentes.

88
 Caderno de Exercícios HTML e CSS

1. Por que é importante nomear a página inicial de um site com o

nome index?

2. Por que o po de codificação UTF-8 é o mais u lizado?

Passo a passo:

1. Abra o Sublime e crie um novo arquivo.

2. Salve esse arquivo dentro da pasta Projeto de Exemplo, com
o nome index.html. Se precisar de ajuda para encontrar essa
pasta, peça ao seu instrutor.
3. Inicie a estrutura do HTML digitando: <html
4. Confirme a sugestão do programa teclando <Enter>.
5. Com o cursor posicionado entre as tags de tulo, digite:
Página Inicial
6. Posicione o cursor dentro da tag de abertura do HTML, tecle
<Espaço> e digite: lang="pt-br"
7. Posicione o cursor após a tag do tulo, tecle <Enter> e digite:
<meta charset="utf-8">
8. Coloque o cursor dentro de body, tecle <Tab> e digite:
<div class="principal"></div>

89
Caderno de Exercícios HTML e CSS

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Página Inicial</title>
<meta charset="utf-8">
</head>
<body>
<div class="principal"></div>
</body>
</html>

Arquivo index.html

9. Clique em File e selecione New File.

10. Salve o novo arquivo na pasta Projeto de Exemplo com o
nome style.css.
11. Acesse o documento HTML, posicione o cursor após a tag
<meta>, tecle <Enter> e digite: <link rel="stylesheet"
href="style.css">
12. Salve as alterações e acesse o arquivo CSS.
13. Na primeira linha digite o comentário: /*Componentes Gerais*/
14. Tecle <Enter> duas vezes e digite o bloco de declarações do body:

body {
margin:0;
padding:0;
}

Arquivo style.css

15. Tecle <Enter> duas vezes e digite o bloco da div principal:

.principal {
width:900px;
margin:0 auto;
box-shadow:0px 0px 10px black;
}

Arquivo style.css

90
 Caderno de Exercícios HTML e CSS

16. Salve as alterações no código e abra o arquivo "index.html"

no navegador.
17. Após observar a página vazia, feche o navegador.
18. Para encerrar feche os arquivos e o Sublime.

30. PROJETO DE EXEMPLO ͳ 2

Iniciamos a criação do cabeçalho do site de exemplo, adicionando di-
ferentes elementos na página. Na sequência encontram-se a vidades para
pra car seu aprendizado.

1. Qual a função da propriedade display e de seu valor table?

2. O que é preciso fazer para inserir um ícone para um site?

Passo a passo:

1. Inicie o Sublime e abra os arquivos "index.html" e "style.css".

2. No documento HTML posicione o cursor entre as tags de aber-
tura e fechamento da div principal e tecle <Enter>.
3. Digite a div do cabeçalho: <div class="inicio"></div>

<div class="principal">
<div class="inicio">
</div>
</div>

Arquivo index.html

91
Caderno de Exercícios HTML e CSS

4. Posicione o cursor entre a tags de abertura e fechamento da

div do cabeçalho e tecle <Enter>.
5. Digite a div do nome do site: <div class="nome"></div>
6. Tecle <Enter> e digite a div do menu:
<div class="menu"></div>

<div class="principal">
<div class="inicio">
<div class="nome"></div>
<div class="menu"> </div>
</div>
</div>

Arquivo index.html

7. Posicione o cursor entre as tags da div do nome e tecle <Enter>.

8. A par r daqui vamos inserir um nome e imagens para o site.
Para facilitar o seu trabalho, existem imagens já separadas
para servir de exemplo. Porém, o ideal seria você escolher as
imagens desejadas para compor o seu site, assim como esco-
lher o seu nome. Se você escolher as imagens, se atente ao
tamanho delas para serem coerentes com o espaço disponível
e salve-as dentro da pasta img em Projeto de Exemplo.
9. Digite o código do nome da página com o seu link. Se desejar,
você pode escolher outro nome e escrevê-lo no lugar de Foto-
grafando. <a href="index.html" title="Início"><
h1>Fotografando</h1></a>
10. Tecle <Enter> e digite o código da imagem do logo po.
Se você escolher outro logo po, digite o nome do arqui-
vo e sua extensão corretamente no caminho do atributo
src. <a href="index.html" title="Início"><img
src="img/icon.png"></a>
11. Salve as alterações no código e abra o arquivo "index.html"
no navegador.
12. Após observar a página, retorne ao Sublime e acesse o ar-
quivo CSS.

92
 Caderno de Exercícios HTML e CSS

Visualização no navegador

13. Coloque o cursor após a chave que fecha o bloco da div princi-
pal e tecle <Enter> duas vezes.
14. Digite o comentário: /*Cabeçalho*/
15. Pressione <Enter> duas vezes e digite o bloco para a div do
cabeçalho:

.inicio {
display:table;
}

Arquivo style.css

16. Tecle <Enter> duas vezes e digite o bloco da div nome:

.nome {
float:left;
width:360px;
padding:20px;
}

Arquivo style.css

93
Caderno de Exercícios HTML e CSS

17. Tecle <Enter> duas vezes e digite o bloco do tulo da div nome.
Se desejar, você pode alterar a fonte para outra, basta digitar o
seu nome na propriedade font-family.

.nome h1 {
margin:0;
padding:0;
font-family:Century Gothic, sans-serif;
font-size:40px;
text-indent:20px;
float:left;
}

Arquivo style.css

18. Tecle <Enter> duas vezes e digite o bloco da imagem:

.nome img {
float:left;
margin-left:10px;
}

Arquivo style.css

19. Pressione <Enter> duas vezes e digite o bloco do link:

.nome a {
text-decoration:none;
color:#000000;
}

Arquivo style.css

20. Salve as alterações no código e atualize a página no navegador.

21. Retorne ao Sublime e acesse o documento HTML.
22. Posicione o cursor após o fechamen-
to da tag de tulo, tecle <Enter> e digite:
<link rel="shortcut icon" href="img/icon.png">
23. Salve as alterações e atualize a página.

94
 Caderno de Exercícios HTML e CSS

Ícone adicionado no site

24. Feche o navegador, os arquivos e o Sublime.

31. PROJETO DE EXEMPLO ͳ 3

Nesse capítulo complementamos a página inicial, iniciando o seu ro-
dapé. Desenvolva o seu aprendizado realizando as a vidades a seguir.

1. Pelo que o rodapé do site de exemplo foi composto?

2. Relacione as opções a seguir com suas respec vas descrições:

1. Propriedade word-wrap
2. Propriedade text-transform
3. Valor uppercase
4. Recurso hover

95
Caderno de Exercícios HTML e CSS

( ) Transforma os caracteres em maiúsculos.

( ) Aplica uma es lização personalizada para quando o mouse es-
ver em cima de um elemento.
( ) Permite alterar o comportamento dos caracteres de um texto,
seja para deixá-los em caixa alta ou baixa.
( ) Serve para especificar se as linhas serão ou não quebradas
dentro das palavras.

Passo a passo:

1. Abra o Sublime com os arquivos "index.html" e "style.css".

2. No documento HTML posicione o cursor após a tag de fecha-
mento da div início e tecle <Enter> duas vezes.
3. Digite a div do rodapé: <div class="fim></div>
4. Coloque o cursor entre as tags de abertura e fechamento da div
do rodapé e tecle <Enter>.
5. Digite a div para a primeira coluna:
<div class="linksrodape"></div>
6. Tecle <Enter> e digite a div da segunda coluna:
<div class="dadosrodape1"></div>
7. Tecle <Enter> e digite a div da terceira coluna:
<div class="dadosrodape2"></div>
8. Tecle <Enter> e digite a div da quarta coluna:
<div class="imgrodape"></div>

<div class="fim">
<div class="linksrodape"></div>
<div class="dadosrodape1"></div>
<div class="dadosrodape2"></div>
<div class="imgrodape"></div>
</div>

Arquivo index.html

9. Salve as modificações no documento e acesse o arquivo CSS.

10. Posicione o cursor após o fechamento do úl mo bloco de de-
clarações e tecle <Enter> duas vezes.

96
 Caderno de Exercícios HTML e CSS

11. Digite o comentário: /*Rodapé*/

12. Tecle <Enter> duas vezes e digite o bloco de declarações do
rodapé:

.fim {
background-color:#000000;
display:table;
}

Arquivo style.css

13. Tecle <Enter> duas vezes e digite os blocos das quatro colunas:

.linksrodape {
width:185px;
padding:20px;
float:left;
}
.dadosrodape1 {
width:185px;
padding:20px;
float:left;
}
.dadosrodape2 {
width:185px;
padding:20px;
float:left;
word-wrap:break-word;
}
.imgrodape {
width:185px;
padding:20px;
float:left;
}

Arquivo style.css

14. Salve as alterações e acesse o documento HTML.

97
Caderno de Exercícios HTML e CSS

15. Posicione o cursor entre as tags de abertura e fechamento da

div da primeira coluna e tecle <Enter>.
16. Digite o conteúdo da primeira coluna:

<h2>Navegação</h2>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="servicos.html">Serviços</a></li>
<li><a href="clientes.html">Clientes</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>

Arquivo index.html

17. Salve as modificações e abra o arquivo "index.html" no navega-

dor.

Links adicionados ao rodapé

18. Após visualizar a página, retorne ao Sublime e acesse o ar-

quivo CSS.
19. Suba a barra de rolagem, posicione o cursor após o úl mo blo-
co dos componentes gerais e tecle <Enter> duas vezes.

98
 Caderno de Exercícios HTML e CSS

20. Digite o bloco de declarações:

h2 {
margin:0;
padding:0;
font-family:Century Gothic, sans-serif;
font-size:18px;
color:#E85846;
}

Arquivo style.css

21. Desça a barra de rolagem até os blocos referentes ao rodapé,

posicione o cursor após o úl mo bloco de declarações do ro-
dapé e tecle <Enter> duas vezes.
22. Digite o bloco referente ao tulo h2:

.fim h2 {
color:#FFFFFF;
margin-bottom:10px;
text-transform:uppercase;
}

Arquivo style.css
23. Tecle <Enter> duas vezes e digite os blocos da lista:

.linksrodape ul {
list-style:none;
margin:0;
padding:0;
}
.linksrodape ul li a {
text-decoration:none;
color:#FFFFFF;
font-family:Century Gothic, sans-serif;
font-size:16px;
}

99
Caderno de Exercícios HTML e CSS

.linksrodape ul li a:hover
{
font-size:18px;
color:#E85846;
}

Arquivo style.css

24. Após salvar as alterações no código, atualize a página no na-

vegador.

Visualização no navegador

25. Direcione o cursor sobre os cinco links da lista.

26. Para encerrar feche o navegador, os arquivos e o Sublime.

32. PROJETO DE EXEMPLO ͳ 4

Foi finalizado o rodapé da página, inserindo novos conteúdos e es -
lizando suas propriedades. Coloque em prá ca seus estudos resolvendo as
a vidades referentes.

1. Qual a função da propriedade text-indent?

100
 Caderno de Exercícios HTML e CSS

2. Para que serve a propriedade overflow?

Passo a passo:

1. Inicie o Sublime e abra os arquivos "index.html" e "style.css".

2. No documento HTML posicione o cursor entre as tags de aber-
tura e fechamento da segunda coluna e tecle <Enter>.
3. Digite o conteúdo da segunda coluna. Você pode inserir os da-
dos que desejar, u lizando as tags <h2> e <p>. Porém, você
também pode u lizar o exemplo:

<div class="dadosrodape1">
<h2>Fotografando LTDA</h2>
<p>Rua Socorros, 27<br>
Jardim Bela Vista<br>
São Paulo/SP</p>
</div>

Arquivo index.html

4. Salve as alterações no documento. Depois, abra o arquivo "in-

dex.html" no navegador.

Visualização dos dados na segunda coluna

101
Caderno de Exercícios HTML e CSS

5. Após visualizar a página, retorne ao Sublime e acesse o arqui-

vo CSS.
6. Posicione o cursor após o úl mo bloco de declarações dos
componentes gerais e tecle <Enter> duas vezes.
7. Digite o bloco de declarações do parágrafo:

p {
margin:0;
padding:0;
font-family:Century Gothic, sans-serif;
font-size:16px;
color:#FFFFFF;
text-indent:20px;
}

Arquivo style.html

8. Desça a barra de rolagem, posicione o cursor após o úl mo

bloco do rodapé e tecle <Enter> duas vezes. Então, digite o
bloco para as colunas:

.dadosrodape1, .dadosrodape2 {
overflow:hidden;
}

Arquivo style.html
9. Pressione <Enter> duas vezes e digite o bloco referente ao pa-
rágrafo nessas colunas:

.dadosrodape1 p, .dadosrodape2 p {
color:#FFFFFF;
text-indent:0px;
}
Arquivo style.html

10. Salve as alterações e atualize a página no navegador.

102
 Caderno de Exercícios HTML e CSS

Resultado no navegador

11. Retorne ao Sublime e acesse o documento HTML.

12. Posicione o cursor entre as tags de abertura e fechamento da
terceira coluna e tecle <Enter>.
13. Digite o conteúdo dessa coluna. Você pode inserir os dados de-
sejados ou digitar o exemplo:

<h2>Contatos</h2>
<p>(11) 9999-9999<br>
[email protected]</p>

Arquivo index.html

14. Após salvar as alterações no documento, atualize a página.

Visualização terceira coluna

103
Caderno de Exercícios HTML e CSS

15. Retorne ao Sublime, posicione o cursor entre as tags de aber-

tura e fechamento da quarta coluna e tecle <Enter>.
16. Digite o conteúdo dessa coluna:

<h2>Siga-nos</h2>
<ul>
<li><a href="#"><img src="img/miniatura_facebook.png"
title="Facebook"> Facebook</a></li>
<li><a href="#"><img src="img/miniatura_instagram.png"
title="Instagram"> Instagram</a></li>
<li><a href="#"><img src="img/miniatura_flickr.png"
title="Flickr"> Flickr</a></li>
<li><a href="#"><img src="img/miniatura_twitter.png"
title="Twitter"> Twitter</a></li>
</ul>

Arquivo index.html

17. Salve as alterações e atualize a página no navegador.

Visualização da quarta coluna

18. Retorne ao Sublime e acesse o arquivo CSS.

104
 Caderno de Exercícios HTML e CSS

19. Tecle <Enter> duas vezes e digite o bloco do link:

.imgrodape a {
text-decoration:none;
font-family:Century Gothic, sans-serif;
font-size:16px;
color:#FFFFFF;
}

Arquivo style.css
20. Pressione <Enter> duas vezes e digite o bloco da lista:

.imgrodape ul {
list-style:none;
padding:0;
margin:0;
}

Arquivo style.css

21. Tecle <Enter> duas vezes e digite:

.imgrodape ul li {
list-style:none;
padding:0;
margin:0;
margin-bottom:5px;
}

Arquivo style.css

22. Pressione <Enter> duas vezes e digite o bloco do alinhamento

ver cal:

.imgrodape ul li a, .imgrodape ul li img {

vertical-align:middle;
}

Arquivo style.css

105
Caderno de Exercícios HTML e CSS

23. Tecle <Enter> duas vezes e digite o bloco:

.imgrodape ul li img {
height:25px;
width:25px;
}

Arquivo style.css
24. Salve as modificações e atualize a página no navegador.

Visualização no navegador

25. Retorne ao Sublime e acesse o documento HTML.

26. Coloque o cursor após o fechamento da div fim e tecle <Enter>.
27. Digite a div referente aos direitos autorais:
<div class="direitos"></div>
28. Posicione o cursor entre as tags de abertura e fechamento da
nova div e pressione <Enter>.
29. Digite o código:

<div class="direitos">
<h2>© Fotografando LTDA - Todos os direitos
reservados.É proibida a reprodução total ou parcial
sem autorização.</h2>
</div>

Arquivo style.css

106
 Caderno de Exercícios HTML e CSS

30. Salve as alterações e acesse o arquivo CSS.

31. Com o cursor posicionado após o úl mo bloco do rodapé, te-
cle <Enter> duas vezes e digite:

.direitos {
width:880px;
background-color:#303030;
padding:10px;
}

Arquivo style.css

32. Pressione <Enter> duas vezes e digite o bloco do h2:

.direitos h2 {
color:#C0C0C0;
font-size:14px;
text-align:center;
font-weight:normal;
}

Arquivo style.css

33. Após salvar as alterações, atualize a página.

34. Visualize como está a página. Para encerrar feche o navegador,
os arquivos e o Sublime.

33. CRIAÇÃO DE MENU

Aqui aprendemos a criar uma estrutura de menu em um documento
HTML, u lizando uma lista não ordenada. Faça as a vidades referentes para
colocar em prá ca o seu entendimento sobre o assunto.

107
Caderno de Exercícios HTML e CSS

1. Qual é a forma correta de se criar um menu em um documento

HTML?

2. O que acontece quando a página especificada no link não existe ou

está com o endereço errado?

Passo a passo:

1. Abra o Sublime e crie um novo arquivo.

2. Com o arquivo criado, clique em File e selecione Save As.
3. Salve o arquivo dentro da pasta Testes HTML com o nome
menu.html.
4. Inicie a estrutura HTML digitando: <html
5. Confirme a sugestão do programa teclando <Enter>.
6. Com o cursor posicionado entre as tags de tulo, digite:
Exemplo de Menu

<head>
<title>Exemplo de Menu</title>
</head>

Colocando o ơtulo na página

7. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar
a indentação correta.
8. Digite a tag da lista não ordenada: <ul></ul>
9. Posicione o cursor entre as tags de abertura e fechamento da
lista e tecle <Enter>.
10. Digite a tag do primeiro item: <li></li>

108
 Caderno de Exercícios HTML e CSS

11. Coloque o cursor entre as tags de abertura e fechamento do

item e digite a tag de link: <a></a>
12. Posicione o cursor dentro da tag de abertura do link, tecle <Es-
paço> e digite: href="estrutura.html"
13. Coloque o cursor entre as tags de abertura e fechamento do
link e digite: Estrutura

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Menu</title>
</head>
<body>
<ul>
<li><a href="estrutura.html">Estrutura</a></li>
</ul>
</body>
</html>

Arquivo menu.html

14. Salve as alterações no documento. Depois, abra o arquivo

"menu.html" no navegador.

Visualização da página menu.html

15. Clique no link do menu.

16. Após visualizar a página, volte à anterior.
17. Retorne ao Sublime, posicione o cursor após a tag de fecha-
mento do primeiro item e tecle <Enter>.

109
Caderno de Exercícios HTML e CSS

18. Digite o código do segundo item:

<li><a href="divs.html">Divs</a></li>
19. Tecle <Enter> e digite o código do terceiro item:
<li><a href="listas.html">Listas</a></li>
20. Tecle <Enter> e digite o código do quarto item:
<li><a href="teste.html">Teste</a></li>

<ul>
<li><a href="estrutura.html">Estrutura</a></li>
<li><a href="divs.html">Divs</a></li>
<li><a href="listas.html">Listas</a></li>
<li><a href="teste.html">Teste</a></li>
</ul>

Lista criadas

21. Salve as alterações e atualize a página.

Visualização das listas

22. Teste os três novos links e depois volte à página do menu.

23. Retorne ao Sublime, posicione o cursor antes do nome teste.
html e digite: 1

<ul>
<li><a href="estrutura.html">Estrutura</a></li>
<li><a href="divs.html">Divs</a></li>
<li><a href="listas.html">Listas</a></li>
<li><a href="1teste.html">Teste</a></li>
</ul>

Inserindo o número um antes do nome do arquivo

110
 Caderno de Exercícios HTML e CSS

24. Salve as modificações e atualize a página.

25. Clique no quarto link e visualize o erro informado.

Página de erro

26. Feche o navegador.

27. De volta ao Sublime, tecle a combinação <Ctrl> + <Z> para
desfazer a alteração no nome do arquivo.
28. Salve as modificações no documento, feche o arquivo e o Su-
blime.

34. ESTILIZAÇÃO DE MENU

Con nuamos a construção de um menu de exemplo, o es lizando
através de códigos CSS. Na sequência você encontra algumas a vidades re-
ferentes a este capítulo.

111
Caderno de Exercícios HTML e CSS

1. O que o recurso hover permite?

2. Como se define o valor para a propriedade border?

Passo a passo:

1. Comece abrindo o Sublime e o arquivo "menu.html".

2. Crie um novo arquivo e o salve na pasta Testes HTML com o
nome menu.css.
3. Acesse o documento HTML, posicione o cursor após a tag de
tulo e tecle <Enter>.
4. Digite o código para vincular o arquivo CSS:
<link rel="stylesheet" href="menu.css">
5. Posicione o cursor dentro da tag de abertura da lista, tecle
<Espaço> e digite: id="menu"
6. Salve as alterações e acesse o arquivo CSS.
7. Digite o seletor e abra o bloco de declarações: #menu{
8. Tecle <Enter> para organizar o bloco. Depois, digite as decla-
rações:

#menu{
padding:0;
margin:0;
list-style:none;
}

Arquivo menu.css

112
 Caderno de Exercícios HTML e CSS

9. Tecle <Enter> e digite as declarações para a fonte. Se desejar,

você pode escolher outra fonte.
font-family:Tahoma, sans -serif; font-size:22px;
10. Após teclar <Enter>, digite a declaração da largura:
width: 100px;
11. Pressione <Enter> e digite a declaração da borda:
border:1px solid #545454;

#menu{
padding:0;
margin:0;
list-style:none;
font-family:Tahoma, sans-serif;
font-size:22px;
width:100px;
border:1px solid #545454;
}

Arquivo menu.css

12. Salve as alterações no código e abra o arquivo "menu.html"

no navegador.

Visualização do menu

13. Visualize como o menu está ficando. Depois, retorne ao Su-

blime.

113
Caderno de Exercícios HTML e CSS

14. Coloque o cursor após a chave que fecha o primeiro bloco e

tecle <Enter> duas vezes.
15. Digite o bloco de declarações para o item. Se você desejar,
você pode definir outra cor de plano de fundo.

#menu li {
border:1px solid #545454;
background-color:#AAFF91;
}

Arquivo menu.css
16. Salve as alterações e atualize a página no navegador.

Visualização do menu

17. Retorne ao Sublime, tecle <Enter> duas vezes e digite o bloco

do link:

#menu li a {
text-decoration:none;
color:#545454;
}

Arquivo menu.css
18. Após salvar as alterações, atualize a página no navegador.

114
 Caderno de Exercícios HTML e CSS

Visualização do menu

19. Retorne ao Sublime, pressione <Enter> duas vezes e digite os

blocos com o recurso hover:

#menu li:hover {
background-color:#545454;
}
#menu li a:hover {
color:#AAFF91;
}

Arquivo menu.css

20. Salve as modificações e atualize a página.

Recurso hover aplicado no menu

21. Direcione o cursor sobre os itens do menu. Depois, feche o

navegador, os arquivos e o Sublime.

115
Caderno de Exercícios HTML e CSS

35. CRIAÇÃO DE SUBMENU

Durante esse capítulo aprendemos a alterar um menu da ver cal para
a horizontal, além de se inserir um submenu para determinado item. Para
colocar em prá ca o seu aprendizado resolva as a vidades desse capítulo.

1. Basicamente o que é um submenu?

2. Nas lacunas a seguir marque V para verdadeiro ou F para falso de

acordo com as afirmações:

( ) Com a propriedade display se escolhe um alinhamento para o

texto que está con do em uma div.
( ) O valor inline-block da propriedade display faz com que o ele-
mento não seja exibido, o que é ú l para esconder o subme-
nu, por exemplo.
( ) Pode-se melhorar o espaço de um link dentro do item de um
menu, aplicando um padding para a tag <a>.
( ) A criação de um submenu segue a mesma lógica de um menu
comum, ou seja, se cria uma lista não ordenada dentro do
item em questão.

Passo a passo:

1. Abra o Sublime com os arquivos "menu.html" e "menu.css".

2. Acesse o arquivo CSS, posicione o cursor após a declaração do
plano de fundo no bloco dos itens (#menu li) e tecle <Enter>.
3. Digite a declaração: display:inline-block;
4. Tecle <Enter> e digite a declaração: float:left;

116
 Caderno de Exercícios HTML e CSS

#menu li {
border:1px solid #545454;
background-color:#AAFF91;
display:inline-block;
float:left;
}

Arquivo menu.css

5. No bloco do menu apague as declarações de width e border.

6. Salve as alterações no código. Em seguida, abra o arquivo
"menu.html" no navegador.

Visualização do menu

7. Após visualizar o menu, volte ao Sublime.

8. Coloque o cursor após a declaração color no bloco do link
(#menu li a) e tecle <Enter>.
9. Digite a declaração do padding: padding:5px 10px;
10. Após salvar as alterações, atualize a página.

Propriedade padding aplicada

117
Caderno de Exercícios HTML e CSS

11. Volte ao Sublime e acesse o documento HTML.

12. Posicione o cursor antes do fechamento da tag <li> do terceiro
item e tecle <Enter> duas vezes.
13. Coloque o cursor na linha em branco e tecle <Tab> para aplicar
a indentação correta.
14. Digite a lista não ordenada:

<ul>
<li><a href="compras.html">Compras</a></li>
<li><a href="vendas.html">Vendas</a></li>
</ul>

Itens do submenu
15. Salve as alterações no documento e acesse o arquivo CSS.
16. Posicione o cursor após a chave que fecha o úl mo bloco de
declarações e tecle <Enter> duas vezes.
17. Digite o bloco do submenu:

#menu li ul {
position:absolute;
top:28px;
left:-40px;
background-color:#FFFFFF;
display:none;
}

Arquivo menu.css

18. Pressione <Enter> duas vezes e digite o bloco:

#menu li:hover ul, #menu li.over ul {

display:block;
}

Arquivo menu.css

118
 Caderno de Exercícios HTML e CSS

19. Tecle <Enter> duas vezes e digite o bloco:

#menu li ul li {
width:120px;
}

Arquivo menu.css
20. Salve as alterações e atualize a página no navegador.

Visualização do submenu

21. Direcione o cursor sobre o item Listas.

22. Observe como está o submenu. Então, retorne ao Sublime.
23. Posicione o cursor após a declaração float do bloco #menu li
e tecle <Enter>.
24. Digite a declaração da posição rela va: position:relative;
25. Atualize a página após salvar as alterações.
26. Direcione o cursor sobre o item Listas e, depois, sobre os itens
do submenu.

Visualização do menu com submenu

27. Aponte o mouse para fora do submenu. Encerre fechando o

navegador, os arquivos e o Sublime.

119
Caderno de Exercícios HTML e CSS

36. PROJETO DE EXEMPLO ͳ 5

Aqui con nuamos a edição de nosso site de exemplo, inserindo e es-
lizando um menu no cabeçalho. A seguir retomaremos o projeto de exem-
plo para inserir os novos elementos.

1. Pelo que o cabeçalho do site de exemplo foi composto?

2. O que é preciso fazer para exibir os itens de um menu na hori-

zontal?

Passo a passo:

1. Para começar abra o Sublime com os arquivos "index.html"

e "style.css". Eles estão dentro da pasta Projeto de Exemplo.
2. No documento HTML posicione o cursor entre as tags de aber-
tura e fechamento da div do menu e tecle <Enter>.
3. Digite a tag da lista não ordenada: <ul></ul>
4. Coloque o cursor entre as tags de abertura e fechamento da
lista e tecle <Enter>.

120
 Caderno de Exercícios HTML e CSS

5. Digite os códigos dos itens da lista:

<li><a href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="servicos.html">Serviços</a></li>
<li><a href="clientes.html">Clientes</a></li>
<li><a href="contato.html">Contato</a></li>

Itens do menu
6. Salve as alterações no documento e abra o arquivo "index.
html" no navegador.

Visualização do menu

7. Observe como está a página. Depois, retorne ao Sublime e

acesse o arquivo CSS.
8. Desça a barra de rolagem até o úl mo bloco referente ao ca-
beçalho (bloco .nome a).
9. Posicione o cursor após a chave que fecha o úl mo bloco do
cabeçalho e tecle <Enter> duas vezes.

121
Caderno de Exercícios HTML e CSS

10. Digite o bloco de declarações:

.menu {
float:left;
margin-top:15px;
width:460px;
padding:20px;
font-family:Century Gothic, sans-serif;
font-size:16px;
}

CSS do menu

11. Salve as alterações e atualize a página no navegador.

Visualização do menu
12. Retorne ao Sublime, tecle <Enter> duas vezes e digite o bloco
de declarações da lista não ordenada:

.menu ul {
list-style:none;
margin:0;
padding:0;
float:right;
}

CSS da lista do menu

122
 Caderno de Exercícios HTML e CSS

13. Tecle <Enter> duas vezes e digite o bloco para os itens:

.menu ul li {
display:inline-block;
position:relative;
}

CSS da lista do menu

14. Pressione <Enter> duas vezes e digite o bloco do link:

.menu ul li a {
text-decoration:none;
text-transform:uppercase;
padding:5px 10px;
border-radius:5px;
color:#000000;
}

CSS da lista do menu

15. Tecle <Enter> duas vezes e digite o bloco:

.menu ul li a:hover {
background:#E85846;
color:#FFFFFF;
}

CSS da lista do menu

16. Salve as modificações e atualize a página no navegador.

Visualização da página principal

123
Caderno de Exercícios HTML e CSS

17. Direcione o cursor sobre os itens do menu.

18. Feche o navegador, os arquivos e o Sublime.

37. PROJETO DE EXEMPLO ͳ 6

Nesse capítulo finalizamos a edição da página inicial do site de exem-
plo, criando também as outras páginas com somente o cabeçalho e rodapé.
Para pra car seu entendimento sobre o assunto a seguir encontram-se al-
gumas a vidades.

1. Para que serve a propriedade display com o valor table?

2. O que é um texto Lorem ipsum? Qual é sua função?

Passo a passo:

Para auxiliar no seu trabalho, os arquivos do site de exemplo foram

modificados e preparados, já criando os arquivos necessários para as pági-
nas e já inserindo alguns elementos na página inicial.

124
 Caderno de Exercícios HTML e CSS

1. Abra o Sublime e os arquivos "index.html" e "style.css" que

estão dentro da pasta Projeto de Exemplo.
2. Abra o arquivo index.html no navegador.
3. Observe o conteúdo presente na página inicial. Depois, volte
ao Sublime e acesse o arquivo CSS.
4. Desça a barra de rolagem até o final. Posicione o cursor após a
chave que fecha o úl mo bloco de declarações e tecle <Enter>
duas vezes.
5. Digite o comentário: /*Página index*/
6. Tecle <Enter> duas vezes e digite:

#apresentacao {
display:table;
}

Arquivo style.css
7. Pressione <Enter> duas vezes e digite:

#imgapresentacao {
width:600px;
float:left;
}

Arquivo style.css
8. Tecle <Enter> duas vezes e digite:

#descricao {
width:260px;
padding-left:20px;
padding-right:20px;
float:left;
}

Arquivo style.css

125
Caderno de Exercícios HTML e CSS

9. Então, tecle <Enter> duas vezes e digite os dois blocos:

#descricao h2 {
text-align:center;
}
#descricao p {
margin-top:10px;
}

Arquivo style.css
10. Salve as alterações e atualize a página no navegador.

Visualização da página

126
 Caderno de Exercícios HTML e CSS

11. Após visualizar as alterações na página, retorne ao Sublime e

acesse o documento HTML.
12. Posicione o cursor após o fechamento da div de apresentação
e tecle <Enter> duas vezes.
13. Digite a div destaque e seu conteúdo:

<div id="destaque">
<img src="img/ponte.jpg">
<h2>Foto de Jardim Japonês (2012)</h2>
</div>

Arquivo index.html
14. Salve as alterações e acesse o arquivo CSS.
15. Com o cursor posicionado ao fim do úl mo bloco, tecle <En-
ter> duas vezes e digite:

#destaque {
padding-bottom:20px;
text-align:center;
}

Arquivo style.css
16. Após salvar as alterações, atualize a página no navegador.

Visualização da figura no navegador

127
Caderno de Exercícios HTML e CSS

17. Observe o novo conteúdo da página. Depois, volte ao Sublime

e acesse o documento HTML.
18. Com o cursor posicionado após a tag de fechamento da div
destaque, tecle <Enter> duas vezes.
19. Digite os códigos:

<div id="amostras">
<div class="imgamostra">
<img src="img/espinho.jpg">
<h2>Porco-espinho <br>(2009)</h2>
</div>
<div class="imgamostra">
<img src="img/horizonte.jpg">
<h2>Horizonte <br>(2006)</h2>
</div>
<div class="imgamostra">
<img src="img/avermelhado.jpg">
<h2>Céu Avermelhado <br>(2012)</h2>
</div>
<div class="imgamostra">
<img src="img/campo.jpg">
<h2>Campo Florido <br>(2007)</h2>
</div>
</div>

Arquivo index.html

20. Salve as alterações no documento e acesse o arquivo CSS.

21. Com o cursor posicionado ao final do úl mo bloco, tecle <En-
ter> duas vezes e digite o bloco:

#amostras {
display:table;
padding-bottom:20px;
}

Arquivo style.css

128
 Caderno de Exercícios HTML e CSS

22. Pressione <Enter> duas vezes e digite os blocos:

.imgamostra {
float:left;
width:205px;
padding-left:10px;
padding-right:10px;
}
.imgamostra h2 {
text-align:center;
}

Arquivo style.css

23. Salve as alterações e atualize a página no navegador.

Visualizando no navegador

129
Caderno de Exercícios HTML e CSS

24. Vá descendo a barra de rolagem para visualizar todo o conteú-

do da página inicial do site.
25. Feche o navegador, os arquivos e o Sublime.

38. CRIAÇÃO DE FORMULÁRIO

Iniciamos os estudos sobre os formulários, aprendendo a criar um
através de elementos HTML. A seguir encontram-se alguns exercícios para
pra car seu aprendizado.

1. Pelo que um formulário é composto?

2. Analise as afirmações:

1. Os campos do formulário são inseridos através da tag label.

2. O atributo placeholder permite inserir um texto que é exibido
dentro de um campo antes de ele receber seus dados.
3. O atributo for permite redirecionar o cursor para quando a
label é clicada.
4. O método get envia as informações escondidas da página, para
que somente a linguagem de programação consiga vê-las.

Estão corretas somente:

a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.

130
 Caderno de Exercícios HTML e CSS

Passo a passo:

1. Abra o Sublime e crie um novo arquivo.

2. Salve esse arquivo na pasta Testes HTML com o nome formu-
lario.html.
3. Inicie a estrutura do documento digitando: <html
4. Tecle <Enter> para aceitar a sugestão do programa.
5. Com o cursor posicionado entre as tags de tulo, digite:
Exemplo de Formulário

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de formulário</title>
</head>
<body>
</body>
</html>

Estrutura do html

6. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar

a indentação correta.
7. Digite a tag para iniciar um formulário: <form></form>
8. Posicione o cursor dentro da abertura da tag <form>, tecle
<Espaço> e digite: action=" "
9. Tecle <Espaço> e digite o atributo method: method="get"
10. Posicione o cursor entre as tags de abertura e fechamento do
formulário e tecle <Enter>.
11. Digite a tag para o campo de texto: <input type="text">

<body>
<form action=" " method="get">
<input type="text">
</form>
</body>

Código do formulário

131
Caderno de Exercícios HTML e CSS

12. Salve as alterações e abra o arquivo "formulario.html" no na-

vegador.

Visualização do formulário

13. Clique no campo em branco e digite seu nome.

14. Retorne ao Sublime, posicione o cursor após a tag de aber-
tura do formulário e tecle <Enter>.
15. Digite a tag da label: <label>Data:</label>

<body>
<form action=" " method="get">
<label>Data:</label>
<input type="text">
</form>
</body>

Código do formulário

16. Salve as alterações e atualize a página no navegador.

Visualização do formulário

132
 Caderno de Exercícios HTML e CSS

17. Retorne ao Sublime, posicione o cursor após o atributo type, tecle

<Espaço> e digite: placeholder="Digite a data de hoje"

<body>
<form action=" " method="get">
<label>Data:</label>
<input type="text" placeholder="Digite a data
de hoje">
</form>
</body>

Código do formulário

18. Após salvar as alterações, atualize a página.

Visualização no navegador

19. Como exemplo, clique no campo de texto e digite a data atual.

20. Retorne ao Sublime, posicione o cursor dentro da tag de aber-
tura da label, tecle <Espaço> e digite: for="data"
21. Dentro da tag <input>, posicione o cursor após o atributo pla-
ceholder, tecle <Espaço> e digite: id="data"

<form action=" " method="get">

<label for="data">Data:</label>
<input type="text" placeholder="Digite a data de hoje"
id="data">
</form>

Código do formulário

22. Salve as alterações e atualize a página.

133
Caderno de Exercícios HTML e CSS

23. Dê um clique sobre a label e digite a data novamente.

24. Feche o navegador, os arquivos e o Sublime.

39. ESTILIZAÇÃO DE FORMULÁRIO

Aprendemos a inserir mais elementos no formulário, o personalizan-
do com propriedades CSS. Prossiga com seus estudos realizando as a vida-
des referentes a esse capítulo.

1. O que acontece quando se u liza o atributo acƟon sem nenhum

valor?

2. Qual é a diferença entre os atributos id e name?

Passo a passo:

1. Abra o Sublime com o arquivo "formulario.html". Esse arqui-

vo está dentro da pasta Testes HTML.
2. Posicione o cursor após o fechamento da tag <input> do cam-
po de texto e tecle <Enter>.
3. Digite a tag do botão:
<input type="submit" value="Enviar">

134
 Caderno de Exercícios HTML e CSS

<body>
<form action=" " method="get">
<label>Data:</label>
<input type="text" placeholder="Digite a data de
hoje">
<input type="submit" value="Enviar">
</form>
</body>

Código do formulário

4. Salve as alterações e abra o arquivo "formulario.html" no na-

vegador.

Visualização do formulário

5. Clique na label Data e digite a data atual.

6. Clique no botão Enviar.
7. Retorne ao Sublime, posicione o cursor após o atributo id, te-
cle <Espaço> e digite: name="data"
8. Salve as alterações e atualize a página no navegador.
9. Digite uma data no campo de texto e clique em Enviar.
10. Observe as informações na barra de endereços. Depois, retor-
ne ao Sublime.
11. Coloque o cursor após o fechamento da tag <input> do campo
de texto e tecle <Enter>.
12. Digite a tag da label:
<label for="opcao">Você gostou do site?</label>
13. Tecle <Enter> e digite o input do primeiro botão "radio":
<input type="radio" name="opcao" value="sim">Sim

135
Caderno de Exercícios HTML e CSS

14. Pressione <Enter> e digite o input do segundo botão "radio":

<input type="radio" name="opcao" value="nao">Não

<body>
<form action=" " method="get">
<label>Data:</label>
<input type="text" placeholder="Digite a data de
hoje">
<label for="opcao">Você gostou do site?</label>
<input type="radio" name="opcao" value="sim">Sim
<input type="radio" name="opcao" value="nao">Não
<input type="submit" value="Enviar">
</form>
</body>

Código do formulário

15. Salve as modificações e atualize a página.

Visualização do formulário

16. Digite uma data no campo de texto.

17. Marque a opção Não e, depois, marque a opção Sim.
18. Clique no botão Enviar.
19. Visualize as informações na barra de endereços.
20. Retorne ao Sublime, tecle <Enter> e digite:
<label for= "idioma">Idioma:</label>
21. Pressione <Enter> e digite o código do primeiro botão de checa-
gem: <input type="checkbox" name="por">Português

136
 Caderno de Exercícios HTML e CSS

22. Tecle <Enter> e digite o código do segundo botão de checa-

gem: <input type="checkbox" name="ing">Inglês

<body>
<form action=" " method="get">
<label>Data:</label>
<input type="text" placeholder="Digite a data
de hoje">
<label for="opcao">Você gostou do site?</label>
<input type="radio" name="opcao" value="sim">Sim
<input type="radio" name="opcao" value="nao">Não
<label for="idioma">Idioma:</label>
<input type="checkbox" name="por">Português
<input type="checkbox" name="ing">Inglês
<input type="submit" value="Enviar">
</form>
</body>

Código do formulário
23. Após salvar as alterações, atualize a página no navegador.

Visualização do formulário

24. Marque os dois botões de checagem referente ao idioma e

clique em Enviar. Depois, retorne ao Sublime.
25. Com o cursor posicionado após o código do se-
gundo botão de checagem, tecle <Enter> e digite:
<label for= "comentario">Comentário:</label>

137
Caderno de Exercícios HTML e CSS

26. Tecle <Enter> e digite o código da área de texto:

<textarea name="msg"></textarea>

<form action=" " method="get">

<label>Data:</label>
<input type="text" placeholder="Digite a data de hoje">
<label for="opcao">Você gostou do site?</label>
<input type="radio" name="opcao" value="sim">Sim
<input type="radio" name="opcao" value="nao">Não
<label for="idioma">Idioma:</label>
<input type="checkbox" name="por">Português
<input type="checkbox" name="ing">Inglês
<label for="comentario">Comentário:</label>
<textarea name="msg"></textarea>
<input type="submit" value="Enviar">
</form>
Código do formulário
27. Salve as alterações e atualize a página no navegador.
28. Clique e arraste o canto da área de texto para aumentar o seu
tamanho.
29. Digite algo dentro da área de texto e clique em Enviar.
30. Retorne ao Sublime e crie um novo arquivo chamado formu-
lario.css. Salve-o dentro da pasta Testes HTML.
31. No arquivo CSS digite o bloco:

label, textarea {
display:block;
}

CSS do formulário
32. Salve as alterações e acesse o documento HTML.
33. Posicione o cursor após a tag de fecha-
mento do tulo, tecle <Enter> e digite:
<link rel="stylesheet" href="formulario.css">
34. Salve as alterações e atualize a página no navegador.
35. Observe o formulário. Depois, retorne ao Sublime e acesse o
arquivo CSS.

138
 Caderno de Exercícios HTML e CSS

36. Tecle <Enter> duas vezes e digite o bloco:

textarea {
width:250px;
height:150px;
}

CSS do formulário
37. Atualize a página após salvar as alterações no arquivo.

Formulário esƟlizado com CSS

38. Preencha o formulário e escreva um comentário na área de
texto. Após isso, clique no botão Enviar.
39. Para finalizar feche o navegador, os arquivos e o Sublime.

139
Caderno de Exercícios HTML e CSS

40. PROJETO DE EXEMPLO ͳ 7

Nesse capítulo inserimos o conteúdo da página Contato, a qual foi
composta por uma coluna com informações e uma coluna com um formulá-
rio. Faça as a vidades a seguir para colocar em prá ca seus estudos.

1. O que a tag <strong> permite?

2. No CSS o que a propriedade display com o valor table faz?

Passo a passo:

1. Abra o Sublime com os arquivos "contato.html" e "style.css".

Esses arquivos estão dentro da pasta Projeto de Exemplo.
2. No documento HTML posicione o cursor após a tag de fecha-
mento da div do cabeçalho e tecle <Enter> duas vezes.
3. Digite o código da div de conteúdo:
<div id="contatoarea"></div>
4. Posicione o cursor entre as tags de abertura e fechamento da
nova div e tecle <Enter>.
5. Digite a div da primeira coluna:
<div id="dadoscontato"></div>

140
 Caderno de Exercícios HTML e CSS

6. Tecle <Enter> e digite a div da segunda coluna:

<div id="formcontato"></div>
7. Coloque o cursor entre as tags de abertura e fechamento da
div dadoscontato e tecle <Enter>.
8. Digite o tulo h2: <h2>Fotografando LTDA</h2>
9. Tecle <Enter> e digite o código da imagem:
<img src="img/fotografo.jpg">
10. Então, tecle <Enter> e digite a lista não ordenada:

<ul>
<li><strong>Endereço:</strong> <br>Rua Socorros, 27
- Jardim Bela Vista - São Paulo/SP</li>
<li><strong>Telefone:</strong> <br>(11) 9999-9999
</li>
<li><strong>E-mail:</strong> <br>[email protected]
</li>
</ul>

Lista não ordenada

11. Coloque o cursor entre as tags de abertura e fechamento da

div formcontato e tecle <Enter>.
12. Digite o formulário por completo:

<form action=" ">

<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
<label for="nome">Telefone:</label>
<input type="text" name="fone" id="fone">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
<label for="msg">Sua Mensagem:</label>
<textarea name="msg" id="msg"></textarea>
<input type="submit" class="botao" name="enviar"
value="Enviar Mensagem">
</form>

Código do formulário

141
Caderno de Exercícios HTML e CSS

13. Salve as alterações no documento e abra o arquivo contato.

html no navegador.

Visualização no navegador

14. Observe o conteúdo da página. Depois, retorne ao Sublime e

acesse o arquivo CSS.
15. Posicione o cursor após a chave que fecha o úl mo bloco de
declarações e tecle <Enter> duas vezes.
16. Digite o comentário: /*Página Contato*/

142
 Caderno de Exercícios HTML e CSS

17. Pressione <Enter> duas vezes e digite o bloco:

#contatoarea {
width:900px;
display:table;
}

Arquivo CSS

18. Tecle <Enter> duas vezes e digite o bloco:

#dadoscontato {
width:260px;
float:left;
padding:20px;
}

Arquivo CSS

19. Tecle <Enter> duas vezes e digite o bloco do tulo:

#dadoscontato h2 {
margin-bottom:10px;
}

Arquivo CSS
20. Pressione <Enter> duas vezes e digite o bloco para a lista:

#dadoscontato ul {
list-style:none;
padding:0;
margin:0;
font-family:Century Gothic, sans-serif;
font-size:16px;
margin-top:10px;
}

Arquivo CSS

143
Caderno de Exercícios HTML e CSS

21. Tecle <Enter> duas vezes e digite o bloco:

#formcontato {
width:560px;
float:left;
padding:20px;
}

Arquivo CSS

22. Salve as alterações e atualize a página no navegador.

23. Após visualizar a página, retorne ao Sublime.

Visualização no navegador

144
 Caderno de Exercícios HTML e CSS

24. Tecle <Enter> duas vezes e digite o bloco da label:

#formcontato label {
display:block;
font-family:Century Gothic, sans-serif;
font-size:16px;
font-weight:bold;
}

Arquivo CSS

25. Pressione <Enter> duas vezes e digite o bloco para os elementos:

#formcontato input, #formcontato textarea {

display:block;
margin-bottom:20px;
width:100%;
}

Arquivo CSS

26. Tecle <Enter> duas vezes e digite:

#formcontato textarea {
height:200px;
}

Arquivo CSS

27. Pressione <Enter> duas vezes e digite:

#formcontato input .botao {

width:auto;
}

Arquivo CSS

145
Caderno de Exercícios HTML e CSS

28. Após pressionar <Enter> duas vezes, digite o bloco:

input.botao {
background-color:#E85846;
font-family:Century Gothic, sans-serif;
text-transform:uppercase;
padding:5px 10px;
border-radius:5px;
color:#EBEBEB;
cursor:pointer;
}

Arquivo CSS

29. Tecle <Enter> duas vezes e digite:

input.botao:hover {
background-color:#000000;
}

Arquivo CSS
30. Salve as alterações e atualize a página no navegador.

Visualização no navegador

146
 Caderno de Exercícios HTML e CSS

31. Preencha o formulário com as informações desejadas e clique

no botão de envio.
32. Feche o navegador, os arquivos e o Sublime.

41. MAPEAMENTO DE IMAGENS ͳ 1

Aqui aprendemos a aplicar o mapeamento circular em uma imagem.
Resolva as a vidades a seguir para pra car seu aprendizado.

1. No que consiste o mapeamento de imagens?

2. Relacione as opções a seguir com suas respec vas descrições:

1. Tag map
2. Atributo shape
3. Tag area
4. Atributo href

( ) Define o formato do mapeamento.

( ) Determina o link que redirecionará o usuário.
( ) Permite mapear a imagem em determinada região.
( ) Se insere os atributos de formato, coordenadas e o link de
redirecionamento.

Passo a passo:

1. Abra o Sublime e crie um novo arquivo chamado "mapeamen-

to.html". Salve-o dentro da pasta Testes HTML.
2. Inicie a estrutura do HTML digitando: <html
3. Confirme a sugestão do programa teclando <Enter>.

147
Caderno de Exercícios HTML e CSS

4. Com o cursor entre as tags de tulo, digite:

Mapeamento de Imagens
5. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar
a indentação correta.
6. Digite o código da imagem: <img src="img/img1.jpg">

<!DOCTYPE html>
<html>
<head>
<title>Mapeamento de imagens</title>
</head>
<body>
<img src="img/img1.jpg">
</body>
</html>

Arquivo mapeamento.html

7. Abra o arquivo "mapeamento.html" no navegador.

8. Após visualizar a imagem, retorne ao Sublime.
9. Posicione o cursor após a tag de abertura de <body> e tecle
<Enter>.
10. Digite as tags do mapeamento com seu name:
<map name="mapa1"></map>
11. Posicione o cursor entre as tags de abertura e fechamento de
map e tecle <Enter>.
12. Digite a tag da área: <area>
13. Coloque o cursor dentro da tag <area>, tecle <Espaço> e digite
o atributo: shape="circle"
14. Para facilitar já separamos os valores das coordenadas sem
abrir a imagem no Paint. Com o cursor posicionado após o
atributo shape, tecle <Espaço> e digite o atributo das coorde-
nadas: coords="400,450,125"
15. Tecle <Espaço> e digite o atributo:
href="https://www.google.com"
16. Na tag <img> posicione o cursor após o atributo src, tecle <Es-
paço> e digite: usemap="#mapa1"

148
 Caderno de Exercícios HTML e CSS

<body>
<map name="mapa1">
<area shape="circle" coords="400,450,125" href=
"https://www.google.com">
</map>
<img src="img/img1.jpg" usemap="#mapa1">
</body>

Arquivo mapeamento.html

17. Salve as alterações no documento e atualize a página no na-

vegador.
18. Direcione o cursor sobre o canto da imagem e observe que o
cursor não se altera.
19. Agora direcione o cursor sobre o centro da flor.
20. O cursor alterou sua forma para um apontador, indicando que
nessa região da imagem há um link. Dê um clique com o mouse.

Visualização da área clicável

21. Após ser redirecionado para o site do Google, feche o navega-

dor, o arquivo e o Sublime.

149
Caderno de Exercícios HTML e CSS

42. MAPEAMENTO DE IMAGENS ͳ 2

Durante esse capítulo aprendemos a criar um mapeamento retangular
em uma imagem. Na sequência encontram-se algumas a vidades para prá ca.

1. Ao que se referem os valores de uma coordenada?

2. Para que o atributo alt é u lizado?

Passo a passo:

1. Abra o Sublime e o arquivo "mapeamento.html", que está

dentro da pasta Testes HTML.
2. Posicione o cursor após a tag de abertura de <body> e tecle
<Enter>.
3. Digite o código da imagem: <img src="img/img8.jpg">

<img src="img/img8.jpg" usemap="#mapa2">

<map name="mapa1">
<area shape="circle" coords="400,450,125" href=
"https://www.google.com">
</map>

Arquivo mapeamento.html

150
 Caderno de Exercícios HTML e CSS

4. Salve as alterações no documento e abra o arquivo "mapea-

mento.html" no navegador.

Imagem inserida no navegador

5. Retorne ao Sublime, posicione o cursor após a tag de abertura

de <body> e tecle <Enter>.
6. Digite o código: <map name="mapa2"></map>
7. Posicione o cursor entre as tags de abertura e fechamento de
map e tecle <Enter>.
8. Digite a tag area: <area>
9. Coloque o cursor dentro da tag <area>, tecle <Espaço> e digi-
te o atributo: shape="rect"
10. Tecle <Espaço> e digite o atributo das coordenadas:
coords="490,235,725,400"
11. Tecle <Espaço> e digite o atributo do link:
href="img/img2.jpg"
12. Na tag da imagem posicione o cursor após o atributo src, tecle
<Espaço> e digite: usemap="#mapa2"
13. Salve as alterações e atualize a página no navegador.

151
Caderno de Exercícios HTML e CSS

14. Direcione o cursor sobre a parte retangular da montanha.

Visualização da área clicável

15. O símbolo do cursor foi alterado, indicando que nessa região
há um link. Dê um clique com o mouse.
16. Clique no botão do navegador para voltar à página anterior.
Depois, retorne ao Sublime.
17. Na tag <area> posicione o cursor após o atributo href, tecle
<Espaço> e digite: target="_blank"
18. Tecle <Espaço> e digite o atributo Ɵtle:
title="Mapeamento Retangular"
19. Tecle <Espaço> e digite o atributo alt:
alt="Mapeamento de Imagem"
20. Salve o documento e atualize a página.
21. Direcione o cursor sobre a parte retangular da montanha.
22. Repare que o nome da região é exibido. Dê um clique.
23. Após a imagem ser aberta em uma nova aba, feche o navega-
dor, o arquivo e o Sublime.

152
 Caderno de Exercícios HTML e CSS

43. FONTES
Foi ensinado a como u lizar uma família de fonte externa na página.
Para desenvolver seu entendimento acerca do assunto faça os exercícios a
seguir.

1. O que são consideradas fontes internas e fontes externas?

2. O que é possível fazer no Google Fonts?

Passo a passo:

1. Abra o Sublime e crie um novo arquivo chamado "fontes.

html". Salve-o dentro da pasta Testes HTML.
2. Inicie a estrutura do documento HTML digitando: <html
3. Aceite a sugestão do programa teclando <Enter>.
4. Com o cursor posicionado entre as tags de tulo, digite: Fontes
5. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar
a indentação correta.
6. Digite o parágrafo: <p>Exemplo de Parágrafo</p>

153
Caderno de Exercícios HTML e CSS

<!DOCTYPE html>
<html>
<head>
<title>Fontes</title>
</head>
<body>
<p>Exemplo de Parágrafo</p>
</body>
</html>

Arquivo fontes.html

7. Salve as alterações e abra o arquivo "fontes.html" no navegador.

Visualização no navegador
8. Após visualizar o texto, volte ao Sublime e crie um novo arqui-
vo chamado fontes.css. Salve-o na pasta Testes HTML.
9. No arquivo CSS digite o elemento p e abra a chave do bloco: p{
10. Tecle <Enter> para organizar o bloco.
11. Dentro do bloco digite a declaração: font-family:Arial;

p{
font-family:arial;
}

Arquivo CSS

12. Salve as alterações e acesse o documento HTML.

13. Posicione o cursor após a tag de fechamento de tle e tecle
<Enter>. Depois, digite o código para vincular o arquivo CSS:
<link rel="stylesheet" href="fontes.css">

154
 Caderno de Exercícios HTML e CSS

14. Salve as modificações e atualize a página no navegador.

15. Abra uma nova aba no navegador e, na Barra de Endereços,
digite fonts.google.com Tecle <Enter> para acessar o site.
16. Clique no campo Type something e digite: exemplo

Site fonts.google.com

17. Clique no botão de adição da fonte desejada.

18. Clique na barra com a seleção da fonte para expandi-la.
19. Selecione o código HTML da fonte e tecle a combinação <Ctrl>
+ <C> para copiá-lo.
20. Retorne ao Sublime e, com o cursor posicionado após a tag
<link>, tecle <Enter>.

155
Caderno de Exercícios HTML e CSS

21. Tecle a combinação <Ctrl> + <V> para colar o código HTML da

fonte.
22. Salve as alterações e volte ao Google Fonts.
23. Selecione o código em CSS da fonte e o copie teclando <Ctrl>
+ <C>.
24. Retorne ao Sublime e acesse o arquivo CSS.
25. Selecione e apague a declaração atual do font-family.
26. Cole o código da fonte teclando <Ctrl> + <V>.

p{
font-family:Roboto, sans-serif;
}

Arquivo CSS
27. Salve as alterações, acesse a aba de "fontes.html" e atualize
a página.

Visualização no navegador

28. Repare na nova família de fonte do texto. Depois, feche o na-

vegador, os arquivos e o Sublime.

44. RESET E NORMALIZE

Nesse capítulo aprendemos a u lizar o reset e o normalize, conhe-
cendo suas diferenças. Con nue seus estudos com as a vidades a seguir.

156
 Caderno de Exercícios HTML e CSS

1. Qual a diferença entre o reset e o normalize?

2. Analise as afirmações a seguir.

1. A função do reset é deixar todos os elementos HTML sem ne-

nhum es lo no navegador.
2. Ao aplicar o reset em uma página, os espaçamentos são zera-
dos, encostando os elementos nos limites do navegador.
3. O código do reset é consideravelmente maior que o do nor-
malize.
4. Quando já se tem um arquivo CSS vinculado a um documento,
não é possível vincular o reset ou o normalize.

Estão corretas somente:

a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.

Passo a passo:

1. Abra o Sublime com o arquivo "formulario.html", que está

dentro da pasta Testes HTML.
2. Abra o arquivo "formulario.html" em dois navegadores diferen-
tes. Recomendamos abrir no Google Chrome e no MicrosoŌ
Edge.

157
Caderno de Exercícios HTML e CSS

3. Observe as diferenças dos elementos nos dois navegadores.

Depois, no Google Chrome abra uma nova aba.
4. Na Barra de Endereços digite www.google.com e tecle <En-
ter> para acessar o site.
5. Na barra de pesquisa digite Reset CSS e confirme teclando
<Enter>.
6. Entre os resultados, clique no link do site do Meyer Web, que
disponibiliza os códigos do reset.

Site do Meyer Web

158
 Caderno de Exercícios HTML e CSS

7. Selecione os códigos do reset. Em seguida, tecle <Ctrl> + <C>

para copiá-los.
8. Retorne ao Sublime e crie um novo arquivo chamado "reset.
css". Salve-o na pasta Testes HTML.
9. Com o novo arquivo CSS criado, tecle a combinação <Ctrl> +
<V> para colar os códigos.
10. Salve as alterações e acesse o documento HTML.
11. Posicione o cursor após a tag <link> e tecle <Enter>.
12. Digite o código do vínculo com o reset:
<link rel="stylesheet" href="reset.css">
13. Após salvar as alterações, atualize a página no Google Chrome.

Visualização no Chorme
14. Agora atualize a página no MicrosoŌ Edge e observe os ele-
mentos HTML.
15. Para facilitar já se tem o arquivo "normalize.css" na pasta
Testes HTML, basta vinculá-lo no documento HTML. Primeira-
mente, abra o arquivo normalize.css no Sublime.

159
Caderno de Exercícios HTML e CSS

16. Observe o código do normalize. Depois, acesse o documento

HTML.
17. No código de vínculo anterior apague a palavra reset e, no lu-
gar, digite: normalize
18. Salve as alterações no documento. Depois, volte ao Google
Chrome, acesse a página do formulário e atualize-a.

Visualização no Chorme

19. Acesse o MicrosoŌ Edge e atualize a página.

20. Após visualizar as alterações, feche os navegadores, os arqui-
vos e o Sublime.

45. PROJETO DE EXEMPLO ͳ 8

Foi editada a página Sobre do site de exemplo, que foi composta por
elementos textuais sobre o proprietário do site, divididos em duas colunas.
A seguir encontram-se alguns exercícios para prá ca.

160
 Caderno de Exercícios HTML e CSS

1. Pelo que as colunas da página Sobre foram compostas?

2. O que a propriedade display com o valor table possibilita?

Passo a passo:

1. Abra o Sublime com os arquivos "sobre.html" e "style.css", os

quais estão dentro da pasta Projeto de Exemplo.
2. No documento HTML posicione o cursor após a tag de fecha-
mento do cabeçalho e tecle <Enter> duas vezes.
3. Digite a tag da div: <div id="areasobre"></div>
4. Posicione o cursor entre as tags de abertura e fechamento da
nova div e tecle <Enter>.
5. Digite a div da primeira coluna: <div id="sobreinfo"></div>
6. Tecle <Enter> e digite a div da segunda coluna:
<div id="sobredados"></div>
7. Coloque o cursor entre as tags de abertura e fechamento da
div da primeira coluna e tecle <Enter>.
8. Digite o primeiro tulo. Caso desejado, você pode alterar o
texto para o que desejar escrever. <h2>Sobre Mim:</h2>
9. Na sequência, tecle <Enter> e digite um parágrafo de algumas
linhas. Se desejado, pode u lizar o texto Lorem Ipsum como
referência de tamanho.

161
Caderno de Exercícios HTML e CSS

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry’s
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.</p>

Texto do parágrafo

10. A lógica para os próximos elementos da coluna é a mesma,

tento um tulo e um parágrafo. Então, insira esses elementos,
u lizando os exemplos a seguir se desejado.

<h2>Por que escolhi esta profissão?</h2>

<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry’s
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.</p>
<h2>Mais Informações:</h2>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry’s
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.</p>

Texto do parágrafo

11. Salve as alterações e abra o arquivo "sobre.html" no navegador.

Primeira coluna da área sobre

162
 Caderno de Exercícios HTML e CSS

12. Após visualizar a página, retorne ao Sublime e acesse o arqui-

vo CSS.
13. Desça a barra de rolagem até o úl mo bloco de declarações da
página Index, posicione o cursor após a chave que o fecha e
tecle <Enter> duas vezes.
14. Digite o comentário: /*Página Sobre*/
15. Tecle <Enter> duas vezes e digite o bloco:

#areasobre {
display:table;
}

Arquivo CSS
16. Pressione <Enter> duas vezes e digite o bloco:

#sobreinfo {
float:left;
width:560px;
padding:20px;
}

Arquivo CSS
17. Após pressionar <Enter> duas vezes, digite o bloco:

#sobreinfo h2, #sobreinfo p, #sobredados h2 {

margin-bottom:20px;
}

Arquivo CSS
18. Salve as alterações e atualize a página no navegador.
19. Volte ao Sublime e acesse o documento HTML.
20. Posicione o cursor entre as tags de abertura e fechamento da
div da segunda coluna e tecle <Enter>.
21. Digite o tulo: <h2>Formação Profissional:</h2>
22. Tecle <Enter> e digite: <img src="img/snow.jpg">

163
Caderno de Exercícios HTML e CSS

<div id="sobredados">
<h2>Formação Profissional:</h2>
<img src="img/snow.jpg">
</div>

Div sobredados
23. Pressione <Enter> e digite:

<ul>
<li>Design Gráfico</li>
<li>Desenvolvimento Web</li>
</ul>

Lista
24. Tecle <Enter> e digite o tulo:
<h2>Áreas de Conhecimento:</h2>
25. Pressione <Enter> e digite a lista:

<ul>
<li>HTML e CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>

Lista

26. Salve as alterações e acesse o arquivo CSS.

27. Pressione <Enter> duas vezes e digite o bloco:

#sobredados {
float:left;
width:260px;
padding:20px;
}

Lista

164
 Caderno de Exercícios HTML e CSS

28. Tecle <Enter> duas vezes e digite o bloco da lista:

#sobredados ul {
padding-left:20px;
font-family:Century Gothic, sans-serif;
font-size:16px;
}

Lista

29. Salve as alterações e atualize a página.

Visualização no navegador da coluna sobredados

30. Para finalizar feche o navegador, os arquivos e o Sublime.

165
Caderno de Exercícios HTML e CSS

46. PROJETO DE EXEMPLO ͳ 9

Editamos a quarta página do site de exemplo, contendo diferentes
elementos dispostos em linhas e colunas como se fosse uma tabela. Faça as
a vidades referentes para colocar em prá ca os seus estudos.

1. Pelo que a página Serviços foi composta?

2. Qual a diferença entre as tags <tr> e <td>?

Passo a passo:

1. Abra o Sublime com os arquivos "servicos.html" e "style.css",

que estão dentro da pasta Projeto de Exemplo.
2. No documento HTML posicione o cursor após a tag de fecha-
mento do cabeçalho e tecle <Enter> duas vezes.
3. Digite a tag da tabela com o seu id:
<table id="tabela"></table>
4. Posicione o cursor entre as tags de abertura e fechamento da
tabela e tecle <Enter>.
5. Digite as tags das três linhas:

<tr></tr>
<tr></tr>
<tr></tr>

Linhas

166
 Caderno de Exercícios HTML e CSS

6. Posicione o cursor entre as tags de abertura e fechamento da

primeira linha e tecle <Enter>.
7. Digite a tag das três células:

<td></td>
<td></td>
<td></td>

Colunas

8. Coloque o cursor entre as tags de abertura e fechamento da

primeira célula e tecle <Enter>.
9. Digite o código da imagem: <img src="img/estatua.jpg">
10. Tecle <Enter> e digite o código do tulo:
<h2>Estátuas (2010)</h2>
11. U lize a tag <p> para escrever um texto em parágrafo. Se de-
sejar, u lize o Lorem Ipsum como referência.

<p>Lorem Ipsum is simply dummy text of the printing

and type setting industry simply dummy text.</p>

Texto do parágrafo
12. Salve as alterações e abra o arquivo "servicos.html" no nave-
gador.

Página de Serviços

167
Caderno de Exercícios HTML e CSS

13. Após visualizar a página, retorne ao Sublime e acesse o arqui-

vo CSS.
14. Desça a barra de rolagem até o úl mo bloco referente a pá-
gina Sobre. Posicione o cursor após a chave que fecha esse
bloco e tecle <Enter> duas vezes.
15. Digite o comentário: /*Página Serviços*/
16. Pressione <Enter> duas vezes e digite o bloco para a linha:

#tabela tr {
width:900px;
}

Arquivo CSS
17. Tecle <Enter> duas vezes e digite o bloco:

#tabela td {
width:280px;
padding:10px;
}

Arquivo CSS
18. Após teclar <Enter> duas vezes, digite o bloco:

#tabela h2 {
text-align:center;
margin-bottom:10px;
}

Arquivo CSS
19. Salve as modificações e atualize a página.
20. Volte ao Sublime e acesse o documento HTML.
21. Posicione o cursor entre as tags da segunda célula e tecle
<Enter>.

168
 Caderno de Exercícios HTML e CSS

22. Digite o conteúdo dessa célula. Se desejar, u lize o texto Lo-

rem Ipsum como referência.

<img src="img/altar.jpg">
<h2>Altar (2008)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and type setting industry simply dummy text.</p>

Segunda coluna
23. Salve as alterações e atualize a página no navegador.

Visualização no navegador

169
Caderno de Exercícios HTML e CSS

24. Retorne ao Sublime, coloque o cursor entre as tags de abertu-

ra e fechamento da terceira célula e tecle <Enter>.
25. Digite o conteúdo da célula:

<img src="img/noite.jpg">
<h2>Noite na Cidade (2010)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry simply dummy text.</p>

Terceira coluna
26. Atualize a página no navegador após salvar as alterações no
documento.
27. Visualize a linha completa. Depois, retorne ao Sublime.

Visualização no navegador
28. Posicione o cursor entre as tags de abertura e fechamento da
segunda linha e tecle <Enter>.

170
 Caderno de Exercícios HTML e CSS

29. Digite o conteúdo dessa linha:

<td>
<img src="img/inverno.jpg">
<h2>Inverno (2007)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry simply dummy text.</p>
</td>
<td>
<img src="img/bebe.jpg">
<h2>Bebê (2016)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry simply dummy text.</p>
</td>
<td>
<img src="img/flores.jpg">
<h2>Inverno (2014)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry simply dummy text.</p>
</td>

Código da segunda linha

30. Salve as alterações e atualize a página no navegador.

Visualização no navegador

171
Caderno de Exercícios HTML e CSS

31. Após visualizar a página, retorne ao Sublime, posicione o cur-

sor entre as tags de abertura e fechamento da terceira linha e
tecle <Enter>.
32. Digite o conteúdo dessa linha:

<td>
<img src="img/cachoeira.jpg">
<h2>Cachoeira (2012)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry simply dummy text.</p>
</td>
<td>
<img src="img/lago.jpg">
<h2>Lago (2017)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry simply dummy text.</p>
</td>
<td>
<img src="img/castelo.jpg">
<h2>Castelo (2005)</h2>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry simply dummy text.</p>
</td>

Código da terceira linha

33. Após salvar as modificações, atualize a página.

34. Para encerrar feche o navegador, os arquivos e o Sublime.

47. PROJETO DE EXEMPLO ͳ 10

Nesse capítulo encerramos a edição do site de exemplo, inserindo o
conteúdo da página Clientes. Faça os exercícios a seguir e também siga o
passo a passo para finalizar o seu site.

172
 Caderno de Exercícios HTML e CSS

1. Pelo que a página Clientes foi composta?

2. O que a tag <hr> faz?

Passo a passo:

1. Para iniciar abra o Sublime com os arquivos "clientes.html"

e "style.css", que estão dentro da pasta Projeto de Exemplo.
2. Posicione o cursor após a tag que fecha o cabeçalho e tecle
<Enter> duas vezes.
3. Digite a div: <div id="clientesarea"></div>

<div id="clientesarea"></div>

Código da coluna
4. Coloque o cursor entre as tags de abertura e fechamento da
nova div e tecle <Enter>.
5. Digite as divs das colunas:

<div id="clienteslista"></div>
<div id="clientesconteudo"></div>

Código das colunas

173
Caderno de Exercícios HTML e CSS

6. Posicione o cursor entre as tags de abertura e fechamento da

primeira coluna e tecle <Enter>.
7. Digite o conteúdo:

<h2>Clientes:</h2>
<ul>
<li>Jardim Primavera</li>
<li>Viagem em Família</li>
<li>Viagens Paraíso</li>
<li>Conheça Turismo</li>
<li>Nova Ensaios</li>
</ul>

Primeira coluna

8. Coloque o cursor entre as tags de abertura e fechamento da

div da segunda coluna e tecle <Enter>.
9. Digite a div: <div class="conteudolinha"></div>
10. Posicione o cursor entre as tags de abertura e fechamento da
nova div da linha e tecle <Enter>.
11. Digite as divs das colunas internas:

<div class="conteudocol"></div>
<div class="conteudocol"></div>

Código das colunas

12. Posicione o cursor entre as tags de abertura e fechamento da
div da primeira coluna interna e tecle <Enter>.
13. Digite o código da imagem: <img src="img/jardim.jpg">

<div class="conteudocol">
<img src="img/jardim.jpg">
</div>

Inserindo a imagem

14. Coloque o cursor entre as tags de abertura e fechamento da

segunda coluna interna e tecle <Enter>.

174
 Caderno de Exercícios HTML e CSS

15. Digite o tulo h2: <h2>Jardim Primavera</h2>

16. Tecle <Enter> e digite a lista não ordenada:

<ul>
<li><strong>Endereço:</strong>Lorem Ipsum is simply
dummy text</li>
<li><strong>Telefone:</strong>(11) 9999-9999</li>
<li><strong>E-mail:</strong>[email protected]
</li>
</ul>

Código da lista

17. Tecle <Enter> e digite um breve texto de parágrafo. Se desejar,

u lize o Lorem Ipsum como referência,

<p>Lorem Ipsum is simply dummy text of the printing

and typesetting industry. Lorem Ipsum has been the
industry’s standard dummy text.</p>

Texto do parágrafo
18. Posicione o cursor após a tag que fecha a div da linha e tecle
<Enter>. Depois, digite a tag: <hr>
19. Salve as alterações no documento e abra o arquivo "clientes.
html" no navegador.
20. Após visualizar a página, retorne ao Sublime a acesse o arqui-
vo CSS.
21. Desça a barra de rolagem até o úl mo bloco dos componentes
gerais. Coloque o cursor após a chave que fecha esse bloco e
tecle <Enter> duas vezes.
22. Digite o bloco do elemento hr:

hr {
border-top:1px solid #E85846;
}

CSS do hr

175
Caderno de Exercícios HTML e CSS

23. Desça a barra de rolagem até o úl mo bloco da página

Serviços. Posicione o cursor após a chave que fecha esse
bloco, tecle <Enter> duas vezes e digite o comentário:
/*Página Clientes*/
24. Pressione <Enter> duas vezes e digite o bloco:

#clientesarea {
width:900px;
display:table;
}

Arquivo CSS
25. Após teclar <Enter> duas vezes, digite:

#clienteslista {
width:160px;
padding:20px;
float:left;
}

Arquivo CSS

26. Pressione <Enter> duas vezes e digite o bloco:

#clienteslista ul, .conteudocol ul {

list-style:none;
padding:0;
margin:0;
font-family:Century Gothic, sans-serif;
font-size:16px;
margin-bottom:10px;
}

Arquivo CSS

176
 Caderno de Exercícios HTML e CSS

27. Tecle <Enter> duas vezes e digite o bloco:

#clienteslista h2, .conteudocol h2 {

margin-bottom:10px;
}

Arquivo CSS
28. Digite o bloco após teclar <Enter> duas vezes:

#clientesconteudo {
width:700px;
float:left;
}

Arquivo CSS
29. Tecle <Enter> duas vezes e digite:

.conteudolinha {
width:700px;
float:left;
display:table;
}

Arquivo CSS
30. Pressione <Enter> duas vezes e digite:

.conteudocol {
width:310px;
float:left;
padding:20px;
}

Arquivo CSS
31. Salve as alterações e atualize a página no navegador.

177
Caderno de Exercícios HTML e CSS

Página de clientes

32. Observe o conteúdo. Depois, volte ao Sublime e acesse o do-

cumento HTML.

178
 Caderno de Exercícios HTML e CSS

33. Com o cursor posicionado após a tag <hr>, tecle <Enter> e di-
gite o código de toda a segunda linha de conteúdo:

<div class="conteudolinha">
<div class="conteudocol">
<h2>Viagem em Família</h2>
<ul>
<li><strong>Endereço:</strong>Lorem Ip
sum is simply dummy text</li>
<li><strong>Telefone:</strong> (11) 9999-
9999</li>
<li><strong>E-mail:</strong> viagememfamilia@
email.com</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the prin
ting and typesetting industry. Lorem Ipsum has
been the industryry’s standard dummy text.</p>
</div>
<div class="conteudocol">
<img src="img/praia.jpg">
</div>
</div>
<hr>
Conteúdo da segunda linha

34. Após salvar as alterações, atualize a página no navegador.

Visualizando a segunda linha

179
Caderno de Exercícios HTML e CSS

35. Visualize a segunda linha de conteúdo e retorne ao Sublime.

36. Tecle <Enter> e digite o código da terceira linha de conteúdo:

<div class="conteudolinha">
<div class="conteudocol">
<img src="img/arara.jpg">
</div>
<div class="conteudocol">
<h2>Viagens Paraíso</h2>
<ul>
<li><strong>Endereço:</strong> Lorem Ipsum
is simply dummy text</li>
<li><strong>Telefone:</strong> (11) 9999-
9999</li>
<li><strong>E-mail:</strong> viagensparai
[email protected]</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry.Lorem Ipsum
has been the industry’s standard dummy text.</p>
</div>
</div>
<hr>

Conteúdo da terceira linha

37. Salve as alterações e atualize a página no navegador.

Visualizando a terceira linha

180
 Caderno de Exercícios HTML e CSS

38. Observe o novo conteúdo. Em seguida, retorne ao Sublime.

39. Pressione <Enter> e digite o conteúdo da quarta linha:

<div class="conteudolinha">
<div class="conteudocol">
<h2>Conheça Turismo</h2>
<ul>
<li><strong>Endereço:</strong> Lorem Ipsum is
simply dummy text</li>
<li><strong>Telefone:</strong> (11) 9999-
9999</li>
<li><strong>E-mail:</strong> conhecaturismo@
email.com</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the prin
ting and typesetting industry. Lorem Ipsum has
been the industry’s standard dummy text.</p>
</div>
<div class="conteudocol">
<img src="img/neve.jpg">
</div>
</div>
<hr>

Conteúdo da quarta linha

40. Salve as alterações e atualize a página.

Visualização da quarta linha

181
Caderno de Exercícios HTML e CSS

41. Visualize a quarta linha de conteúdo e volte ao Sublime.

42. Tecle <Enter> e digite o conteúdo da quinta linha:
<div class="conteudolinha">
<div class="conteudocol">
<img src="img/cachorro.jpg">
</div>
<div class="conteudocol">
<h2>Nova Ensaios</h2>
<ul>
<li><strong>Endereço:</strong> Lorem Ipsum
is simply dummy text</li>
<li><strong>Telefone:</strong> (11) 9999-
9999</li>
<li><strong>E-mail:</strong> novaensaios@
email.com</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry’s standard dummy text.</p>
</div>
</div>

Conteúdo da quinta linha

43. Após salvar as modificações, atualize a página no navegador.

Visualização da quinta linha

182
 Caderno de Exercícios HTML e CSS

44. Visualize todo o conteúdo da página Clientes.

45. Navegue pelo site de exemplo u lizando o menu no cabeçalho
e os links no rodapé. Visite todas as cinco páginas, visualizan-
do todo o seu conteúdo.
46. Para finalizar feche o navegador, os arquivos e o Sublime.

48. VALIDAÇÃO DE CÓDIGOS

Nesse capítulo aprendemos a como verificar os códigos HTML e CSS
através de uma ferramenta da W3C, obtendo um selo quando está tudo
correto. Faça as a vidades referentes para pra car seu aprendizado.

1. O que é a W3C? Qual é a sua finalidade?

2. Nas lacunas a seguir marque V para verdadeiro ou F para falso de

acordo com as afirmações:

( ) No site da W3C é possível somente analisar os códigos de do-

cumentos HTML através de seu link.
( ) No site da W3C, quando a página está hospedada e online,
pode-se inserir o seu endereço no campo File.
( ) Na aba Validate by File Upload do site da W3C pode-se enviar
um arquivo HTML presente no computador.
( ) Para u lizar um selo basta copiar o seu código e colar no do-
cumento HTML referente.

183
Caderno de Exercícios HTML e CSS

Passo a passo:

1. Abra o Sublime com o arquivo "index.html", que está dentro

da pasta Projeto de Exemplo.
2. Abra o Google Chrome e acesse o site do Google.
3. Na barra de pesquisa digite CSS validaƟon service e confirme
a busca teclando <Enter>.
4. Clique no link referente ao site da W3C.

s do CSS validaƟon service

5. Acesse a aba Por upload de arquivo.

6. Clique no botão Escolher arquivo.
7. Na pasta Projeto de Exemplo selecione o arquivo "style.css" e
clique em Abrir.
8. Valide o arquivo clicando em Verificar.

184
 Caderno de Exercícios HTML e CSS

9. Selecione o código do selo desejado.

10. Tecle a combinação <Ctrl> + <C> para copiar o código.
11. Retorne ao Sublime e desça a barra de rolagem até o fim do
documento.
12. Posicione o cursor após a tag de fechamento da div referente
aos direitos autorais e tecle <Enter>.
13. Cole o código do selo teclando <Ctrl> + <V>.
14. Salve as alterações e abra o arquivo "index.html" no navegador.

Ícone adicionado ao site

15. Visualize o selo no final da página. Depois, feche o navegador,

o arquivo e o Sublime.

185
Caderno de Exercícios HTML e CSS

Anotações:

186