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
HTML e CSS
Caderno de Exercícios 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
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.
Esta apostila é de uso exclusivo das unidades de ensino com

sistema Interasoft.
2
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
33. Criação de Menu............................................................................................................................ 77
34. Estilização de Menu........................................................................................................................ 79
35. Criação de Submenu....................................................................................................................... 82
38. Criação de Formulário.................................................................................................................... 92
3
39. Estilização de Formulário................................................................................................................ 94

41. Mapeamento de Imagens - 1....................................................................................................... 103
42. Mapeamento de Imagens - 2....................................................................................................... 105
43. Fontes........................................................................................................................................... 107
44. Reset e Normalize......................................................................................................................... 109
45. Projeto de Exemplo - 8................................................................................................................. 112
46. Projeto de Exemplo - 9................................................................................................................. 116
47. Projeto de Exemplo - 10............................................................................................................... 122
48. Validação de Códigos.................................................................................................................... 130
4
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.
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 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.
1. O que a tag <html> faz?
5
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>
<html>
3. Tecle <Enter> duas vezes para deixar uma linha em branco. De- <head>
pois, feche a tag digitando: </html>
4. Posicione o cursor na linha em branco e digite: <head>
5. Tecle <Enter> duas vezes para pular uma linha e feche a tag do ca- </head>
beçalho digitando: </head> <body>
Oi! Meu nome é José!
6. Posicione o cursor após o fechamento da tag head e tecle <En- </body>
ter>. </html>
7. Abra uma nova tag digitando: <body>
8. Pule uma linha teclando <Enter> duas vezes e digite: </body> Estrutura do código
9. Posicione o cursor dentro da tag <body> e digite uma frase incluindo 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 Todos 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.
Resultado da codificação no navegador
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
1. Na computação, o que é a indentação e para que ela serve?
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 preci-

sar 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 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
4. TÍTULOS
Aprendemos a adicionar títulos de diferentes níveis em um documento HTML. Exercite seu
aprendizado com as atividades a seguir.
1. Qual a diferença entre as tags de título <h1> e <h6>?
2. Ao alterar um documento HTML, o que é preciso fazer para visualizar suas alterações no na-
vegador?
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 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
Visualização do arquivo textos.html
10. Observe como ficou o título. Depois, retorne ao Bloco de Notas.

11. Posicione o cursor após o fechamento da tag <h1> e tecle <Enter>.
12. Pressione <Tab> duas vezes e digite: <h2>Título 2</h2>
13. Tecle <Ctrl> + <S> para salvar as alterações e retorne ao navegador.
14. Tecle <F5> para atualizar a página web.
15. Após visualizar o novo título, retorne ao Bloco de Notas.
16. Tecle <Enter> após o fechamento da tag <h2>.
17. Digite os códigos a seguir, teclando <Tab> duas vezes antes do início de cada linha:
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Adicionando os títulos
18. Salve as alterações teclando <Ctrl> + <S>.

19. Volte ao navegador e atualize a página teclando <F5>.
20. Visualize as alterações na página. Para encerrar feche o navegador e o Bloco de Notas.
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.
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 é colocando-o na tag de parágrafo,
que é simbolizada pela letra "t".
3. O atributo align é muito utilizado 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.
9
Estão corretas somente:
a) 1 e 2.
b) 2 e 3.
c) 1 e 4.
d) 3 e 4.
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 instrutor.
2. Posicione o cursor após o texto h1 e tecle <Espaço>.
3. Digite o atributo e seu valor: align="center"
5. Minimize o Bloco de Notas e abra o arquivo "textos.html" no navegador.
6. Observe o novo alinhamento no primeiro título e, depois, volte 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
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.
Visualização do alinhamento no navegador
10
12. Observe como os títulos se comportam e clique no botão Maximizar.

13. Volte ao Bloco de Notas, posicione o cursor após o fechamento 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 letra 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>
<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
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.
11
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.
1. Quando um software se enquadra na categoria de freemium?
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 instrutor. Depois, clique no link referente ao seu sistema
operacional para fazer o download do instalador do programa.
5. Após o download ser realizado, clique no instalador para executá-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.
9. Após o programa ser instalado, clique em Finish. Depois, feche o navegador.
12
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 Preferences e selecione Color
Scheme.
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.
1. Basicamente o que é CSS?
2. Qual a diferença entre HTML e CSS?
13
3. No CSS do que é composta uma declaração?
( ) 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.
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:

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 <Enter>.
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 automaticamente e o cursor posicionado 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.
11. Com a propriedade inserida, após os dois pontos, digite o valor: center
14
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 título 4

15. Observe as alterações no quarto tí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;
}
17. Salve as alterações teclando <Ctrl> + <S>. Depois, volte ao navegador e atualize a página.
15
18. Visualize as alterações nos alinhamentos dos títulos e feche o navegador.

19. Feche o documento clicando no botão de sua aba e, em seguida, feche o Sublime.
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.
1. Para que serve a propriedade font-family? O que ela permite?
2. Qual a diferença entre as fontes do tipo sans-serif e serif?
Passo a passo:
1. Para começar abra o Sublime Text.

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 fechamento 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;
9. Tecle <Ctrl> + <S> para salvar as alterações no projeto.
Visualização no navegador com a fonte Georgia
16
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
Visualização no navegador com a fonte serif
13. Salve as alterações no documento e atualize a página no navegador.

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 Sublime e tecle <Ctrl> + <Z>
para desfazer a alteração no nome do primeiro valor.
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 declaraçã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;
}

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 documentos HTML, apren-
dendo a utilizar seus códigos em RGB e em hexadecimal. Desenvolva seu aprendizado realizando as
atividades referentes.
17
1. Qual é o propósito principal do sistema RGB?
2. Por que basta dois dígitos em hexadecimal para representar a intensidade de cada parâmetro
RGB?
Passo a passo:

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-size:30pt;
font-weight:bold;
font-style:italic;
color:red;
}
Aplicando a cor vermelha

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.
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)
18

