Matemática II- 2º B

Multiple Choice

Navegadores da internet, como o Google Chrome, priorizam, em suas pesquisas,

resultados com páginas web responsivas, ou seja, que se ___________ a diversos ta-

manhos de ____________.

Com o intuito de garantir um bom lugar nas pesquisas da internet, surgiu o de-

senvolvimento de sites e aplicativos com a abordagem ______________ (em por-

tuguês “móvel primeiro”), que prioriza a experiência do usuário de dispositivos

_______________.

Ordene todos os blocos a seguir com as palavras corretas que completam o

texto acima.

• mobile-first adaptam móveis

  tela

• mobile-first

  tela

  adaptam móveis

• adaptam

  tela

  mobile-first móveis

• adaptam

  móveis

  tela

  mobile-first

Multiple Choice

Observe os menus ao lado e, em seguida, o código do menu estilizado.

Agora, ordene todos os blocos que são utilizados para posicionar o menu abaixo do cabeçalho e determinar uma largura para o tamanho da tela do usuário.

100%

top

60vw

width:

• top

  100%

  width:

  60vw

• 100%

  top

  60vw

  width:

• 100%

  60vw

  width:

  top

• 60vw

  top

  100%

  width:

Multiple Choice

Observe a imagem ao lado.

Com base no cenário acima, ordene todos os blocos que vão garantir o espaça-

mento correto do menu de classe lista-menu__item.

padding: 1em; |

.lista-menu__item { |

} |

Qual a sequencia correta dos blocos?

• .lista-menu__item {

  padding: 1em;

  }

• padding: 1em;

  .lista-menu__item {

  }

