Caderno de Exercicios HTML-CSS
Caderno de Exercicios HTML-CSS
Caderno de Exercicios HTML-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
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
HTML e CSS
Copyright © 2019
Todos os direitos reservados. Lei 9.610/98 e atualizações.
Nenhuma parte desta publicação impressa poderá ser re-
produzida ou transmitida, por quaisquer meios empregados,
sejam eletrônicos, mecânicos, fotográficos, gravações, etc.
Todas as marcas e imagens de hardware, software e outros,
utilizados e/ou mencionados nesta obra, são propriedades de
seus respectivos fabricantes, donos e/ou criadores.
2
Caderno de Exercícios HTML e CSS
Sumário
1. Introdução ao HTML........................................................................................................................... 5
2. Tags Essenciais.................................................................................................................................... 5
3. Práticas de Desenvolvimento............................................................................................................. 6
4. Títulos................................................................................................................................................. 8
5. Tags de Texto...................................................................................................................................... 9
6. Editores HTML.................................................................................................................................. 12
7. Introdução ao CSS............................................................................................................................ 13
8. Estilização de Fonte - 1..................................................................................................................... 14
9. Estilização de Fonte - 2..................................................................................................................... 16
10. Edição de Cores.............................................................................................................................. 17
11. Estilização de Cor............................................................................................................................ 19
12. Inserir Comentários........................................................................................................................ 21
13. Adicionar Imagens.......................................................................................................................... 23
14. Formatos de Imagem...................................................................................................................... 25
15. Plano de Fundo............................................................................................................................... 26
16. Personalização de Imagens............................................................................................................. 29
17. Links - 1........................................................................................................................................... 32
18. Links - 2........................................................................................................................................... 34
19. Estilização de Links......................................................................................................................... 36
20. Listas Ordenadas............................................................................................................................ 38
21. Listas Não Ordenadas..................................................................................................................... 40
22. Classe e ID...................................................................................................................................... 43
23. Atributos de Posicionamento......................................................................................................... 45
24. Divs - 1............................................................................................................................................ 47
25. Divs - 2............................................................................................................................................ 50
26. Criação de Layout - 1...................................................................................................................... 54
27. Criação de Layout - 2...................................................................................................................... 56
28. Disposição da Página...................................................................................................................... 59
29. Projeto de Exemplo - 1................................................................................................................... 63
30. Projeto de Exemplo - 2................................................................................................................... 65
31. Projeto de Exemplo - 3................................................................................................................... 68
32. Projeto de Exemplo - 4................................................................................................................... 72
33. Criação de Menu............................................................................................................................ 77
34. Estilização de Menu........................................................................................................................ 79
35. Criação de Submenu....................................................................................................................... 82
36. Projeto de Exemplo - 5................................................................................................................... 84
37. Projeto de Exemplo - 6................................................................................................................... 87
38. Criação de Formulário.................................................................................................................... 92
3
Caderno de Exercícios HTML e CSS
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 utilidade de um código em HTML. Para colocar em prática o seu aprendizado a seguir encontram-se
alguns exercícios.
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 relacio-
nadas 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 utilizada na construção de
servidores web.
( ) A preocupação fundamental do Web Designer é construir sites complexos com recursos
avançados que não são acessíveis a qualquer usuário.
2. TAGS ESSENCIAIS
Nesse capítulo conhecemos as tags essenciais na estrutura de documentos HTML, criando um
primeiro exemplo. Na sequência encontram-se algumas atividades para exercitar o seu entendimento
sobre o assunto.
5
Caderno de Exercícios HTML e CSS
Passo a passo:
16. Na Área de Trabalho dê um duplo clique sobre o arquivo HTML para abri-lo no navegador.
17. Observe a página web. Para encerrar feche o navegador e exclua o arquivo HTML.
3. PRÁTICAS DE DESENVOLVIMENTO
Durante esse capítulo conhecemos algumas práticas de desenvolvimento que são essenciais
para a codificação de páginas web. Resolva as atividades a seguir para exercitar seus estudos.
6
Caderno de Exercícios HTML e CSS
Passo a passo:
<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 pressione <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. 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.
7
Caderno de Exercícios HTML e CSS
4. TÍTULOS
Aprendemos a adicionar títulos de diferentes níveis em um documento HTML. Exercite seu
aprendizado com as atividades a seguir.
2. Ao alterar um documento HTML, o que é preciso fazer para visualizar suas alterações no na-
vegador?
Passo a passo:
<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 título 1
4. Acesse o menu Arquivo e clique em Salvar como.
5. Defina a Área de Trabalho como local de armazenamento.
6. Expanda as opções da caixa de listagem Tipo e selecione Todos 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.
8
Caderno de Exercícios HTML e CSS
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Adicionando os títulos
5. TAGS DE TEXTO
Nesse capítulo conhecemos novas tags para o texto e aprendemos a inserir atributos para elas.
Faça as atividades a seguir para praticar seu entendimento sobre o assunto.
2. Analise as afirmações:
9
Caderno de Exercícios HTML e CSS
a) 1 e 2.
b) 2 e 3.
c) 1 e 4.
d) 3 e 4.
Passo a passo:
<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 títulos. Depois, clique no botão Restaurar Tamanho para
diminuir o tamanho da janela do navegador.
10
Caderno de Exercícios HTML e CSS
<html>
<head>
</head>
<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>
</html>
Adicionando os alinhamentos
Visualização no navegador
11
Caderno de Exercícios HTML e CSS
6. EDITORES HTML
Conhecemos alguns editores HTML, evidenciando suas características e aprendendo a instalar o
Sublime Text. Faça os exercícios referentes para colocar em prática seus estudos.
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.
Download do programa
12
Caderno de Exercícios HTML e CSS
Botão Preferences
14. Teste todas as opções de esquema de cores disponíveis, observando 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 fazendo os exercícios a seguir.
13
Caderno de Exercícios HTML e CSS
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 estilos.
( ) Com a variação de atualizações dos navegadores, o suporte ao CSS pode variar.
8. ESTILIZAÇÃO DE FONTE - 1
Foi iniciado o estudo prático sobre os códigos CSS, aprendendo a estilizar elementos através da
tag <style>. Na sequência encontram-se exercícios para prática.
Passo a passo:
14
Caderno de Exercícios HTML e CSS
12. Finalize a declaração digitando o ponto e vírgula. O bloco de declaração deve ficar assim:
h4{
text-align:center;
}
17. Salve as alterações teclando <Ctrl> + <S>. Depois, volte ao navegador e atualize a página.
Visualização no navegador
15
Caderno de Exercícios HTML e CSS
9. ESTILIZAÇÃO DE FONTE - 2
Conhecemos novas propriedades para estilizar a fonte de texto, alterando a família de fontes,
seu tamanho e estilo. Para colocar em prática o seu aprendizado faça as atividades a seguir.
Passo a passo:
16
Caderno de Exercícios HTML e CSS
p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
}
17
Caderno de Exercícios HTML e CSS
2. Por que basta dois dígitos em hexadecimal para representar a intensidade de cada parâmetro
RGB?
Passo a passo:
p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
color:red;
}
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)
18
Caderno de Exercícios HTML e CSS
2. Analise as afirmações:
( ) O Adobe Color oferece recursos para se encontrar uma cor desejada através de harmo-
nias e modos distintos.
( ) Quanto mais próximo do valor 0, o parâmetro fica mais escuro, 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ático.
a) 1 e 2.
b) 1 e 3.
c) 2 e 4.
d) 3 e 4.
Passo a passo:
p{
font-family:Georgias, serif;
font-size:30pt;
font-weight:bold;
font-style:italic;
color:#FF9700;
}
19
Caderno de Exercícios HTML e CSS
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 substitua 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>.
Site da Adobe
20
Caderno de Exercícios HTML e CSS
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.
Passo a passo:
<head>
<!-- Início da estilização do texto -->
<style>
h4,h5,h6{
text-align:center;
}
</style>
</head>
21
Caderno de Exercícios HTML e CSS
<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>
22
Caderno de Exercícios HTML e CSS
23
Caderno de Exercícios HTML e CSS
Passo a passo:
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
</body>
</html>
Estrutura criada
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 encontrá-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">
<body>
<img src="img/img2.jpg">
</body>
Inserindo imagem
24
Caderno de Exercícios HTML e CSS
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
<img src="img/img2.jpg" title="Imagem de Exemplo">
</body>
</html>
25
Caderno de Exercícios HTML e CSS
1. BMP
2. JPG
3. GIF
4. PNG
( ) Possui uma boa taxa de compressão ajustável, permitindo equilibrar a qualidade com o
tamanho da imagem.
( ) Foi o primeiro formato de imagem com alta taxa de compressão, reduzindo consideravel-
mente o tamanho das imagens.
( ) Utiliza um algoritmo de compactação muito eficiente, gerando imagens de alta qualida-
de 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.
26
Caderno de Exercícios HTML e CSS
1. Tag link
2. Atributo rel
3. Atributo bgcolor
4. Propriedade background-image
Passo a passo:
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body bgcolor="#AAAAAA">
<img src="img/img2.jpg" title="Imagem de Exemplo">
</body>
</html>
27
Caderno de Exercícios HTML e CSS
body{
background-color:#F945EA;
}
Arquivo style.css
<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
20. Observe a nova cor de fundo. Depois, volte ao Sublime e acesse 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
28
Caderno de Exercícios HTML e CSS
24. Visualize a imagem preenchendo o fundo da página. Para encerrar feche o navegador, a
pasta, os arquivos e o Sublime.
Passo a passo:
29
Caderno de Exercícios HTML e CSS
5. Posicione o cursor após o atributo title 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.
img{
border:3px solid #FF0000;
}
Arquivo style.css
30
Caderno de Exercícios HTML e CSS
<!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>
31
Caderno de Exercícios HTML e CSS
img{
border:3px solid #FF0000;
width:512px;
height:384px;
}
Arquivo style.css
17. LINKS - 1
Aprendemos a utilizar a tag <a>, inserindo links na página. Faça as atividades propostas para
colocar em prática o seu aprendizado.
32
Caderno de Exercícios HTML e CSS
Passo a passo:
<!DOCTYPE html>
<html>
<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>
</html>
Inserindo links
12. Salve as alterações e atualize a página no navegador.
33
Caderno de Exercícios HTML e CSS
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 utilizar links que levam para a mesma página, além de uti-
lizar uma imagem como link. A seguir encontram-se alguns exercícios para prática.
Passo a passo:
<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 Sublime e abra o arquivo "teste.
html" no navegador.
34
Caderno de Exercícios HTML e CSS
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 abertura do link, tecle <Espaço> e digite o atributo:
href="https://images.google.com"
15. Ainda dentro da tag de abertura do link, tecle <Espaço> e digite: target="_blank"
16. O código ficará assim:
Inserindo links
35
Caderno de Exercícios HTML e CSS
( 1 ) font-family
( 2 ) font-size
( 3 ) color
( 4 ) text-decoration
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 primeiro 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 indentação.
6. Dentro do bloco digite a declaração: font-family:Calibri, sans-serif;
img{
border:3px solid #FF0000;
width:512px;
height:384px;
}
a{
font-family:calibri, sans-serif;
}
Arquivo style.css
7. Salve as alterações. Minimize a janela do Sublime e abra o arquivo "teste.html" no navega-
dor.
8. Retorne ao Sublime e, com o cursor posicionado ao final da primeira declaração, tecle
<Enter>.
36
Caderno de Exercícios HTML e CSS
img{
border:3px solid #FF0000;
width:512px;
height:384px;
}
a{
font-family:calibri, sans-serif;
color:#8CD5FF;
text-decoration:none;
}
a:hover{
color:#85FF80;
font-size:20px;
}
Arquivo style.css
20. Salve as alterações e atualize a página no navegador.
21. Aponte o cursor sobre o primeiro link.
22. Direcione o cursor para cima dos outros links e observe o efeito. Depois, feche o navegador.
23. Para encerrar feche os arquivos e o Sublime.
37
Caderno de Exercícios HTML e CSS
1. Por que os valores do atributo type são case sensitive? Dê um exemplo de sua aplicação.
Passo a passo:
<ol>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ol>
13. Salve as alterações no código. Minimize a janela do Sublime e abra o arquivo "listas.html"
no navegador.
38
Caderno de Exercícios HTML e CSS
<ol type="I">
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ol>
39
Caderno de Exercícios HTML e CSS
Visualização no navegador
Passo a passo:
40
Caderno de Exercícios HTML e CSS
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.
<ul type="circle">
<li>Cachorro</li>
<li>Gato</li>
<li>Peixe</li>
<li>Porco</li>
<li>Cavalo</li>
</ul>
Visualização no navegador
41
Caderno de Exercícios HTML e CSS
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>
<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>
<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"><a href="img/img7.jpg" target="_blank">Imagem</a></li>
</ul>
42
Caderno de Exercícios HTML e CSS
Arquivo finalizado
22. CLASSE E ID
Durante esse capítulo foi ensinado a nomear elementos através dos atributos class e id, eviden-
ciando suas diferenças. Coloque em prática seu aprendizado com os exercícios a seguir.
Passo a passo:
43
Caderno de Exercícios HTML e CSS
<li class="item">Gato</li>
.item{
color:#543CFF;
}
Arquivo style.css
14. Salve as alterações no código. Minimize o Sublime e abra o arquivo "listas.html" no na-
vegador.
Visualização no navegador
15. Após observar a página, retorne ao Sublime e acesse o documento 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>
44
Caderno de Exercícios HTML e CSS
#peixe{
font-size:22px;
color:#B930FF;
}
Arquivo style.css
Visualização no navegador
2. Nas lacunas a seguir marque V para verdadeiro ou F para falso de acordo com as afirmações:
45
Caderno de Exercícios HTML e CSS
Passo a passo:
ul{
margin:10%;
}
Arquivo style.css
ul{
margin:200px 5px 15px 300px;
}
Arquivo style.css
46
Caderno de Exercícios HTML e CSS
ul{
margin-top:100px;
margin-left:auto;
}
Arquivo style.css
Visualização no navegador
24. DIVS - 1
Foi iniciado o estudo sobre as divs, onde aprendemos a inserir e exibir uma na página. Desenvol-
va o seu aprendizado realizando as atividades a seguir.
Passo a passo:
47
Caderno de Exercícios HTML e CSS
<!DOCTYPE html>
<html>
<head>
<title>Divs</title>
</head>
<body>
<div class="area">
</div>
</body>
</html>
Estrutura do HTML
12. Salve as alterações no código. Depois, clique em File e selecione 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 fechamento da tag de tí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
48
Caderno de Exercícios HTML e CSS
Visualização no navegador
.area{
width:50%
heigth:250px;
}
Arquivo divs.css
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
49
Caderno de Exercícios HTML e CSS
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ática seus estudos.
Passo a passo:
50
Caderno de Exercícios HTML e CSS
<!DOCTYPE html>
<html>
<head>
<title>Divs</title>
</head>
<body>
<div class="area"></div>
<div class="area"></div>
</body>
</html>
Estrutura do HTML
Divs adicionadas
51
Caderno de Exercícios HTML e CSS
10. Volte ao Sublime, posicione o cursor após a chave de fechamento 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;
18. Pressione <Enter> novamente e digite a coordenada em left: 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
20. Retorne ao Sublime. Depois, selecione e apague as declarações da posição e das coorde-
nadas left e top.
21. Digite a declaração do float: float:right;
52
Caderno de Exercícios HTML e CSS
.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:right;
}
*{
margin:0;
}
Arquivo divs.css
.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:left;
}
*{
margin:0;
}
Arquivo divs.css
53
Caderno de Exercícios HTML e CSS
Passo a passo:
<!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.
54
Caderno de Exercícios HTML e CSS
5. Posicione o cursor após a chave que fecha o segundo bloco de declarações e tecle <Enter>
duas vezes.
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
11. Retorne ao Sublime, posicione o cursor após a última declaraçã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 parágrafo e, no lugar, digite: 100px
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
55
Caderno de Exercícios HTML e CSS
17. Volte ao Sublime, apague o valor atual de overflow e, no lugar, digite: scroll
.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:left;
padding:20px;
overflow:scroll;
}
Arquivo divs.css
19. Arraste a barra de rolagem vertical até o final e observe o conteúdo da div.
20. Feche o navegador, os arquivos e o Sublime.
56
Caderno de Exercícios HTML e CSS
2. Analise as afirmações:
a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.
Passo a passo:
<body>
<div class="area">
<p>Esse é um exemplo de parágrafo.</p>
</div>
<div class="area">
<img src="img/img6.jpg">
</div>
</body>
Adicionando um parágrafo
3. Salve as alterações no código e abra o arquivo "divs.html" no navegador.
57
Caderno de Exercícios HTML e CSS
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 declaraçõ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
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;
.area{
width:400px;
height:250px;
background-color:#FF402E;
margin:5px;
float:left;
padding:20px;
overflow:scroll;
box-sizing:border-box;
}
Arquivo divs.css
58
Caderno de Exercícios HTML e CSS
15. Retorne ao Sublime, posicione o cursor após a última 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
Visualização no navegador
59
Caderno de Exercícios HTML e CSS
Passo a passo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Estrutura</title>
</head>
<body>
<div id="cabecalho"></div>
</body>
</html>
Arquivo estrutura.html
#cabecalho {
width:1000px;
height:200px;
background-color:#E8685F;
}
Arquivo estrutura.css
<head>
<title>Exemplo de Estrutura</title>
<link rel="stylesheet" href="estrutura.css">
</head>
60
Caderno de Exercícios HTML e CSS
13. Observe a div que representa o cabeçalho da página. Depois, retorne ao Sublime e acesse
o arquivo CSS.
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
#area1 {
width:1000px;
height:500px;
background-color:#FFBA6E;
}
Arquivo estrutura.css
#area2 {
width:700px;
height:300px;
background-color:#ED81FF;
}
Arquivo estrutura.css
#area3 {
width:300px;
height:300px;
background-color:#7738E8;
}
Arquivo estrutura.css
61
Caderno de Exercícios HTML e CSS
#area2 {
width:700px;
height:300px;
background-color:#ED81FF;
float:left;
}
Arquivo estrutura.css
32. Coloque o cursor após a última 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
<body>
<div id="cabecalho"></div>
<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
<div id="rodape"></div>
</body>
#rodape {
width:1000px;
height:200px;
background-color:#FF827B;
float:left;
}
Arquivo estrutura.css
62
Caderno de Exercícios HTML e CSS
1. Por que é importante nomear a página inicial de um site com o nome index?
63
Caderno de Exercícios HTML e CSS
Passo a passo:
<!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
body {
margin:0;
padding:0;
}
Arquivo style.css
64
Caderno de Exercícios HTML e CSS
.principal {
width:900px;
margin:0 auto;
box-shadow:0px 0px 10px black;
}
Arquivo style.css
Passo a passo:
65
Caderno de Exercícios HTML e CSS
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Página Inicial</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="principal">
<div class="inicio">
<div class="nome">
<a href="index.html" title="Início"><h1>Fotografando</h1></a>
<a href="index.html" title="Início"><img src="img/icon.png"></a>
</div>
<div class="menu"> </div>
</div>
</div>
</body>
</html>
Arquivo index.html
11. Salve as alterações no código e abra o arquivo "index.html" no navegador.
Visualização no navegador
.inicio {
display:table;
}
Arquivo style.css
66
Caderno de Exercícios HTML e CSS
.nome {
float:left;
width:360px;
padding:20px;
}
Arquivo style.css
17. Tecle <Enter> duas vezes e digite o bloco do tí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
.nome img {
float:left;
margin-left:10px;
}
Arquivo style.css
.nome a {
text-decoration:none;
color:#000000;
}
Arquivo style.css
67
Caderno de Exercícios HTML e CSS
<head>
<title>Página Inicial</title>
<link rel="shortcut icon" href="img/icon.png">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
Arquivo index.html
23. Salve as alterações e atualize a página.
1. Propriedade word-wrap
2. Propriedade text-transform
3. Valor uppercase
4. Recurso hover
68
Caderno de Exercícios HTML e CSS
Passo a passo:
<body>
<div class="principal">
<div class="inicio">
<div class="nome">
<a href="index.html" title="Início"><h1>Fotografando</h1></a>
<a href="index.html" title="Início"><img src="img/icon.png"></a>
</div>
<div class="menu"> </div>
</div>
<div class="fim">
<div class="linksrodape"></div>
<div class="dadosrodape1"></div>
<div class="dadosrodape2"></div>
<div class="imgrodape"></div>
</div>
</div>
</body>
Arquivo index.html
.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;
}
Arquivo style.css
69
Caderno de Exercícios HTML e CSS
.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
<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
70
Caderno de Exercícios HTML e CSS
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
último bloco de declarações do rodapé e tecle <Enter> duas vezes.
22. Digite o bloco referente ao título h2:
.fim h2 {
color:#FFFFFF;
margin-bottom:10px;
text-transform:uppercase;
}
Arquivo style.css
.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;
}
.linksrodape ul li a:hover {
font-size:18px;
color:#E85846;
}
Arquivo style.css
Visualização no navegador
71
Caderno de Exercícios HTML e CSS
Passo a passo:
<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 "index.html" no navegador.
72
Caderno de Exercícios HTML e CSS
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 último bloco do rodapé e tecle <En-
ter> 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 parágrafo nessas colunas:
.dadosrodape1 p, .dadosrodape2 p {
color:#FFFFFF;
text-indent:0px;
}
Arquivo style.html
73
Caderno de Exercícios HTML e CSS
13. Digite o conteúdo dessa coluna. Você pode inserir os dados desejados ou digitar o exemplo:
<h2>Contatos</h2>
<p>(11) 9999-9999<br>
[email protected]</p>
Arquivo index.html
<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
.imgrodape a {
text-decoration:none;
font-family:Century Gothic, sans-serif;
font-size:16px;
color:#FFFFFF;
}
Arquivo style.css
74
Caderno de Exercícios HTML e CSS
.imgrodape ul {
list-style:none;
padding:0;
margin:0;
}
Arquivo style.css
.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 vertical:
Arquivo style.css
.imgrodape ul li img {
height:25px;
width:25px;
}
Arquivo style.css
Visualização no navegador
75
Caderno de Exercícios HTML e CSS
<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
.direitos {
width:880px;
background-color:#303030;
padding:10px;
}
Arquivo style.css
.direitos h2 {
color:#C0C0C0;
font-size:14px;
text-align:center;
font-weight:normal;
}
Arquivo style.css
Visualização da página
34. Visualize como está a página. Para encerrar feche o navegador, os arquivos e o Sublime.
76
Caderno de Exercícios HTML e CSS
2. O que acontece quando a página especificada no link não existe ou está com o endereço errado?
Passo a passo:
<!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
13. Coloque o cursor entre as tags de abertura e fechamento do link e digite: Estrutura
14. Salve as alterações no documento. Depois, abra o arquivo "menu.html" no navegador.
77
Caderno de Exercícios HTML e CSS
<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.
<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>
78
Caderno de Exercícios HTML e CSS
Página de erro
Passo a passo:
79
Caderno de Exercícios HTML e CSS
#menu{
padding:0;
margin:0;
list-style:none;
}
Arquivo menu.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
Visualização do menu
#menu li {
border:1px solid #545454;
background-color:#AAFF91;
}
Arquivo menu.css
80
Caderno de Exercícios HTML e CSS
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
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
81
Caderno de Exercícios HTML e CSS
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á contido em
uma div.
( ) O valor inline-block da propriedade display faz com que o elemento não seja exibido, o
que é útil para esconder o submenu, por exemplo.
( ) Pode-se melhorar o espaço de um link dentro do item de um menu, aplicando um pa-
dding 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:
#menu li {
border:1px solid #545454;
background-color:#AAFF91;
display:inline-block;
float:left;
}
Arquivo menu.css
Visualização do menu
7. Após visualizar o menu, volte ao Sublime.
82
Caderno de Exercícios HTML e CSS
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.
<ul>
<li><a href="compras.html">Compras</a></li>
<li><a href="vendas.html">Vendas</a></li>
</ul>
Itens 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:
Arquivo menu.css
#menu li ul li {
width:120px;
}
Arquivo menu.css
83
Caderno de Exercícios HTML e CSS
Visualização do submenu
84
Caderno de Exercícios HTML e CSS
Passo a passo:
1. Para começar abra o Sublime com os arquivos "index.html" e "style.css". Eles estão den-
tro da pasta Projeto de Exemplo.
2. No documento HTML posicione o cursor entre as tags de abertura 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>.
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
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 último bloco referente ao cabeçalho (bloco .nome a).
9. Posicione o cursor após a chave que fecha o último bloco do cabeçalho e tecle <Enter>
duas vezes.
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
85
Caderno de Exercícios HTML e CSS
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;
}
.menu ul li {
display:inline-block;
position:relative;
}
.menu ul li a {
text-decoration:none;
text-transform:uppercase;
padding:5px 10px;
border-radius:5px;
color:#000000;
}
.menu ul li a:hover {
background:#E85846;
color:#FFFFFF;
}
86
Caderno de Exercícios HTML e CSS
87
Caderno de Exercícios HTML e CSS
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áginas e já inserindo alguns elementos na página inicial.
1. Abra o Sublime e os arquivos "index.html" e "style.css" que estão dentro da pasta Proje-
to 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 ar-
quivo CSS.
4. Desça a barra de rolagem até o final. Posicione o cursor após a chave que fecha o último
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
#imgapresentacao {
width:600px;
float:left;
}
Arquivo style.css
#descricao {
width:260px;
padding-left:20px;
padding-right:20px;
float:left;
}
Arquivo style.css
#descricao h2 {
text-align:center;
}
#descricao p {
margin-top:10px;
}
Arquivo style.css
88
Caderno de Exercícios HTML e CSS
Visualização da página
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
#destaque {
padding-bottom:20px;
text-align:center;
}
Arquivo style.css
89
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
90
Caderno de Exercícios HTML e CSS
#amostras {
display:table;
padding-bottom:20px;
}
Arquivo style.css
.imgamostra {
float:left;
width:205px;
padding-left:10px;
padding-right:10px;
}
.imgamostra h2 {
text-align:center;
}
Arquivo style.css
Visualizando no navegador
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.
91
Caderno de Exercícios HTML e CSS
2. Analise as afirmações:
a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.
Passo a passo:
Visualização do formulário
92
Caderno de Exercícios HTML e CSS
14. Retorne ao Sublime, posicione o cursor após a tag de abertura do formulário e tecle
<Enter>.
15. Digite a tag da label: <label>Data:</label>
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de formulário</title>
</head>
<body>
<form action=" " method="get">
<label>Data:</label>
<input type="text">
</form>
</body>
</html>
Código do formulário
Visualização do formulário
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
Visualização no navegador
93
Caderno de Exercícios HTML e CSS
<body>
<form action=" " method="get">
<label for="data">Data:</label>
<input type="text" placeholder="Digite a data de hoje" id="data">
</form>
</body>
Código do formulário
22. Salve as alterações e atualize a página.
23. Dê um clique sobre a label e digite a data novamente.
24. Feche o navegador, os arquivos e o Sublime.
Passo a passo:
1. Abra o Sublime com o arquivo "formulario.html". Esse arquivo está dentro da pasta Tes-
tes HTML.
2. Posicione o cursor após o fechamento da tag <input> do campo de texto e tecle <Enter>.
3. Digite a tag do botão: <input type="submit" value="Enviar">
<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
94
Caderno de Exercícios HTML e CSS
Visualização do formulário
<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
Visualização do formulário
95
Caderno de Exercícios HTML e CSS
<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, re-
torne ao Sublime.
25. Com o cursor posicionado após o código do segundo botão de checagem, tecle <Enter> e
digite: <label for="comentario">Comentário:</label>
26. Tecle <Enter> e digite o código da área de texto: <textarea name="msg"></textarea>
<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
<label for="comentario">Comentário:</label>
<textarea name="msg"></textarea>
<input type="submit" value="Enviar">
</form>
</body>
Código do formulário
96
Caderno de Exercícios HTML e CSS
label, textarea {
display:block;
}
CSS do formulário
textarea {
width:250px;
height:150px;
}
CSS do formulário
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.
97
Caderno de Exercícios HTML e CSS
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 fechamento 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>
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 tí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>
11. Coloque o cursor entre as tags de abertura e fechamento da div formcontato e tecle
<Enter>.
98
Caderno de Exercícios HTML e CSS
Código do formulário
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 último bloco de declarações e tecle <Enter>
duas vezes.
16. Digite o comentário: /*Página Contato*/
99
Caderno de Exercícios HTML e CSS
#contatoarea {
width:900px;
display:table;
}
Arquivo CSS
#dadoscontato {
width:260px;
float:left;
padding:20px;
}
Arquivo CSS
#dadoscontato h2 {
margin-bottom:10px;
}
Arquivo CSS
#dadoscontato ul {
list-style:none;
padding:0;
margin:0;
font-family:Century Gothic, sans-serif;
font-size:16px;
margin-top:10px;
}
Arquivo CSS
#formcontato {
width:560px;
float:left;
padding:20px;
}
Arquivo CSS
100
Caderno de Exercícios HTML e CSS
Visualização no navegador
#formcontato label {
display:block;
font-family:Century Gothic, sans-serif;
font-size:16px;
font-weight:bold;
}
Arquivo CSS
Arquivo CSS
#formcontato textarea {
height:200px;
}
Arquivo CSS
101
Caderno de Exercícios HTML e CSS
#formcontato input.botao {
width:auto;
}
Arquivo CSS
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
input.botao:hover {
background-color:#000000;
}
Arquivo CSS
30. Salve as alterações e atualize a página no navegador.
Visualização no navegador
102
Caderno de Exercícios HTML e CSS
1. Tag map
2. Atributo shape
3. Tag area
4. Atributo href
Passo a passo:
Visualização da imagem
8. Após visualizar a imagem, retorne ao Sublime.
9. Posicione o cursor após a tag de abertura de <body> e tecle <Enter>.
103
Caderno de Exercícios HTML e CSS
<!DOCTYPE html>
<html>
<head>
<title>Mapeamento de imagens</title>
</head>
<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>
</html>
Arquivo mapeamento.html
21. Após ser redirecionado para o site do Google, feche o navegador, o arquivo e o Sublime.
104
Caderno de Exercícios HTML e CSS
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">
4. Salve as alterações no documento e abra o arquivo "mapeamento.html" 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>.
105
Caderno de Exercícios HTML e CSS
106
Caderno de Exercícios HTML e CSS
43. FONTES
Foi ensinado a como utilizar uma família de fonte externa na página. Para desenvolver seu en-
tendimento acerca do assunto faça os exercícios a seguir.
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 tí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>
<!DOCTYPE html>
<html>
<head>
<title>Fontes</title>
</head>
<body>
<p>Exemplo de Parágrafo</p>
</body>
</html>
Arquivo fontes.html
Visualização no navegador
107
Caderno de Exercícios HTML e CSS
8. Após visualizar o texto, volte ao Sublime e crie um novo arquivo 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 title e tecle <Enter>. Depois, digite o có-
digo para vincular o arquivo CSS: <link rel="stylesheet" href="fontes.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
108
Caderno de Exercícios HTML e CSS
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 navegador, os arquivos e o Su-
blime.
1. A função do reset é deixar todos os elementos HTML sem nenhum estilo no navegador.
2. Ao aplicar o reset em uma página, os espaçamentos são zerados, encostando os elemen-
tos nos limites do navegador.
3. O código do reset é consideravelmente maior que o do normalize.
4. Quando já se tem um arquivo CSS vinculado a um documento, não é possível vincular o
reset ou o normalize.
109
Caderno de Exercícios HTML e CSS
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 diferentes. Recomendamos abrir
no Google Chrome e no Microsoft Edge.
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 <Enter> 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.
110
Caderno de Exercícios HTML e CSS
Visualização no Chorme
Visualização no Chorme
111
Caderno de Exercícios HTML e CSS
Passo a passo:
1. Abra o Sublime com os arquivos "sobre.html" e "style.css", os quais estão dentro da pas-
ta Projeto de Exemplo.
2. No documento HTML posicione o cursor após a tag de fechamento 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 título. Caso desejado, você pode alterar o texto para o que desejar es-
crever. <h2>Sobre Mim:</h2>
9. Na sequência, tecle <Enter> e digite um parágrafo de algumas linhas. Se desejado, pode
utilizar o texto Lorem Ipsum como referência de tamanho.
Texto do parágrafo
10. A lógica para os próximos elementos da coluna é a mesma, tento um título e um parágra-
fo. Então, insira esses elementos, utilizando os exemplos a seguir se desejado.
112
Caderno de Exercícios HTML e CSS
Texto do parágrafo
#areasobre {
display:table;
}
Arquivo CSS
113
Caderno de Exercícios HTML e CSS
#sobreinfo {
float:left;
width:560px;
padding:20px;
}
Arquivo CSS
Arquivo CSS
114
Caderno de Exercícios HTML e CSS
<div id="sobredados">
<h2>Formação Profissional:</h2>
<img src="img/snow.jpg">
</div>
Div sobredados
<ul>
<li>Design Gráfico</li>
<li>Desenvolvimento Web</li>
</ul>
Lista
<ul>
<li>HTML e CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
Lista
#sobredados {
float:left;
width:260px;
padding:20px;
}
Lista
#sobredados ul {
padding-left:20px;
font-family:Century Gothic, sans-serif;
font-size:16px;
}
Lista
115
Caderno de Exercícios HTML e CSS
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 fechamento do cabeçalho e tecle
<Enter> duas vezes.
116
Caderno de Exercícios HTML e CSS
<tr></tr>
<tr></tr>
<tr></tr>
Linhas
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 título: <h2>Estátuas (2010)</h2>
11. Utilize a tag <p> para escrever um texto em parágrafo. Se desejar, utilize o Lorem Ipsum
como referência.
Texto do parágrafo
Página de Serviços
117
Caderno de Exercícios HTML e CSS
14. Desça a barra de rolagem até o último 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
#tabela td {
width:280px;
padding:10px;
}
Arquivo CSS
#tabela h2 {
text-align:center;
margin-bottom:10px;
}
Arquivo CSS
Página de Serviços
118
Caderno de Exercícios HTML e CSS
<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
Visualização no navegador
24. Retorne ao Sublime, coloque o cursor entre as tags de abertura 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
119
Caderno de Exercícios HTML e CSS
Visualização no navegador
28. Posicione o cursor entre as tags de abertura e fechamento da segunda linha e tecle <Enter>.
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 sim
ply 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 sim
ply 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 sim
ply dummy text.</p>
</td>
120
Caderno de Exercícios HTML e CSS
Visualização no navegador
31. Após visualizar a página, retorne ao Sublime, posicione o cursor 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>
121
Caderno de Exercícios HTML e CSS
Passo a passo:
1. Para iniciar abra o Sublime com os arquivos "clientes.html" e "style.css", que estão den-
tro 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>
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>
<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>
122
Caderno de Exercícios HTML e CSS
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>
12. Posicione o cursor entre as tags de abertura e fechamento da div da primeira coluna in-
terna e tecle <Enter>.
13. Digite o código da imagem: <img src="img/jardim.jpg">
14. Coloque o cursor entre as tags de abertura e fechamento da segunda coluna interna e
tecle <Enter>.
15. Digite o tí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, utilize o Lorem Ipsum
como referência,
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in-
dustry. 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.
123
Caderno de Exercícios HTML e CSS
hr {
border-top:1px solid #E85846;
}
CSS do hr
23. Desça a barra de rolagem até o último 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
#clienteslista {
width:160px;
padding:20px;
float:left;
}
Arquivo CSS
Arquivo CSS
27. Tecle <Enter> duas vezes e digite o bloco:
Arquivo CSS
124
Caderno de Exercícios HTML e CSS
#clientesconteudo {
width:700px;
float:left;
}
Arquivo CSS
.conteudolinha {
width:700px;
float:left;
display:table;
}
Arquivo CSS
.conteudocol {
width:310px;
float:left;
padding:20px;
}
Arquivo CSS
Página de clientes
125
Caderno de Exercícios HTML e CSS
<div class="conteudolinha">
<div class="conteudocol">
<h2>Viagem em Família</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> [email protected]</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in
dustry. Lorem Ipsum has been the industryry’s standard dummy text.</p>
</div>
<div class="conteudocol">
<img src="img/praia.jpg">
</div>
</div>
<hr>
126
Caderno de Exercícios HTML e CSS
<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> [email protected]</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in
dustry. Lorem Ipsum has been the industry’s standard dummy text.</p>
</div>
</div>
<hr>
127
Caderno de Exercícios HTML e CSS
<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> [email protected]</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in
dustry. Lorem Ipsum has been the industry’s standard dummy text.</p>
</div>
<div class="conteudocol">
<img src="img/neve.jpg">
</div>
</div>
<hr>
128
Caderno de Exercícios HTML e CSS
<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> [email protected]</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in
dustry. Lorem Ipsum has been the industry’s standard dummy text.</p>
</div>
</div>
129
Caderno de Exercícios HTML e CSS
2. Nas lacunas a seguir marque V para verdadeiro ou F para falso de acordo com as afirmações:
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 validation service e confirme a busca teclando <Enter>.
4. Clique no link referente ao site da W3C.
130
Caderno de Exercícios HTML e CSS
15. Visualize o selo no final da página. Depois, feche o navegador, o arquivo e o Sublime.
131
Caderno de Exercícios HTML e CSS
Anotações:
132