Caderno de Exercícios

(1)

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 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 HT

HTMLMLeeCCSSSS HTML e CSS HT

HTMLMLeCCSSSS HTMLeCSS HTML e CSS HT

HTMLMLeeCCSSSS HTML e CSS HTML e CSS HTMLe CSS HTML e CSS HT

HTMLMLeeCCSSSS HTML e CSS HTML e CSS HT

HTMLMLeeCCSSSS HTMLeCSS HT

HTMLML eCCSSSS HTMLeCSS HTMLeCSS HT

HTMLMLeeCCSSSS HTML e CSS HTML e CSS HTML e CSS

Caderno de Exercícios

HTML e CSS

(2)

Nenhuma parte desta publicação impressa poderá ser re- produzida ou transmi da, por quaisquer meios empregados,

sejam eletrônicos, mecânicos, fotográfi cos, gravações, etc.

Todas as marcas e imagens de hardware, so ware e outros, u lizados e/ou mencionados nesta obra, são propriedades de seus respec vos fabricantes, donos e/ou criadores.

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

(3)

Sumário

1. Introdução ao HTML ... 5

2. Tags Essenciais ... 5

3. Prá cas de Desenvolvimento ... 6

4. Títulos ... 8

5. Tags de Texto ... 9

6. Editores HTML ... 12

7. Introdução ao CSS... 13

8. Es lização de Fonte - 1 ... 14

9. Es lização de Fonte - 2 ... 16

10. Edição de Cores ... 17

11. Es lizaçã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. Es lizaçã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. Es lização de Menu ... 79

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

38. Criação de Formulário ... 92

(4)

39. Es lizaçã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

48. Validação de Códigos ... 130

(5)

1. INTRODUÇÃO AO HTML

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

1. Basicamente, o que é o HTML?

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

3. Para que serve um arquivo no formato CSS?

4. Nas lacunas a seguir marque V para verdadeiro ou F para falso de acordo com as afi rmaçõ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 codifi cação em HTML quanto a personalização em CSS são englobadas no Web Design.

( ) O HTML é uma linguagem de programação avançada, muito u lizada na construção de servidores web.

( ) A preocupação fundamental do Web Designer é construir 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 a vidades para exercitar o seu entendimento sobre o assunto.

1. O que a tag <html> faz?

(6)

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

Passo a passo:

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

2. Na primeira linha abra a tag digitando: <html>

3. Tecle <Enter> duas vezes para deixar uma linha em branco. De- 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- beçalho digitando: </head>

6. Posicione o cursor após o fechamento da tag head e tecle <En- ter>.

7. Abra uma nova tag digitando: <body>

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

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. Defi na a Área de Trabalho como local de armazenamento.

13. No campo Nome digite: nome.html 14. Clique em Salvar para confi rmar.

15. Feche o Bloco de Notas.

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á cas de desenvolvimento que são essenciais para a codifi cação de páginas web. Resolva as a vidades a seguir para exercitar seus estudos.

<html>

<head>

</head>

<body>

Oi! Meu nome é José!

</body>

</html>

Estrutura do código

Resultado da codifi cação no navegador

(7)

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 precisar de ajuda para encontrá-lo, peça ao seu instrutor.

2. Clique com o botão direito sobre o arquivo "indentacao.html", direcione o cursor sobre a opção Abrir com e selecione Bloco de notas.

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

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 fi cou a página web. Depois, feche o navegador e o Bloco de Notas.

<html>

<head>

</head>

<body>

Teste de organização de documento HTML!

</body>

</html>

Arquivo indentacao.html

<html>

<head>

</head>

<body>

Teste de organização de documento HTML!

</body>

</html>

Código indentado

(8)

4. TÍTULOS

Aprendemos a adicionar tulos de diferentes níveis em um documento HTML. Exercite seu aprendizado com as a vidades a seguir.

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

2. Ao alterar um documento HTML, o que é preciso fazer para visualizar suas alterações no navegador?

Passo a passo:

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

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

3. Posicione o cursor dentro da tag <body> e tecle <Tab> duas vezes. Então, digite:

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

5. Defi na 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 confi rmar.

9. Minimize o Bloco de Notas e abra o arquivo "textos.html" no navegador dando um duplo clique sobre ele.

<html>

<head>

</head>

<body>

<h1>Título 1</h1>

</body>

</html>

Adicionando ơ tulo 1

<html>

<head>

</head>

<body>

</body>

</html>

Estrutura do arquivo

(9)

10. Observe como fi cou o 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 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:

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 a vidades a seguir para pra car seu entendimento sobre o assunto.