• }

  .lista-menu__item {

  padding: 1em;

Multiple Choice

Jack desenvolveu o formulário ao lado. Agora, Jack quer que o campo nome fique sempre com letras maiúsculas. Assinale a alternativa que indica corretamente a propriedade do CSS que pode ajudar Jack:

• Jack deve utilizar a propriedade text-decoration para inserir a obrigatoriedade de letras maiúsculas.

• Jack deverá usar a propriedade text-align para criar essa verificação de

  texto.

• Jack deve utilizar a propriedade text-transform para transformar o texto

  em letras maiúsculas.

Multiple Choice

Luiza está criando um e-commerce e quer desenvolver um menu com o seguinte comando:

- Ao clicar no ícone de classe carrinho, a lista minhas-compras deve ser exibida com todos os seus itens;

- Quando clicar novamente, a lista minhas-compras deve desaparecer.

Com base no cenário acima, ordene todos os blocos que farão a lista minhas-

-compras aparecer quando o ícone carrinho for clicado.

• display: block;}|

  .carrinho |

  :checked~ |

  .minhas-compras {|

• .minhas-compras {|

  display: block;}|

  .carrinho |

  :checked~ |

• .carrinho |

  :checked~ |

  .minhas-compras {|

  display: block;}|

• .carrinho |

  .minhas-compras {|

  :checked~ |

  display: block;}|

Multiple Choice

Inácio precisa criar um menu de navegação no cabeçalho do seu site sobre brinquedos colecionáveis de carro. Inicialmente ele planeja colocar 2 itens na sua lista (menu):

- Clássicos;

- Esportivos.

Ordene todos os blocos com as tags indicadas para criar uma lista em HTML.

• <ul> |

  </ul> |

  <li><a href=”#”>Esportivos</a></li> |

  <li><a href=”#”>Clássicos</a></li> |

• <ul> |

  <li><a href=”#”>Esportivos</a></li> |

  <li><a href=”#”>Clássicos</a></li>

  | </ul>

• <ul>|

  <li><a href=”#”>Clássicos</a></li> |

  <li><a href=”#”>Esportivos</a></li>

  | </ul>

Multiple Choice

Amanda criou uma lista com suas frutas favoritas, no entanto, ela percebeu que

a lista era exibida pela metade e sem o título. Para resolver esse problema, ela utilizou uma propriedade CSS de posicionamento.

Observe a lista antes e depois da correção.

Com base nos conteúdos aprendidos em aula, assinale a alternativa correta que indica a propriedade CSS utilizada por Amanda:

• Amanda utilizou a propriedade padding para posicionar o conteúdo corretamente na página.

• A propriedade CSS utilizada foi top, para definir um espaçamento superior

  na lista.

• Amanda usou a propriedade display: none; para alinhar o posicionamento superior na lista.

• Amanda utilizou a propriedade background-color para destacar o título

  da lista e resolver o problema de exibição.

Multiple Choice

A propriedade CSS display: flex; aplicada em um elemento HTML o transforma em um flex-container (container flexível), e os outros elementos que estão dentro se transformam em flex-itens (itens flexíveis).

Sendo assim, ordene todos os blocos que serão responsáveis por transformar um cabeçalho em um flex-container, no CSS.

• .cabeçalho {

  display: flex;

  }

• }

  .cabeçalho {

  display: flex;

• display: flex;

  .cabeçalho {

  }

• display: flex;

  }

  .cabeçalho {

Multiple Choice

Ítalo criou arquivos CSS individuais para o seu projeto e adicionou-os ao CSS principal com a tag @import. Com base no cenário ao lado, assinale a alternativa correta:

• Ítalo conseguiu melhor desempenho no código, no entanto nada aconteceu, pois os arquivos não estavam declarados dentro do HTML.

• Ao utilizar arquivos CSS individuais, ele manteve seu código mais organiza-

  do e garantiu melhor desempenho do site, evitando a repetição de estilos.

• A exibição dos estilos corpo e rodapé resultará em erro, pois a tag @import

  só pode ser usada uma única vez para importar apenas um arquivo CSS.

Multiple Choice

Bento estava desenvolvendo uma página web responsiva e a professora pediu para que a cor de fundo de todos os botões e os títulos da página fosse azul-escuro, que é representado pelo hexadecimal #191970.

Para Bento não ter que digitar esse código hexadecimal em todas as declarações de estilos do CSS, podemos criar uma variável global dentro do nosso código CSS.

Ordene todos os blocos para declarar uma variável no CSS que terá o valor hexadecimal mencionado acima.

• :root{

  -–cor-botao-e-titulo:

  #191970

  }

• } :root{

  -–cor-botao-e-titulo:

  #191970

• -–cor-botao-e-titulo:

  :root{

  #191970

  }

• -–cor-botao-e-titulo:

  #191970

  :root{

  }

Multiple Choice

Para configurarmos algumas informações essenciais da estrutura de uma página

web, utilizamos a tag <head>. Dentro dessa tag, essas informações, que também

são chamadas de metadados, são responsáveis por definir qual será a resolução

na tela que o navegador irá exibir quando o usuário acessar o nosso site.

Observe os metadados abaixo. A segunda tag possui algumas lacunas para serem preenchidas:

<head>

<meta charset=”UTF-8”>

<meta name=”________” content=”_______=device-width,

________=_______”>

<title>AluraBooks</title>

</head>

Ordene todos os blocos para preencher as lacunas do código apresentado.

• viewport

  1.0

  width

  initial-scale

• viewport

  initial-scale

  1.0

  width

• initial-scale

  viewport

  1.0

  width

• viewport

  initial-scale

  width

  1.0

Multiple Select

Durante a construção da estrutura básica de tags do HTML, inserimos metatags

dentro da tag <head>. Essas metatags definem metadados, ou seja, informações

sobre dados de um documento HTML. A seguir, você pode visualizar novamente

quais metadados foram informados no projeto Alura Book:

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Das afirmações abaixo, selecione as corretas sobre metadados. Selecione duas

alternativas.

• O metadado com nome viewport indica ao HTML que a página está sendo aberta com um celular.

• O metadado charset indica o idioma preferencial do usuário.

• O metadado viewport detecta o tamanho do dispositivo que está acessando a aplicação.

• O metadado charset se refere à codificação de caracteres.

Multiple Choice

Analise a imagem ao lado.

As figuras representam diferentes tipos de tela, em diferentes formatos.

Ordene todos os blocos, na sequência das figuras acima (da esquerda para a direita), de modo que eles identifiquem a qual dispositivo cada layout pertence.

• smartphone

  desktop (computador)

  tablet

• desktop (computador)

  smartphone

  tablet

• smartphone

  tablet

  desktop (computador)

• smartphone

  desktop (computador)

  tablet

Multiple Choice

Ao comparar os diferentes tamanhos de tela do protótipo do Figma, podemos observar a seguinte afirmação:

• O layout smartphone (celular) permite adicionarmos mais informações no

  cabeçalho e rodapé do site, como o logotipo completo e mais de um menu

  suspenso.

• A tela de tamanho desktop (computador) possui menor espaço em seu cabeçalho, sendo necessário o uso de um logotipo reduzido e menu suspenso.

• A tela de tamanho smartphone (celular) possui menor espaço em seu cabeçalho, sendo necessário o uso de um logotipo reduzido e menu suspenso.

• As telas do protótipo do Figma são todas do mesmo tamanho, independente do dispositivo.

Multiple Choice

O trecho de código abaixo é de um cabeçalho que contém a seguinte sequência:

link para a página principal e imagem de logotipo. Observe a imagem ao lado.

Sendo assim, ordene todos os blocos para preencher corretamente as lacunas no cabeçalho do código.

img /header header href

• header

  href

  img

  /header

• href

  header

  img

  /header

• /header

  href

  header

  img

• header

  img

  href

  header