12. Observe que a cor continua 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

Estilizamos a cor de um elemento com diferentes exemplos, aprendendo também a utilizar um
disco de cores. A seguir encontram-se alguns exercícios para desenvolver seu aprendizado.
1. Qual a diferença entre as cores branco e preto?
( ) 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:
1. Abra o Sublime Text e o arquivo "textos.html".

2. Apague o valor da propriedade color e, no lugar, digite: #FF9700
p{
font-size:30pt;
font-weight:bold;
font-style:italic;
color:#FF9700;
}
19
3. Tecle <Ctrl> + <S> para salvar as alterações.

Alterando a propriedade color
5. Volte ao Sublime e apague o valor da propriedade color. No lugar digite o valor: #FFFFFF
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
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.
12. INSERIR COMENTÁRIOS

Durante esse capítulo aprendemos a utilizar os comentários de diferentes maneiras, descreven-
do algo do código ou invalidando comandos. Continue seus estudos com as atividades 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 <Enter>.
3. Inicie a abertura do 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
<head>

<style>
h4,h5,h6{
text-align:center;
}
</style>
</head>
Inserindo comentário em uma linha

21
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>.
9. Digite o comentário: 
10. Posicione o cursor antes de iniciar a declaração da propriedade font-weight.
11. Digite a abertura do comentário: /*
12. Posicione o cursor após a declaração da propriedade color e feche o comentário digitando:
*/
<head>

<style>
h4,h5,h6{
text-align:center;
}
p{
font-size:30pt;
/*font-weight:bold;
font-style:italic;
color:#FF2A22;*/
}
</style>

</head>
Inserindo comentário em bloco
Resultado do texto após comentário
14. Após visualizar as alterações, retorne ao Sublime.
22
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.
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;
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 <title>?
2. Para que serve o atributo de imagem src? Como é sua sintaxe?
23
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 armazenamento, 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 <title> 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.
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 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

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>
</head>
<body>
<img src="img/img2.jpg" title="Imagem de Exemplo">
</body>
</html>
Inserindo título na imagem
Visualização no navegador do título da imagem
23. Direcione o cursor sobre a imagem e visualize seu nome.

24. Feche o navegador, a pasta e o Sublime.
14. FORMATOS DE IMAGEM

Nesse capítulo conhecemos diferentes formatos de imagem, estudando suas diferenças e apli-
cações. A seguir encontram-se algumas atividades referentes ao conteúdo estudado.
1. Pelo que é formada uma imagem do tipo bitmap?
25
2. Como funciona uma imagem do tipo vetor?
3. Qual a vantagem do formato PNG em relação ao formato GIF?
4. Relacione os formatos a seguir com suas respectivas descrições:
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.
15. PLANO DE FUNDO

Nesse capítulo aprendemos a alterar a cor do plano de fundo da página, 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 estilizar os elementos da página em um

arquivo CSS?
26
2. Relacione as opções a seguir com suas respectivas 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.

( ) É utilizada 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.
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>
</head>
<body bgcolor="#AAAAAA">
<img src="img/img2.jpg" title="Imagem de Exemplo">
</body>
</html>
Inserindo cor de fundo na página

4. Busque e abra a pasta Testes HTML no computador e, dentro dela, abra o arquivo "teste.
html" no navegador.
Cor de fundo alterada
27
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.
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 <title> e tecle <Enter>.
18. Digite a tag: <link rel="stylesheet" href="style.css">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Inserindo o arquivo style.css no código HTML
Alterando a cor de fundo com CSS
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
23. Salve as alterações no código, volte ao navegador e atualize a página.
Imagem inserida como plano de fundo
24. Visualize a imagem preenchendo o fundo da página. Para encerrar 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 atividades referentes ao capítulo.
1. O que a propriedade CSS border permite?
2. Em qual ocasião se utiliza o valor do tamanho em porcentagem?
Passo a passo:

2. Com o programa aberto, abra nele os arquivos "teste.html" e "style.css", presentes den-
tro 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.
29
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.
Borda inserida na imagem
7. Observe a borda aplicada na imagem. Em seguida, retorne ao Sublime.

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
Borda inserida na imagem
30
12. Visualize a nova borda e volte ao Sublime.

13. Acesse o documento HTML, posicione o cursor após o atributo title, tecle <Espaço> e di-
gite: height="350" width="350"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="img/img2.jpg" title="Imagem de Exemplo" height="350" width="350">
</body>
</html>
Alterando o tamanho da imagem
Visualização da imagem no navegador
15. Retorne ao Sublime e apague o atributo height.

16. Selecione o valor de width, tecle <Delete> e, no lugar, digite: 75%
18. Observe as alterações no tamanho da imagem. Depois, diminua o tamanho da janela do
navegador.
19. Após visualizar o novo tamanho da imagem, maximize novamente 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;
31
25. Salve as alterações no código. O bloco ficará assim:
img{
width:512px;
height:384px;
}
Arquivo style.css
26. Volte ao navegador e atualize a página.
Imagem após aplicado o CSS
27. Após visualizar a página, feche o navegador, a pasta, os arquivos e o Sublime.
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.
1. Para que um fragmento de URL é utilizado?
2. Qual a função do atributo target?
32
Passo a passo:

2. Com o programa aberto, abra nele os arquivos "teste.html" e "style.css", presentes den-
tro 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>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.google.com">Buscar</a><br>
<img src="img/img2.jpg" title="Imagem de Exemplo" height="350" width="350">
</body>
</html>
Inserindo links
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
17. Clique no link referente à imagem.
18. Volte à página anterior clicando no botão do navegador. Depois, feche o navegador.
33
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.
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 sofreu 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 tí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 título <h2> e digite a tag com o atributo:
<a name="chegada">
6. Feche a tag de link, posicionando o cursor antes do fechamento 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>
<body>
<a href="#chegada">Bem-vindo</a><br>
<a href="https://www.google.com">Buscar</a><br>
<img src="img/img2.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
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:
<a href="https://images.google.com" target="_blank"> <img src="img/img2.jpg"

