Recuperação 6,0 pontos - 3º Trimestre

Ajustando a largura de um elemento

Qual das alternativas abaixo apresenta a propriedade do CSS que altera a

largura de um elemento para que ele ocupe toda a página?

• height: 100px;

• heigth: 100%;

• width: 100%;

• Edith: 100px;

No projeto que desenvolvemos foi utilizada a tag article para

criarmos a estrutura de um cartão. Sobre essa tag, escolha a alternativa correta:

• A tag article é utilizada para de iniciar um artigo, ou seja, ela cria um

  elemento de texto simples em HTML.

• A tag article é utilizada quando precisamos criar um elemento

  independente em HTML, ou seja, um elemento que funciona sem depender

  dos demais.

• A tag article é utilizada quando precisamos criar elementos que se

  relacionam entre si, dependendo uns dos outros para funcionar.

• A tag article é utilizada para criar seções de navegação no documento

  HTML.

Qual das alternativas abaixo apresenta a propriedade do CSS que faz com que os elementos do nosso container fiquem lado a lado na página?

• display: flex-grow;

• display: flex;

• display: none;

• display: block;

Para criar corretamente a estrutura de um cartão, com o nome da sua classe e um parágrafo inserido nele.

class= “cartao”>

<article

</article>

<p> Conteúdo </p>

Escreva a sequência correta de blocos nas linhas a seguir:

• <article> <p class="cartao"> Conteúdo </p> </article>

• <p> <article class="cartao"> Conteúdo </article> </p>

• <article> <article class="cartao"> <p> Conteúdo </p> </article>

• <article class="cartao"> <p> Conteúdo </p> </article>

Ana é professora na escola Alura e está desenvolvendo um projeto para administrar as notas dos seus estudantes. Para isso, criou o seguinte código: - Todas as notas devem estar inseridas dentro de uma seção; -Cada div representa a nota de um estudante. Pensando nisso, ordene todos os blocos abaixo para recriar o código de Ana.

<div class = “estudante_nota”>

</section>

<section>

</div>

Nota do estudante

Quais das alternativas é a sequência correta dos blocos citados?

• <section>

  <div class="estudante_nota">

  Nota do estudante

  </div>

  </section>

• <div class="estudante_nota">

  <section>

  Nota do estudante

  </section>

  </div>

• <section>

  Nota do estudante

  <div class="estudante_nota">

  </div>

  </section>

• <div class="estudante_nota">

  <section>

  Nota do estudante

  </section>

  </div>

Pedro está desenvolvendo o seu projeto de cartões de estudo e, para o plano de fundo da página, ele selecionou uma imagem diferente. A imagem está adicionada na pasta Imagens e o nome do arquivo é background-cartoes.png. Pensando nisso, escolha a alternativa que apresenta corretamente o código necessário para usar essa imagem como plano de fundo do site.

• background-color: url(‘Imagens/background-cartoes.png’);

• background: url(‘Imagens/background-cartoes.png’);

• background: url(‘img/background-cartoes.png’);

• background: ‘Imagens/background-cartoes.png’;

Ana decidiu inovar um pouco na construção do seu projeto e, para isso, criou um novo esquema de cores. Para o texto, Ana criou uma variável chamada

nova-cor, que armazena a cor escolhida por ela. Além de alterar a cor, Ana deseja centralizar o texto na tela.

Pensando nisso, ordene todos os blocos abaixo que modificam a cor e centralizam o texto.

text-align:center;}

color: var(--nova-cor);

.texto-principal{

Quais das alternativas é a sequência correta dos blocos?

• color: var(--nova-cor);

  .texto-principal{

  text-align: center;

  }

• .texto-principal{

  color: var(--nova-cor);

  text-align: center;

  }

• .texto-principal{

  color: var(--nova-cor);

  text-align: center;

  }

• color: var(--nova-cor);

  .texto-principal{

  text-align: center;

  }

Pedro deseja modificar a aparência dos textos dos seus cartões. Seu objetivo é que o texto da categoria da pergunta tenha peso 700, para que a fonte fique mais grossa. Além disso, Pedro deseja aplicar um espaçamento externo superior para que o texto não fique colado ao topo da página. Pensando nisso, ordene todos os blocos abaixo para que Pedro consiga alterar a espessura da sua fonte utilizando um título h3 e distancie o texto do topo da página.

margin-top: 1rem;}

.cartao__conteudo h3 {

font-weight: 700;

Quais das alternativas é a sequência correta dos blocos citados?

• margin-top: 1rem;

  .cartao__conteudo h3 {

  font-weight: 700;

  }

• .cartao__conteudo h3 {

  margin-top: 1rem;

  font-weight: 700;

  }

• font-weight: 700;

  .cartao__conteudo h3 {

  margin-top: 1rem;

  }

• .cartao__conteudo h3 {

  font-weight: 700;

  }

  margin-top: 1rem;

Utilizamos diversas tags de espaçamentos internos, externos e entre os cartões. Pensando nisso, escolha a alternativa que apresenta corretamente a tag responsável por adicionar um espaçamento maior entre um cartão e outro.

• padding: 4rem

• flex-wrap: wrap;

• gap: 3rem

• margin-top: 4rem

Qual o principal objetivo da responsividade no desenvolvimento web?

• A responsividade faz com que os nossos sites carreguem mais rapidamente em todos os navegadores.

• Ao criar um site responsivo, estamos garantindo uma maior segurança na página, pois a responsividade protege o site de ataques cibernéticos.

• O principal objetivo da responsividade é garantir que o nosso site se torne acessível para pessoas com deficiência, como pessoas cegas ou com dificuldades de leitura.

• A responsividade tem como objetivo garantir que o site carregue corretamente em diferentes dispositivos, adaptando o seu conteúdo a variados tamanhos de tela.