Nesse capítulo aprendemos a u lizar o reset e o normalize, conhecendo suas diferenças. Con -nue seus estudos com as a vidades a seguir.
1. Qual a diferença entre o reset e o normalize?
2. Analise as afi rmações a seguir.
1. A função do reset é deixar todos os elementos HTML sem nenhum es lo 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. p{ font-family:Roboto, sans-serif; } Arquivo CSS Visualização no navegador
Estão corretas somente: a) 1 e 2. b) 1 e 4. c) 2 e 3. d) 3 e 4. Passo a passo:
1. Abra o Sublime com o arquivo "formulario.html", que está dentro da pasta Testes HTML. 2. Abra o arquivo "formulario.html" em dois navegadores diferentes. Recomendamos abrir
no Google Chrome e no MicrosoŌ 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 confi rme teclando <Enter>.
6. Entre os resultados, clique no link do site do Meyer Web, que disponibiliza os códigos do
reset.
7. Selecione os códigos do reset. Em seguida, tecle <Ctrl> + <C> para copiá-los.
8. Retorne ao Sublime e crie um novo arquivo chamado "reset.css". Salve-o na pasta Testes HTML.
9. Com o novo arquivo CSS criado, tecle a combinação <Ctrl> + <V> para colar os códigos.
10. Salve as alterações e acesse o documento HTML. 11. Posicione o cursor após a tag <link> e tecle <Enter>.
12. Digite o código do vínculo com o reset: <link rel="stylesheet" href="reset.css"> 13. Após salvar as alterações, atualize a página no Google Chrome.
14. Agora atualize a página no MicrosoŌ 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
19. Acesse o MicrosoŌ Edge e atualize a página.
20. Após visualizar as alterações, feche os navegadores, os arquivos e o Sublime.
45. PROJETO DE EXEMPLO ͳ 8
Foi editada a página Sobre do site de exemplo, que foi composta por elementos textuais sobre o proprietário do site, divididos em duas colunas. A seguir encontram-se alguns exercícios para prá ca.
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 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 u lizar o texto Lorem Ipsum como referência de tamanho.
10. A lógica para os próximos elementos da coluna é a mesma, tento um tulo e um parágra-fo. Então, insira esses elementos, u lizando os exemplos a seguir se desejado.
Texto do parágrafo
<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>
11. Salve as alterações e abra o arquivo "sobre.html" no navegador.
12. Após visualizar a página, retorne ao Sublime e acesse o arquivo CSS.
13. Desça a barra de rolagem até o úl mo bloco de declarações da página index, posicione o cursor após a chave que o fecha e tecle <Enter> duas vezes.
14. Digite o comentário: /*Página Sobre*/ 15. Tecle <Enter> duas vezes e digite o bloco:
<h2>Por que escolhi esta profi ssão?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<h2>Mais Informações:</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
Texto do parágrafo
Primeira coluna da área sobre
Arquivo CSS
#areasobre {
display:table; }
16. Pressione <Enter> duas vezes e digite o bloco:
17. Após pressionar <Enter> duas vezes, digite o bloco:
18. Salve as alterações e atualize a página no navegador.
19. Volte ao Sublime e acesse o documento HTML.
20. Posicione o cursor entre as tags de abertura e fechamento da div da segunda coluna e tecle <Enter>. Arquivo CSS #sobreinfo { fl oat:left; width:560px; padding:20px; } Arquivo CSS
#sobreinfo h2, #sobreinfo p, #sobredados h2 { margin-bottom:20px;
}
21. Digite o tulo: <h2>Formação Profi ssional:</h2> 22. Tecle <Enter> e digite: <img src="img/snow.jpg">
23. Pressione <Enter> e digite:
24. Tecle <Enter> e digite o tulo: <h2>Áreas de Conhecimento:</h2> 25. Pressione <Enter> e digite a lista:
26. Salve as alterações e acesse o arquivo CSS. 27. Pressione <Enter> duas vezes e digite o bloco:
28. Tecle <Enter> duas vezes e digite o bloco da lista:
29. Salve as alterações e atualize a página.
Lista <ul> <li>Design Gráfi co</li> <li>Desenvolvimento Web</li> </ul> Lista <ul> <li>HTML e CSS</li> <li>Javascript</li> <li>PHP</li> </ul> Lista #sobredados { fl oat:left; width:260px; padding:20px; } Lista #sobredados ul { padding-left:20px;
font-family:Century Gothic, sans-serif; font-size:16px;
}
Div sobredados
<div id="sobredados">
<h2>Formação Profi ssional:</h2> <img src="img/snow.jpg">
30. Para fi nalizar feche o navegador, os arquivos e o Sublime.
46. PROJETO DE EXEMPLO ͳ 9
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 a vidades referentes para colocar em prá ca os seus estudos.
1. Pelo que a página Serviços foi composta?
2. Qual a diferença entre as tags <tr> e <td>?
Passo a passo:
1. Abra o Sublime com os arquivos "servicos.html" e "style.css", que estão dentro da pasta
Projeto de Exemplo.
2. No documento HTML posicione o cursor após a tag de fechamento do cabeçalho e tecle <Enter> duas vezes.
3. Digite a tag da tabela com o seu id: <table id="tabela"></table>
4. Posicione o cursor entre as tags de abertura e fechamento da tabela e tecle <Enter>. 5. Digite as tags das três linhas:
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:
8. Coloque o cursor entre as tags de abertura e fechamento da primeira célula e tecle <Enter>. 9. Digite o código da imagem: <img src="img/estatua.jpg">
10. Tecle <Enter> e digite o código do tulo: <h2>Estátuas (2010)</h2>
11. U lize a tag <p> para escrever um texto em parágrafo. Se desejar, u lize o Lorem Ipsum como referência.
12. Salve as alterações e abra o arquivo "servicos.html" no navegador.
13. Após visualizar a página, retorne ao Sublime e acesse o arquivo CSS.
Linhas <tr></tr> <tr></tr> <tr></tr> Colunas <td></td> <td></td> <td></td> Texto do parágrafo
<p>Lorem Ipsum is simply dummy text of the printing and type setting industry simply dummy text.</p>
14. Desça a barra de rolagem até o úl mo bloco referente a página Sobre. Posicione o cursor após a chave que fecha esse bloco e tecle <Enter> duas vezes.
15. Digite o comentário:/*Página Serviços*/
16. Pressione <Enter> duas vezes e digite o bloco para a linha:
17. Tecle <Enter> duas vezes e digite o bloco:
18. Após teclar <Enter> duas vezes, digite o bloco:
19. Salve as modifi cações e atualize a página.
Arquivo CSS #tabela tr { width:900px; } Arquivo CSS #tabela td { width:280px; padding:10px; } Arquivo CSS #tabela h2 { text-align:center; margin-bottom:10px; } Página de Serviços
20. Volte ao Sublime e acesse o documento HTML.
21. Posicione o cursor entre as tags da segunda célula e tecle <Enter>.
22. Digite o conteúdo dessa célula. Se desejar, u lize o texto Lorem Ipsum como referência.
23. Salve as alterações e atualize a página no navegador.
24. Retorne ao Sublime, coloque o cursor entre as tags de abertura e fechamento da terceira célula e tecle <Enter>.
25. Digite o conteúdo da célula:
26. Atualize a página no navegador após salvar as alterações no documento.
Segunda coluna
<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>
Terceira coluna
<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>
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:
30. Salve as alterações e atualize a página no navegador.
Código da segunda linha
<td>
<img src="img/inverno.jpg"> <h2>Inverno (2007)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry sim ply dummy text.</p>
</td> <td>
<img src="img/bebe.jpg"> <h2>Bebê (2016)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry sim ply dummy text.</p>
</td> <td>
<img src="img/fl ores.jpg"> <h2>Inverno (2014)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry sim ply dummy text.</p>
</td>
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:
33. Após salvar as modifi cações, atualize a página.
34. Para encerrar feche o navegador, os arquivos e o Sublime.
Código da terceira linha
<td>
<img src="img/cachoeira.jpg"> <h2>Cachoeira (2012)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry simply dummy text.</p>
</td> <td>
<img src="img/lago.jpg"> <h2>Lago (2017)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry simply dummy text.</p>
</td> <td>
<img src="img/castelo.jpg"> <h2>Castelo (2005)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry simply dummy text.</p>
</td>