title="Imagem de Exemplo"> </a> <br>
Inserindo links

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.
35
19. ESTILIZAÇÃO DE LINKS

Nesse capítulo aprendemos a estilizar os links através de códigos CSS. Para colocar em prática o
seu aprendizado resolva as atividades a seguir.
1. Quando o atributo hover é utilizado? O que ele permite?
2. Relacione as propriedades a seguir com suas respectivas funções:
( 1 ) font-family
( 2 ) font-size
( 3 ) color
( 4 ) text-decoration
( ) Pode ser utilizado para remover um efeito do texto.

( ) Serve para alterar a família de fonte.
( ) Estiliza 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 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{
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
9. Digite a declaração: color:#8CD5FF;

11. Após visualizar a nova cor, volte ao Sublime.
Links com a cor alterada
12. Tecle <Enter> ao final da segunda declaração e digite: text-decoration:none;

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 {
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;
img{
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
21. Aponte o cursor sobre o primeiro link.
Efeito hover aplicado no 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
20. LISTAS ORDENADAS

Aprendemos a criar listas ordenadas no documento HTML, personalizando com diferentes atri-
butos. Resolva os exercícios a seguir para colocar em prática os seus estudos.
1. Por que os valores do atributo type são case sensitive? 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 entre as tags de tí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>
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.
38
Visualização da lista no navegador
14. Após visualizar a lista, volte ao Sublime.

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 tipo da lista


17. Retorne ao Sublime, apague o valor do atributo type e, no lugar, digite: a
18. Atualize a página no navegador após salvar as alterações no código.
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"
39

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"
<ol type="1" start="10">

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

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. Pros-
siga com os seus estudos fazendo as atividades a seguir.
1. Para que são utilizadas as listas não ordenadas?
2. Como se define o tipo de marcador para cada item da lista individualmente?
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>.
40
5. Digite os itens:
<li>Cachorro</li>
<li>Gato</li>
<li>Peixe</li>
<li>Porco</li>
<li>Cavalo</li>
Inserindo lista não ordenada
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.

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>

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

11. Apague o valor de type e, no lugar, digite: disc
41
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>

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

15. Digitea tagdeimagemcomoatributoreferenteao seucaminho:<img src="img/img8.jpg">
16. Posicione o cursor após o atributo src, tecle <Espaço> e digite: 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

18. Retorne ao Sublime. Depois, selecione o texto do quinto item e tecle <Delete>.
19. Para esse item digite a tag de link:
<a href="img/img7.jpg" target="_blank">Imagem</a>
<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>
Inserindo imagem no quinto item

20. Salve as alterações, vá para o navegador e atualize a página.
42
Arquivo finalizado
21. Clique no link presente na lista.

22. Feche a aba aberta que contém a imagem.
23. Para finalizar feche o navegador, o documento HTML e o Sublime.
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.
1. Qual a diferença entre id e classe?
2. Como o CSS identifica 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 título, tecle <Enter> 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 segun
do item da lista, tecle <Espaço> e digite: class="item"
43
7. O segundo item deve ficar assim:
<li class="item">Gato</li>
Inserindo classe no segundo item
8. Salve as alterações e acesse a aba do arquivo CSS.

9. Posicione o cursor após a chave de fechamento do último bloco 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
14. Salve as alterações no código. Minimize o Sublime e abra o arquivo "listas.html" no na-
vegador.
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"
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

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{
44
23. Digite a declaração para alterar o tamanho da fonte: 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
26. Após visualizar a página, feche o navegador.

23. ATRIBUTOS DE POSICIONAMENTO

Nesse capítulo estudamos as propriedades de margem, reposicionando o elemento na página.
Na sequência encontram-se algumas atividades para exercitar o seu entendimento sobre o assunto.
1. Para que serve a propriedade CSS margin?
( ) 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 margens são aplicadas aos lados
inferior, superior, esquerdo e direito, nesta ordem.
( ) Quando o valor para a margem é escrito com o número e as letras "px", o tamanho da
margem é interpretado em porcentagem, sendo um valor relativo.
( ) Ao se escrever o valor "auto" para a margem, o navegador define uma margem adequa-
da para ser utilizada.
45
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 último 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
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

14. Reduza o tamanho da janela do navegador.
15. Observe a posição da lista e maximize a janela clicando no botão referente.
16. Retorne ao Sublime e apague a declaração da propriedade margin.
17. Digite a declaração: margin-top:100px;
18. Tecle <Enter> e digite: margin-left:auto;
46
ul{
margin-top:100px;
margin-left:auto;
}
Arquivo style.css
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. Desenvol-
va o seu aprendizado realizando as atividades a seguir.
1. O que são divs? O que elas permitem?
2. O que a propriedade background permite a um elemento?
Passo a passo:

2. Clique em File e selecione New File.
47
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 estrutura básica do documento
HTML.
8. Com o cursor posicionado entre as tags de título, digite: Divs
10. Crie a div digitando: <div></div>
11. Posicione o cursor dentro da tag de abertura da div, tecle <Espaço> e digite: class="area"
<!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{
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;
25. Observe a div na página. Depois, volte ao Sublime e apague o valor de width.
48
26. No lugar digite o valor em porcentagem: 50%

.area{
width:50%
heigth:250px;
}
Arquivo divs.css
28. Diminua o tamanho da janela do navegador, observe o comportamento da div e, depois,

maximize a janela.
Div ocupando 50% da largura da página
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
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 Sublime.
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.
1. O que o atributo position com o valor absolute permite?
2. Qual a diferença entre os valores de float top, left 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"
50
<!DOCTYPE html>
<html>
<head>
<title>Divs</title>
</head>
<body>
<div class="area"></div>
</body>
</html>
Estrutura do HTML
5. Salve as alterações, minimize a janela do programa e abra o arquivo "divs.html" no navega-

dor.
Divs adicionadas
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;
Aplicando margem nas divs
51
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: * {
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
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
.area{
width:400px;
height:250px;
margin:5px;
float:right;
}
*{
margin:0;
}
Arquivo divs.css
Divs posicionadas a direita
23. Volte ao Sublime e apague o valor de float. No lugar digite: left
.area{
width:400px;
height:250px;
margin:5px;
float:left;
}
*{
margin:0;
}
Arquivo divs.css
24. Atualize a página no navegador após salvar as modificações.
Divs posicionadas a esquerda
53
26. CRIAÇÃO DE LAYOUT - 1

Aqui aprendemos novos recursos para a div, estudando as propriedades padding e overflow. A
seguir encontram-se alguns exercícios para complementar seus estudos.
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 primeira 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">
</div>
</body>
</html>
Adicionando um parágrafo
4. Após visualizar a página, volte ao Sublime e acesse o arquivo CSS.
Parágrafo adicionado na primeira div
54
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{
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
Parágrafo em negrito na primeira div
11. Retorne ao Sublime, posicione o cursor após a última declaração do bloco referente a div,
tecle <Enter> e digite: padding:20px;
13. Volte ao Sublime, apague o valor do tamanho da fonte do parágrafo e, no lugar, digite: 100px
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;
margin:5px;
float:left;
padding:20px;
overflow:hidden;
}
Arquivo divs.css
16. Atualize a página no navegador após salvar as alterações.
55
Propriedade hidden aplicada
17. Volte ao Sublime, apague o valor atual de overflow e, no lugar, digite: scroll
.area{
width:400px;
height:250px;
margin:5px;
float:left;
padding:20px;
overflow:scroll;
}
Arquivo divs.css
Propriedade scroll aplicada
19. Arraste a barra de rolagem vertical até o final e observe o conteúdo da div.
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 con-
teúdo.
56
1. O que a propriedade max-width faz?
1. A propriedade box-shadow é utilizada para adicionar efeitos de sombra em volta de um

elemento.
2. Para definir uma altura máxima utiliza-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 elemen-
to fixa.
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 se-
gunda div e digite: <img src="img/img6.jpg">
<body>
<div class="area">
</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.
Imagem inserida na div
57
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%;
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
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;
.area{
width:400px;
height:250px;
margin:5px;
float:left;
padding:20px;
overflow:scroll;
box-sizing:border-box;
}
Arquivo divs.css
58
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;
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.
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, utilizando diferentes divs. A
seguir encontram-se alguns exercícios para desenvolver seu aprendizado.
1. O que é preciso fazer para identificar um id no CSS?
2. Como é possível centralizar os elementos dentro de uma área?
59
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 estrutura do HTML.
5. Com o cursor posicionado entre as tags de tí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 Testes HTML.
9. No arquivo CSS digite o bloco de declarações:
#cabecalho {
width:1000px;
height:200px;
background-color:#E8685F;
}
Arquivo estrutura.css

11. Posicione o cursor após a tag do tí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 estilo
12. Salve as alterações e, em seguida, abra o arquivo "estrutura.html" no navegador.
Visualização da div cabecalho
60
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;
}
16. Salve as modificações e acesse o documento HTML.

17. Abaixo da primeira div digite: <div id="area1"></div>
19. Após o último bloco de declarações, digite o novo bloco:
#area1 {
width:1000px;
height:500px;
background-color:#FFBA6E;
}

21. Retorne ao Sublime e acesse o documento HTML.
22. Abaixo da segunda div digite: <div id="area2"></div>
24. Digite o bloco com as propriedades:
#area2 {
width:700px;
height:300px;
background-color:#ED81FF;
}

27. Abaixo da terceira div digite: <div id="area3"></div>
28. Salve as modificações e acesse o arquivo CSS.
#area3 {
width:300px;
height:300px;
background-color:#7738E8;
}
61

31. Volte ao Sublime, posicione o cursor após a última declaração do bloco da div area2, tecle
<Enter> e digite: float:left;
#area2 {
width:700px;
height:300px;
background-color:#ED81FF;
float:left;
}
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;
}
33. Atualize a página no navegador após salvar as alterações no código.