1. Como se adiciona um atributo em uma tag?

2. Analise as afi rmações:

1. A forma ideal de se personalizar os elementos é através da codifi caçã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 u lizado para alterar a posição de elementos dentro da página.

4. Dentro da tag <p> deve-se colocar todo o conteúdo textual que se encaixa em um parágrafo.

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>

Adicionando os ơ tulos Visualização do arquivo textos.html

(10)

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 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"

10. Retorne ao navegador e atualize a página.

11. Visualize os alinhamentos nos tulos. Depois, clique no botão Restaurar Tamanho para diminuir o tamanho da janela do navegador.

<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

Visualização do alinhamento no navegador

(11)

12. Observe como os 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>

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.

<html>

<head>

</head>

<body>

<h1 align="center">Título 1</h1>

<p align="center">Exemplo de <br> parágrafo de texto.</p>

<h2 align="left">Título 2</h2>

<h3 align="right">Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>

</body>

</html>

Adicionando os alinhamentos

Visualização no navegador

(12)

6. EDITORES HTML

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

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

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.

4. Verifi que 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 verifi caçã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.

Download do programa

(13)

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.

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, defi na 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?

Botão Preferences

(14)

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ífi ca e uma linha de programação.

( ) A maneira mais usual de se aplicar o CSS é criar um link para um arquivo CSS que contém os es los.

( ) Com a variação de atualizações dos navegadores, o suporte ao CSS pode variar.

8. ESTILIZAÇÃO DE FONTE ͳ 1

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

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

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

Passo a passo:

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

2. Clique em File e selecione Open File.

3. Busque e selecione o arquivo "textos.html". Depois, clique em Abrir.

4. Posicione o cursor após a abertura da tag <head> e tecle <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 automa camente 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

(15)

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

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.

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

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

17. Salve as alterações teclando <Ctrl> + <S>. Depois, volte ao navegador e atualize a página.

h4{

text-align:center;

}

CSS aplicado no ơ tulo 4

h4, h5, h6{

text-align:center;

}

(16)

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

19. Feche o documento clicando no botão de sua aba e, em seguida, feche o Sublime.

9. ESTILIZAÇÃO DE FONTE ͳ 2

Conhecemos novas propriedades para es lizar a fonte de texto, alterando a família de fontes, seu tamanho e es lo. Para colocar em prá ca o seu aprendizado faça as a vidades a seguir.

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

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

Passo a passo:

1. Para começar abra o Sublime Text.

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

(17)

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

12. Posicione o cursor após o valor Georgia e digite: , serif

13. Salve as alterações no documento e atualize a página no 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 fi car assim:

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

29. Observe como fi cou 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, aprendendo a u lizar seus códigos em RGB e em hexadecimal. Desenvolva seu aprendizado realizando as a vidades referentes.

Visualização no navegador com a fonte serif

p{

font-family:Georgias, serif;

font-size:30pt;

font-weight:bold;

font-style:italic;

}

(18)

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:

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

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;

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.

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) Aplicação da propriedade color

p{

font-size:30pt;

font-weight:bold;

font-style:italic;

color:red;

}

Aplicando a cor vermelha

(19)

12. Observe que a cor con nua a mesma. Volte ao Sublime.

13. Apague o código da cor em RGB. No lugar digite o valor em hexadecimal: #FF0000 14. Salve as alterações e atualize a página.

15. Visualize que a cor permanece a mesma. Feche o navegador e o Sublime.

11. ESTILIZAÇÃO DE COR

Es lizamos a cor de um elemento com diferentes exemplos, aprendendo também a u lizar 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?

2. Analise as afi rmações:

( ) O Adobe Color oferece recursos para se encontrar uma cor desejada através de harmo- nias e modos dis ntos.

( ) Quanto mais próximo do valor 0, o parâmetro fi ca mais escuro, e quanto mais próximo do FF, ele fi ca mais intenso.

( ) Quando nos três parâmetros o primeiro dígito de cada par for 0, é possível resumir o código hexadecimal em somente três caracteres.

( ) Cores análogas são as cores que são opostas entre si, estando em pontas diferentes do círculo cromá co.

Estão corretas somente:

a) 1 e 2.

b) 1 e 3.

c) 2 e 4.

d) 3 e 4.

Passo a passo:

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

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

p{

font-size:30pt;

font-weight:bold;

font-style:italic;

color:#FF9700;

}

(20)

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

5. Volte ao Sublime e apague o valor da propriedade color. No lugar digite o valor: #FFFFFF 6. Salve as alterações e atualize a página no navegador.