35. Abaixo da quarta div digite: <div id="rodape"></div>
<body>
<div id="cabecalho"></div>
<div id="area1"></div>
<div id="rodape"></div>
</body>
Estrutura das divs

37. Digite o bloco do rodapé com as declarações:
#rodape {
width:1000px;
height:200px;
background-color:#FF827B;
float:left;
}
38. Salve as modificações e atualize a página.
62
Visualização das divs cabecalho e area1
39. Desça a barra de rolagem para visualizar melhor o rodapé.
Visualização das divs area2, area3 e rodape
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. Continue seus estudos com as atividades
referentes.
1. Por que é importante nomear a página inicial de um site com o nome index?
63
2. Por que o tipo de codificação UTF-8 é o mais utilizado?
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 pre-
cisar 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 título, digite: Página Inicial
6. Posicione o cursor dentro da tag de abertura do HTML, tecle <Espaço> e digi-
te: lang="pt-br"
7. Posicione o cursor após a tag do título, tecle <Enter> e digite: <meta charset="utf-8">
<!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
8. Coloque o cursor dentro de body, tecle <Tab> e digite: <div class="principal"></div>

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">
13. Na primeira linha digite o comentário: /*Componentes Gerais*/
body {
margin:0;
padding:0;
}
Arquivo style.css
64
14. Tecle <Enter> duas vezes e digite o bloco de declarações do body:
.principal {
width:900px;
margin:0 auto;
box-shadow:0px 0px 10px black;
}
Arquivo style.css
15. Tecle <Enter> duas vezes e digite o bloco da div principal:

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.

Iniciamos a criação do cabeçalho do site de exemplo, adicionando diferentes elementos na pá-
gina. Na sequência encontram-se atividades para praticar 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 abertura e fechamento da div
principal e tecle <Enter>.
3. Digite a div do cabeçalho: <div class="inicio"></div>
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>
7. Posicione o cursor entre as tags da div do nome e tecle <Enter>.
8. A partir 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 escolher 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.
65
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 Fotografando.
<a href="index.html" title="Início"><h1>Fotografando</h1></a>
10. Tecle <Enter> e digite o código da imagem do logotipo. Se você escolher outro logoti-
po, digite o nome do arquivo e sua extensão corretamente no caminho do atributo src.
<a href="index.html" title="Início"><img src="img/icon.png"></a>
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<div class="principal">
<div class="inicio">
<div class="nome">
</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.
12. Após observar a página, retorne ao Sublime e acesse o arquivo CSS.

13. Coloque o cursor após a chave que fecha o bloco da div principal 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
66
16. Tecle <Enter> duas vezes e digite o bloco da div nome:
.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
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 {
color:#000000;
}
Arquivo style.css
CSS aplicado a página
67

22. Posicione o cursor após o fechamento da tag de título, tecle <Enter> e digite:
<link rel= "shortcut icon" href="img/icon.png">
<head>
<link rel="shortcut icon" href="img/icon.png">
</head>
Arquivo index.html
Ícone adicionado no site

Nesse capítulo complementamos a página inicial, iniciando o seu rodapé. Desenvolva o seu
aprendizado realizando as atividades a seguir.
1. Pelo que o rodapé do site de exemplo foi composto?
1. Propriedade word-wrap
2. Propriedade text-transform
3. Valor uppercase
4. Recurso hover
( ) Transforma os caracteres em maiúsculos.

( ) Aplica uma estilização personalizada para quando o mouse estiver em cima de um ele-
mento.
( ) 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.
68
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 fechamento 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>
<body>
<div class="principal">
<div class="inicio">
<div class="nome">
</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
9. Salve as modificações no documento e acesse o arquivo CSS.

10. Posicione o cursor após o fechamento do último bloco de declarações e tecle <Enter>
duas vezes.
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;
}
Arquivo style.css
69
.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

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 navegador.
Links adicionados ao rodapé
18. Após visualizar a página, retorne ao Sublime e acesse o arquivo CSS.

19. Suba a barra de rolagem, posicione o cursor após o último bloco dos componentes gerais
e tecle <Enter> duas vezes.
70
h2 {
margin:0;
padding:0;
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
23. Tecle <Enter> duas vezes e digite os blocos da lista:
.linksrodape ul {
list-style:none;
margin:0;
padding:0;
}
.linksrodape ul li a {
color:#FFFFFF;
font-size:16px;
}
.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 navegador.
71
25. Direcione o cursor sobre os cinco links da lista.


Foi finalizado o rodapé da página, inserindo novos conteúdos e estilizando suas propriedades.
Coloque em prática seus estudos resolvendo as atividades referentes.
1. Qual a função da propriedade text-indent?
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 abertura e fechamento da se-
gunda coluna e tecle <Enter>.
3. Digite o conteúdo da segunda coluna. Você pode inserir os dados que desejar, utilizando
as tags <h2> e <p>. Porém, você também pode utilizar 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 "index.html" no navegador.
Visualização dos dados na segunda coluna
72

6. Posicione o cursor após o último 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-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
Visualização da página no navegador

12. Posicione o cursor entre as tags de abertura e fechamento da terceira coluna e tecle <Enter>.
73
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>
fotograf@email.com</p>
Arquivo index.html
14. Após salvar as alterações no documento, atualize a página.

15. Retorne ao Sublime, posicione o cursor entre as tags de abertura 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
Visualização das colunas 3 e 4
18. Retorne ao Sublime e acesse o arquivo CSS.

19. Tecle <Enter> duas vezes e digite o bloco do link:
.imgrodape a {
font-size:16px;
color:#FFFFFF;
}
Arquivo style.css
74
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 vertical:
.imgrodape ul li a, .imgrodape ul li img{

vertical-align:middle;
}
Arquivo style.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.
75

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

31. Com o cursor posicionado após o último bloco do rodapé, tecle <Enter> duas vezes e
digite:
.direitos {
width:880px;
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
Visualização da página
34. Visualize como está a página. Para encerrar feche o navegador, os arquivos e o Sublime.
76
33. CRIAÇÃO DE MENU

Aqui aprendemos a criar uma estrutura de menu em um documento HTML, utilizando uma lis-
ta não ordenada. Faça as atividades referentes para colocar em prática o seu entendimento sobre o
assunto.
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:

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
6. Com o cursor posicionado entre as tags de título, digite: Exemplo de Menu
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>
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 <Espaço> e digite:
href="estrutura.html"
<!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
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 fechamento do primeiro item e
tecle <Enter>.
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="divs.html">Divs</a></li>
<li><a href="teste.html">Teste</a></li>
</ul>
Lista criadas
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="divs.html">Divs</a></li>
<li><a href="1teste.html">Teste</a></li>
</ul>
Inserindo o número um antes do nome do arquivo

25. Clique no quarto link e visualize o erro informado.
78
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 Sublime.
34. ESTILIZAÇÃO DE MENU

Continuamos a construção de um menu de exemplo, o estilizando através de códigos CSS. Na
sequência você encontra algumas atividades referentes a este capítulo.
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 tí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"
79
7. Digite o seletor e abra o bloco de declarações: #menu {

8. Tecle <Enter> para organizar o bloco. Depois, digite as declarações:
#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
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 Sublime.

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 {
background-color:#AAFF91;
}
Arquivo menu.css
80
17. Retorne ao Sublime, tecle <Enter> duas vezes e digite o bloco do link:
#menu li a {
color:#545454;
}
Arquivo menu.css
19. Retorne ao Sublime, pressione <Enter> duas vezes e digite os blocos com o recurso hover:
#menu li:hover {
}
#menu li a:hover {
color:#AAFF91;
}
Arquivo menu.css