7. Volte ao Sublime e subs tua o valor de color para: #000000

8. Salve o código e atualize a página no navegador para visualizar as alterações.

9. Abra uma nova aba no navegador.

10. Na barra de endereços digite color.adobe.com e tecle <Enter>.

Alterando a propriedade color

Site da Adobe

(21)

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 u lizar os comentários de diferentes maneiras, descreven- do algo do código ou invalidando comandos. Con nue seus estudos com as a vidades a seguir.

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

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

Passo a passo:

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

2. Posicione o cursor após a abertura da tag <head> e tecle <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

(22)

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:

*/

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

<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

(23)

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 fi cou.

18. Volte ao Sublime, posicione o cursor no início da declaração da propriedade color e digite: /*

19. Posicione o cursor no fi m 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.

23. Feche o documento HTML e o Sublime.

13. ADICIONAR IMAGENS

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

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

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

Nova cor aplicada ao parágrafo

(24)

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 defi nida como local de armazenamento, clique em Salvar para

confi rmar.

5. Comece abrindo a tag html digitando: <html 6. Tecle <Enter> para aceitar a sugestão da tag.

7. Com a estrutura criada, após a abertura da tag < tle> digite: Teste

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.

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">

<!DOCTYPE html>

<html>

<head>

<title>Teste</title>

</head>

<body>

</body>

</html>

Estrutura criada

<body>

</body>

Inserindo imagem Título adicionado a página

(25)

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"

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 a vidades referentes ao conteúdo estudado.

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Inserindo ơ tulo na imagem

Visualização no navegador do ơ tulo da imagem

(26)

2. Como funciona uma imagem do po vetor?

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

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

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

( ) Possui uma boa taxa de compressão ajustável, permi ndo equilibrar a qualidade com o tamanho da imagem.

( ) Foi o primeiro formato de imagem com alta taxa de compressão, reduzindo consideravel- mente o tamanho das imagens.

( ) U liza um algoritmo de compactação muito efi ciente, gerando imagens de alta qualidade e um tamanho razoável para os padrões atuais da internet.

( ) Nesse formato não há compressão do arquivo, o tornando muito pesado.

15. PLANO DE FUNDO

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

1. Por que é importante o usuário se preocupar em es lizar os elementos da página em um arquivo CSS?

(27)

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

1. Tag link 2. Atributo rel 3. Atributo bgcolor

4. Propriedade background-image

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

( ) É u lizada para vincular um arquivo externo ao documento HTML.

( ) Defi ne 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"

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

html" no navegador.

<!DOCTYPE html>

<html>

<head>

</head>

</body>

</html>

Inserindo cor de fundo na página

Cor de fundo alterada

(28)

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. Defi na 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 confi rmar.

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;

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

17. Posicione o cursor após o fechamento da tag < tle> e tecle <Enter>.

18. Digite a tag: <link rel="stylesheet" href="style.css">

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-color:#F945EA;

}

Arquivo style.css

<head>

</head>

Inserindo o arquivo style.css no código HTML

Alterando a cor de fundo com CSS

body{

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

}

Arquivo style.css

(29)

23. Salve as alterações no código, volte ao navegador e atualize a página.

24. Visualize a imagem preenchendo o fundo da página. Para 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 a vidades referentes ao capítulo.

1. O que a propriedade CSS border permite?

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

Passo a passo:

2. Com o programa aberto, abra nele os arquivos "teste.html" e "style.css", presentes dentro da pasta Testes HTML.

3. No arquivo CSS apague a declaração de plano de fundo.

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

Imagem inserida como plano de fundo

(30)

5. Posicione o cursor após o atributo Ɵ tle da tag <img>, tecle <Espaço> e digite: border="10"

6. Salve as alterações no código. Depois, minimize a janela do Sublime e abra o arquivo

"teste.html" no navegador.

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;

Borda inserida na imagem

img{

border:3px solid #FF0000;

}

Arquivo style.css

Borda inserida na imagem

(31)

12. Visualize a nova borda e volte ao Sublime.

13. Acesse o documento HTML, posicione o cursor após o atributo tle, tecle <Espaço> e digite: height="350" width="350"

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;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Alterando o tamanho da imagem

Visualização da imagem no navegador

(32)

25. Salve as alterações no código. O bloco fi cará assim:

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

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

17. LINKS ͳ 1

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

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

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

img{

width:512px;

height:384px;

}

Arquivo style.css

Imagem após aplicado o CSS

(33)

Passo a passo:

2. Com o programa aberto, abra nele os arquivos "teste.html" e "style.css", presentes dentro da pasta Testes HTML.

3. No documento HTML posicione o cursor após a abertura da tag <body> e tecle <Enter>.

4. Digite a tag de link: <a href="https://www.google.com">Buscar</a><br>

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

6. Minimize a janela do Sublime e abra o arquivo "teste.html" no navegador.

7. Posicione o cursor sobre o link e observe seu caminho na parte inferior da janela.

8. Dê um clique no link.

9. Clique no botão do navegador para voltar à página anterior.

10. Retorne ao Sublime.

11. Após o fi m da tag do primeiro link, tecle <Enter> e digite:

<a href="img/img4.jpg" target="_blank">Imagem</a><br>

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

14. Feche a aba com a imagem e volte ao Sublime.

15. Selecione e apague o valor atual do atributo target. No lugar digite: _self 16. Salve as alterações e atualize a página no navegador.

17. Clique no link referente à imagem.

18. Volte à página anterior clicando no botão do navegador. Depois, feche o navegador.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="https://www.google.com">Buscar</a><br>

</body>

</html>

Inserindo links

Visualização dos links

(34)

19. No Sublime tecle <Ctrl> + <Z> até voltar ao valor _blank em target.

20. Salve as alterações. Depois, feche os arquivos, o Sublime e a pasta Testes HTML.

18. LINKS ͳ 2

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

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 modifi cações para facilitar o trabalho do usuário.

2. Posicione o cursor após o código da terceira imagem e tecle <Enter>.

3. Digite o tulo: <h2>Bem-vindo</h2>

4. Tecle <Enter> e digite o texto: <p>Bem-vindo ao curso de HTML e CSS.</p>

5. Posicione o cursor após a tag de abertura do tulo <h2> e digite a tag com o atributo:

6. Feche a tag de link, posicionando o cursor antes do fechamento de <h2> e digitando: </a>

7. A linha de código deve fi car 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>

10. Salve as alterações no documento. Minimize a janela do Sublime e abra o arquivo "teste.

html" no navegador.

<body>

<a href="#chegada">Bem-vindo</a><br>

<a href="https://www.google.com">Buscar</a><br>

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

<p>Bem-vindo ao curso de HTML e CSS.</p>

</body>

Inserindo links

(35)

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 fi cará assim:

18. Clique na primeira imagem.

19. Observe o site aberto em uma nova aba. Feche o navegador.

20. Para fi nalizar feche o documento "teste.html" e o Sublime.

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

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

Inserindo links

Link aberto em uma nova aba Link Bem-vindo

(36)

19. ESTILIZAÇÃO DE LINKS

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

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

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

( 1 ) font-family ( 2 ) font-size ( 3 ) color

( 4 ) text-decoraƟ on

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

( ) Serve para alterar a família de fonte.

( ) Es liza a cor da fonte.

( ) Defi ne 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;

7. Salve as alterações. Minimize a janela do Sublime e abra o arquivo "teste.html" no navegador.

8. Retorne ao Sublime e, com o cursor posicionado ao fi nal da primeira declaração, tecle

<Enter>.

img{

width:512px;

height:384px;

} a{

font-family:calibri, sans-serif;

}

Arquivo style.css

(37)

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

11. Após visualizar a nova cor, volte ao Sublime.

12. Tecle <Enter> ao fi nal 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;

21. Aponte o cursor sobre o primeiro link.

22. Direcione o cursor para cima dos outros links e observe o efeito. Depois, feche o navegador.

23. Para encerrar feche os arquivos e o Sublime.

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 Links com a cor alterada

Efeito hover aplicado no primeiro link

(38)

20. LISTAS ORDENADAS

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

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

2. O que o atributo start permite na lista?

Passo a passo:

1. Para começar abra o Sublime Text.

2. Com um novo arquivo em branco, clique em File e selecione Save As.

3. Nomeie o arquivo como listas.html.

4. Salve o arquivo dentro da pasta Testes HTML. Se precisar de ajuda para encontrar a pasta, peça ao seu instrutor.

5. Abra a tag html digitando: <html

6. Aceite a sugestão do programa teclando <Enter>.

7. Com a estrutura do HTML já criada e o cursor posicionado entre as tags de tulo, digite:

Exemplo de Listas

8. Posicione o cursor dentro de <body> e tecle <Tab> para aplicar a indentação correta.

9. Digite a tag de lista ordenada: <ol></ol>

10. Posicione o cursor entre as tags de abertura e fechamento da lista e tecle <Enter>.

11. Para o primeiro item da lista digite: <li>Primeiro</li>

12. Insira mais quatro itens na lista:

13. Salve as alterações no código. Minimize a janela do Sublime e abra o arquivo "listas.html"

no navegador.

<ol>

<li>Segundo</li>

<li>Terceiro</li>

<li>Quarto</li>

<li>Quinto</li>

</ol>

Inserindo lista ordenada

(39)

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"

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"

<li>Primeiro</li>

<li>Segundo</li>

<li>Terceiro</li>

<li>Quarto</li>

<li>Quinto</li>

</ol>

Alterando o Ɵ po da lista

Visualização da lista no navegador

Visualização da lista no navegador Visualização da lista no navegador

(40)

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"

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 a vidades a seguir.

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

2. Como se defi ne o po 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:

4. Posicione o cursor entre as chaves de abertura e fechamento da lista e tecle <Enter>.

<li>Primeiro</li>

<li>Segundo</li>

<li value="6">Terceiro</li>

<li>Quarto</li>

<li>Quinto</li>

</ol>

(41)

5. Digite os itens:

6. Tecle <Ctrl> + <S> para salvar as alterações. Minimize a janela do Sublime e abra o arquivo

"listas.html" no navegador.

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"

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

11. Apague o valor de type e, no lugar, digite: disc

<li>Cachorro</li>

<li>Peixe</li>

<li>Porco</li>

<li>Cavalo</li>

Inserindo lista não ordenada

Lista não ordenada

<li>Cachorro</li>

<li>Peixe</li>

<li>Porco</li>

<li>Cavalo</li>

</ul>

(42)

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

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

15. Digite a tag de imagem com o atributo referente ao seu caminho: <img src="img/img8.jpg">

16. Posicione o cursor após o atributo src, tecle <Espaço> e digite: width="100" height="100"

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>

20. Salve as alterações, vá para o navegador e atualize a página.

<li>Cachorro</li>

<li>Peixe</li>

<li>Porco</li>

<li type="square">Cavalo</li>

</ul>

Inserindo imagem no primeiro item

<li>Peixe</li>

<li>Porco</li>

<li type="square">Cavalo</li>

</ul>

Inserindo imagem no quinto item

<li>Peixe</li>

<li>Porco</li>

<li type="square"><a href="img/img7.jpg" target="_blank">Imagem</a></li>

</ul>

Alterando o Ɵ po do quinto item da lista

(43)

21. Clique no link presente na lista.

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

23. Para fi nalizar 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, evidenciando suas diferenças. Coloque em prá ca seu aprendizado com os exercícios a seguir.

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

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

Passo a passo:

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

2. Apague a tag de imagem presente no primeiro item da lista.

3. Dentro do primeiro item digite: Cachorro

4. Posicione o cursor após o fechamento da tag de tulo, tecle <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"

Arquivo fi nalizado

(44)

7. O segundo item deve fi car assim:

8. Salve as alterações e acesse a aba do arquivo CSS.

9. Posicione o cursor após a chave de fechamento do úl mo 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 fi car assim:

14. Salve as alterações no código. Minimize o Sublime e abra o arquivo "listas.html" no navegador.

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

16. Posicione o cursor dentro da tag de abertura do primeiro item da lista, tecle <Espaço> e digite: class="item"

18. Volte ao Sublime, posicione o cursor dentro da abertura da tag do terceiro item da lista, tecle <Espaço> e digite: id="peixe"

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

20. Posicione o cursor após a chave que fecha o bloco da classe e tecle <Enter> duas vezes.

21. Digite o seletor com o id e abra as chaves do novo bloco de declarações: #peixe{

22. Tecle <Enter> para organizar o bloco.

Inserindo classe e id na lista

<li class="item">Cachorro</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 no segundo item

Arquivo style.css .item{

color:#543CFF;

}

(45)

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;

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

27. Para encerrar feche os arquivos e o Sublime.

23. ATRIBUTOS DE POSICIONAMENTO

Nesse capítulo estudamos as propriedades de margem, reposicionando o elemento na página.

Na sequência encontram-se algumas a vidades para exercitar o seu entendimento sobre o assunto.

1. Para que serve a propriedade CSS margin?

( ) Quando somente um valor é especifi cado na propriedade margin, a mesma margem é aplicada para todos os quatro lados.

( ) Ao especifi car 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 rela vo.

( ) Ao se escrever o valor "auto" para a margem, o navegador defi ne uma margem adequa- da para ser u lizada.

Arquivo style.css

#peixe{

font-size:22px;

color:#B930FF;

}