21. Direcione o cursor sobre os itens do menu. Depois, feche o navegador, os arquivos e o
Sublime.
81
35. CRIAÇÃO DE SUBMENU

Durante esse capítulo aprendemos a alterar um menu da vertical para a horizontal, além de se
inserir um submenu para determinado item. Para colocar em prática o seu aprendizado resolva as
atividades desse capítulo.
1. Basicamente o que é um submenu?
( ) 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:
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;
#menu li {
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.
7. Após visualizar o menu, volte ao Sublime.
82
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;
Propriedade padding aplicada
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 último 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
#menu li ul li {
width:120px;
}
Arquivo menu.css
83

21. Direcione o cursor sobre o item Listas.
Visualização do submenu
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 relativa: 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.

Aqui continuamos a edição de nosso site de exemplo, inserindo e estilizando um menu no cabe-
çalho. A seguir retomaremos o projeto de exemplo 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 horizontal?
84
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
6. Salve as alterações no documento e abra o arquivo "index.html" no navegador.
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.
.menu {
float:left;
margin-top:15px;
width:460px;
padding:20px;
font-size:16px;
}
CSS do menu
85
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
13. Tecle <Enter> duas vezes e digite o bloco para os itens:
.menu ul li {
display:inline-block;
position:relative;
}
14. Pressione <Enter> duas vezes e digite o bloco do link:
.menu ul li a {
padding:5px 10px;
border-radius:5px;
color:#000000;
}

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

17. Direcione o cursor sobre os itens do menu.
Visualização da página principal

Nesse capítulo finalizamos a edição da página inicial do site de exemplo, criando também as
outras páginas com somente o cabeçalho e rodapé. Para praticar seu entendimento sobre o assunto a
seguir encontram-se algumas atividades.
1. Para que serve a propriedade display com o valor table?
2. O que é um texto Lorem ipsum? Qual é sua função?
87
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*/
#apresentacao {
display:table;
}
Arquivo style.css
7. Pressione <Enter> duas vezes e digite:
#imgapresentacao {
width:600px;
float:left;
}
Arquivo style.css
#descricao {
width:260px;
padding-left:20px;
padding-right:20px;
float:left;
}
Arquivo style.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
88
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

15. Com o cursor posicionado ao fim do último bloco, tecle <Enter> duas vezes e digite:
#destaque {
padding-bottom:20px;
text-align:center;
}
Arquivo style.css
89
Visualização da figura no navegador
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>
<img src="img/horizonte.jpg">
<h2>Horizonte <br>(2006)</h2>
</div>
<img src="img/avermelhado.jpg">
<h2>Céu Avermelhado <br>(2012)</h2>
</div>
<img src="img/campo.jpg">
<h2>Campo Florido <br>(2007)</h2>
</div>
</div>
Arquivo index.html
90
20. Salve as alterações no documento e acesse o arquivo CSS.

21. Com o cursor posicionado ao final do último bloco, tecle <Enter> duas vezes e digite o
bloco:
#amostras {
display:table;
padding-bottom:20px;
}
Arquivo style.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
Visualizando no navegador
24. Vá descendo a barra de rolagem para visualizar todo o conteúdo da página inicial do site.
91
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 praticar seu aprendizado.
1. Pelo que um formulário é composto?
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.
a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.
Passo a passo:

2. Salve esse arquivo na pasta Testes HTML com o nome formulario.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 título, digite: Exemplo de Formulário
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">
12. Salve as alterações e abra o arquivo "formulario.html" no navegador.
13. Clique no campo em branco e digite seu nome.
Visualização do formulário
92
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
17. Retorne ao Sublime, posicione o cursor após o atributo type, tecle <Espaço> e digite:
placeholder="Digite a data de hoje"
<body>
<input type="text" placeholder="Digite a data de hoje">
</form>
</body>
93
19. Como exemplo, clique no campo de texto e digite a data atual.

20. Retorne ao Sublime, posicione o cursor dentro da tag de abertura da label, tecle <Espa-
ço> e digite: for="data"
21. Dentro da tag <input>, posicione o cursor após o atributo placeholder, tecle <Espaço> e
digite: id="data"
<body>
<label for="data">Data:</label>
<input type="text" placeholder="Digite a data de hoje" id="data">
</form>
</body>
23. Dê um clique sobre a label e digite a data novamente.
39. ESTILIZAÇÃO DE FORMULÁRIO

Aprendemos a inserir mais elementos no formulário, o personalizando com propriedades CSS.
Prossiga com seus estudos realizando as atividades referentes a esse capítulo.
1. O que acontece quando se utiliza o atributo action 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 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>
<input type="submit" value="Enviar">
</form>
</body>
94
4. Salve as alterações e abra o arquivo "formulario.html" no navegador.
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, tecle <Espaço> e digite:
name= "data"
9. Digite uma data no campo de texto e clique em Enviar.
10. Observe as informações na barra de endereços. Depois, retorne 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= "op cao" value="sim">Sim
14. Pressione <Enter> e digite o input do segundo botão "radio":
<input type="radio" name= "opcao" value="nao">Não
<body>
<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
</form>
</body>
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.
95
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 checagem:
<input type="checkbox" name="por">Português
22. Tecle <Enter> e digite o código do segundo botão de checagem:
<input type="checkbox" name="ing">Inglês
<body>
<label for="idioma">Idioma:</label>
</form>
</body>
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>
<label for="idioma">Idioma:</label>
<label for="comentario">Comentário:</label>
<textarea name="msg"></textarea>
</form>
</body>
96

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 formulario.css. Salve-o dentro da
pasta Testes HTML.
31. No arquivo CSS digite o bloco:
label, textarea {
display:block;
}
CSS do formulário

33. Posicione o cursor após a tag de fechamento do título, tecle <Enter> e digite:
<link rel= "stylesheet" href= "formulario.css">
35. Observe o formulário. Depois, retorne ao Sublime e acesse o arquivo CSS.
textarea {
width:250px;
height:150px;
}
CSS do formulário
37. Atualize a página após salvar as alterações no arquivo.
Formulário estilizado 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.
97

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 atividades a seguir para colocar em prática
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 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>fotograf@email.com</li>
</ul>
Lista não ordenada
11. Coloque o cursor entre as tags de abertura e fechamento da div formcontato e tecle
<Enter>.
98
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>
13. Salve as alterações no documento e abra o arquivo contato.html 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
#contatoarea {
width:900px;
display:table;
}
Arquivo CSS
#dadoscontato {
width:260px;
float:left;
padding:20px;
}
Arquivo CSS
19. Tecle <Enter> duas vezes e digite o bloco do tí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-size:16px;
margin-top:10px;
}
Arquivo CSS
#formcontato {
width:560px;
float:left;
padding:20px;
}
Arquivo CSS

23. Após visualizar a página, retorne ao Sublime.
100
24. Tecle <Enter> duas vezes e digite o bloco da label:
#formcontato label {
display:block;
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
#formcontato textarea {
height:200px;
}
Arquivo CSS
101
#formcontato input.botao {
width:auto;
}
Arquivo CSS
28. Após pressionar <Enter> duas vezes, digite o bloco:
input.botao {
background-color:#E85846;
padding:5px 10px;
border-radius:5px;
color:#EBEBEB;
cursor:pointer;
}
Arquivo CSS
input.botao:hover {
}
Arquivo CSS
102
31. Preencha o formulário com as informações desejadas e clique no botão de envio.

41. MAPEAMENTO DE IMAGENS - 1

Aqui aprendemos a aplicar o mapeamento circular em uma imagem. Resolva as atividades a
seguir para praticar seu aprendizado.
1. No que consiste o mapeamento de imagens?
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 "mapeamento.html". Salve-o dentro da

pasta Testes HTML.
2. Inicie a estrutura do HTML digitando: <html
4. Com o cursor entre as tags de título, digite: Mapeamento de Imagens
6. Digite o código da imagem: <img src="img/img1.jpg">
7. Abra o arquivo "mapeamento.html" no navegador.
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
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 coor-
denadas: 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 <Espaço> e digite:
usemap= "#mapa1"
<!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
17. Salve as alterações no documento e atualize a página no navegador.

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 navegador, o arquivo e o Sublime.
104
42. MAPEAMENTO DE IMAGENS - 2

Durante esse capítulo aprendemos a criar um mapeamento retangular em uma imagem. Na
sequência encontram-se algumas atividades para prática.
1. Ao que se referem os valores de uma coordenada?
2. Para que o atributo alt é utilizado?
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.
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>.
105
8. Digite a tag area: <area>

9. Coloque o cursor dentro da tag <area>, tecle <Espaço> e digite 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:
use map="#mapa2"
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 digi-
te: target="_blank"
18. Tecle <Espaço> e digite o atributo title: 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.
Visualização do nome da região

23. Após a imagem ser aberta em uma nova aba, feche o navegador, o arquivo e o Sublime.
106
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.
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 título, digite: Fontes
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
7. Salve as alterações e abra o arquivo "fontes.html" no navegador.
107
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 {
11. Dentro do bloco digite a declaração: font-family:Arial;
p{
font-family:arial;
}
Arquivo CSS
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">
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>.
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.
108
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.
28. Repare na nova família de fonte do texto. Depois, feche o navegador, os arquivos e o Su-
blime.
44. RESET E NORMALIZE

Nesse capítulo aprendemos a utilizar o reset e o normalize, conhecendo suas diferenças. Conti-
nue seus estudos com as atividades a seguir.
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 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
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.
Site do Meyer Web
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.
110

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 Microsoft Edge e observe os elementos HTML.

15. Para facilitar já se tem o arquivo "normalize.css" na pasta Testes HTML, basta vinculá-lo
no documento HTML. Primeiramente, abra o arquivo normalize.css no Sublime.
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 lugar, 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
111
19. Acesse o Microsoft Edge e atualize a página.

20. Após visualizar as alterações, feche os navegadores, os arquivos e o Sublime.

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ática.
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 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.
<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 título e um parágra-
fo. Então, insira esses elementos, utilizando os exemplos a seguir se desejado.
112
<h2>Por que escolhi esta profissão?</h2>

<h2>Mais Informações:</h2>
Texto do parágrafo
11. Salve as alterações e abra o arquivo "sobre.html" no navegador.
Primeira coluna da área sobre

13. Desça a barra de rolagem até o último 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*/
#areasobre {
display:table;
}
Arquivo CSS
113
#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
Visualização no navegadorda coluna sobreinfo

20. Posicione o cursor entre as tags de abertura e fechamento da div da segunda coluna e
tecle <Enter>.
114
21. Digite o título: <h2>Formação Profissional:</h2>

22. Tecle <Enter> e digite: <img src="img/snow.jpg">
<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 tí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

#sobredados {
float:left;
width:260px;
padding:20px;
}
Lista
28. Tecle <Enter> duas vezes e digite o bloco da lista:
#sobredados ul {
padding-left:20px;
font-size:16px;
}
Lista
115
Visualização no navegador da coluna sobredados

Editamos a quarta página do site de exemplo, contendo diferentes elementos dispostos em li-
nhas e colunas como se fosse uma tabela. Faça as atividades referentes para colocar em prática 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 fechamento do cabeçalho e tecle
<Enter> duas vezes.
116
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
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.
<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 navegador.
Página de Serviços
117
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
18. Após teclar <Enter> duas vezes, digite o bloco:
#tabela h2 {
text-align:center;
margin-bottom:10px;
}
Arquivo CSS
Página de Serviços
118

21. Posicione o cursor entre as tags da segunda célula e tecle <Enter>.
22. Digite o conteúdo dessa célula. Se desejar, utilize o texto Lorem 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
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
26. Atualize a página no navegador após salvar as alterações no documento.
119
27. Visualize a linha completa. Depois, retorne ao Sublime.
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>
ply dummy text.</p>
</td>
<td>
<img src="img/flores.jpg">
<h2>Inverno (2014)</h2>
ply dummy text.</p>
</td>
Código da segunda linha
120
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>
</td>
<td>
<img src="img/castelo.jpg">
<h2>Castelo (2005)</h2>
</td>
Código da terceira linha
33. Após salvar as modificações, atualize a página.

121

Nesse capítulo encerramos a edição do site de exemplo, inserindo o conteúdo da página Clien-
tes. Faça os exercícios a seguir e também siga o passo a passo para finalizar o seu site.
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 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>
Código das colunas
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>
122
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 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> jardimprimavera@email.com</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.
Visualização da página no navegador
123
20. Após visualizar a página, retorne ao Sublime a acesse o arquivo CSS.

21. Desça a barra de rolagem até o último 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
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*/
#clientesarea {
width:900px;
display:table;
}
Arquivo CSS
25. Após teclar <Enter> duas vezes, digite:
#clienteslista {
width:160px;
padding:20px;
float:left;
}
Arquivo CSS
#clienteslista ul, .conteudocol ul {

list-style:none;
padding:0;
margin:0;
font-size:16px;
margin-bottom:10px;
}
Arquivo CSS
#clienteslista h2, .conteudocol h2 {

margin-bottom:10px;
}
Arquivo CSS
124
28. Digite o bloco após teclar <Enter> duas vezes:
#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
32. Observe o conteúdo. Depois, volte ao Sublime e acesse o documento HTML.

33. Com o cursor posicionado após a tag <hr>, tecle <Enter> e digite o código de toda a se-
gunda linha de conteúdo:
<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>E-mail:</strong> viagememfamilia@email.com</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>
<img src="img/praia.jpg">
</div>
</div>
<hr>
Conteúdo da segunda linha
Visualizando a segunda linha
126
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:
<img src="img/arara.jpg">
</div>
<h2>Viagens Paraíso</h2>
<ul>
<li><strong>E-mail:</strong> viagensparaiso@email.com</li>
</ul>
</div>
</div>
<hr>
Conteúdo da terceira linha
Visualizando a terceira linha
38. Observe o novo conteúdo. Em seguida, retorne ao Sublime.
127
39. Pressione <Enter> e digite o conteúdo da quarta linha:
<h2>Conheça Turismo</h2>
<ul>
<li><strong>E-mail:</strong> conhecaturismo@email.com</li>
</ul>
</div>
<img src="img/neve.jpg">
</div>
</div>
<hr>
Conteúdo da quarta linha
Visualização da quarta linha
41. Visualize a quarta linha de conteúdo e volte ao Sublime.
128
42. Tecle <Enter> e digite o conteúdo da quinta linha:
<img src="img/cachorro.jpg">
</div>
<h2>Nova Ensaios</h2>
<ul>
<li><strong>E-mail:</strong> novaensaios@email.com</li>
</ul>
</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
44. Visualize todo o conteúdo da página Clientes.

45. Navegue pelo site de exemplo utilizando o menu no cabeçalho e os links no rodapé. Visite
todas as cinco páginas, visualizando todo o seu conteúdo.
129
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 atividades referentes para praticar seu
aprendizado.
1. O que é a W3C? Qual é a sua finalidade?
( ) No site da W3C é possível somente analisar os códigos de documentos HTML através de

seu link.
( ) No site da W3C, quando a página está hospedada e online, pode-se inserir o seu ende-
reço no campo File.
( ) Na aba Validate by File Upload do site da W3C pode-se enviar um arquivo HTML presen-
te no computador.
( ) Para utilizar um selo basta copiar o seu código e colar no documento HTML referente.
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.
Site do CSS validation service
130
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.
9. Selecione o código do selo desejado.
Selos do CSS validation service

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.
131
Anotações:
132

Caderno de Exercicios HTML-CSS

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Caderno de Exercicios HTML-CSS

Enviado por

Direitos autorais:

Formatos disponíveis

HTML e CSS

Caderno de Exercícios HTML e CSS

HTML e CSS HTML e CSS

Esta apostila é de uso exclusivo das unidades de ensino com

39. Estilização de Formulário................................................................................................................ 94

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?

1. O que a tag <html> faz?

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

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

Resultado da codificação no navegador

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

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

1. Encontre o arquivo preparado para esse capítulo, chamado "indentacao.html". Se preci-

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

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

Visualização do arquivo textos.html

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

18. Salve as alterações teclando <Ctrl> + <S>.

1. Como se adiciona um atributo em uma tag?

1. A forma ideal de se personalizar os elementos é através da codificação in line (em linha).

Estão corretas somente:

1. Primeiramente abra o arquivo "textos.html" no Bloco de Notas. Se precisar de ajuda para

Visualização do alinhamento no navegador

12. Observe como os títulos se comportam e clique no botão Maximizar.

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

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

1. Quando um software se enquadra na categoria de freemium?

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

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

4. Verifique a versão do sistema operacional de seu computador. Se precisar de ajuda para

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

1. Basicamente o que é CSS?

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

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

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?

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

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

CSS aplicado no título 4

h4, h5, h6{

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

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

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

1. Para começar abra o Sublime Text.

Visualização no navegador com a fonte Georgia

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

Visualização no navegador com a fonte serif

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

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

10. EDIÇÃO DE CORES

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

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

Aplicando a cor vermelha

Aplicação da propriedade color

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

11. ESTILIZAÇÃO DE COR

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

Estão corretas somente:

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

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

Alterando a propriedade color