Desenvolvimento Web Cliente - Atividade 2

Prévia do material em texto

17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 1/10
Usuário ANDERSON DE ALMEIDA
Curso GRA0632 DESENVOLVIMENTO WEB CLIENTE GR0613211 - 202110.ead-
15208.01
Teste ATIVIDADE 2 (A2)
Iniciado 06/06/21 19:58
Enviado 17/06/21 22:15
Status Completada
Resultado da
tentativa
2 em 10 pontos  
Tempo decorrido 266 horas, 17 minutos
Resultados exibidos Respostas enviadas, Respostas corretas, Comentários
Pergunta 1
Resposta
Selecionada:
 
Links são utilizados com frequência em um sistema web. Dentre os tipos de links o de saída tem
uma importância singular. Os links de saída são aqueles que referenciam páginas fora do seu
sistema. Eles são importantes, pois conduzem o usuário a uma página externa com o objetivo de
complementar e referenciar o assunto em questão, ou seja, são um complemento para a
informação. 
Para destacar um link é interessante fazer o uso correto das folhas de estilo. Com base nessas
informações, analise o código css abaixo: 
 
a:link, a:visited {
  background-color: green;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
  
  
Sobre o trecho de código css apresentado podemos a�rmar que
A cor do link é alterada quando o usuário passa o mouse sobre o link.
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 2/10
Resposta
Correta:
Comentário
da
resposta:
A cor de fundo do link e a cor do link são diferentes para
melhorar o contraste da informação.
Sua resposta está incorreta. Essa alternativa não corresponde a uma a�rmativa
verdadeira sobre o trecho de código da folha de estilo apresentada. As
propriedades “background-color” e “color” referem-se, respectivamente, a cor de
fundo e a cor do link. A cor de fundo está de�nida como verde e a cor do texto
do link foi de�nida como branca. As duas cores bem diferentes proporcionam
um maior contraste, o que geralmente é utilizado para dar um destaque no
conteúdo apresentado. A propriedade “text-align” centralizada o nome dado ao
link dentro do espaço do conteiner. A propriedade “text-decoration” indica que
para os estados link e visited o link não estará sublinhado, mas não infere
qualquer comportamento para os outros estados do link. A propriedade
“padding” de�ne o espaço entre o texto do link e o restante da linha (bordas
invisíveis). Por �m, a propriedade “display” está relacionada a como o link será
apresentado. 
Pergunta 2
Resposta
Selecionada:
Resposta
Correta:
Comentário
da
resposta:
As tags de formatação de texto ajudam a destacar trechos da parte escrita da página, seja para
�ns de Mecanismos de Otimização de Busca (SEO - Search Engine Optimization) ou por requisitos
do conteúdo. Dentre as tags disponíveis podemos citar:
b e strong para negrito/texto forte;
i e em para itálico/ênfase;
  
Os mesmos efeitos visuais podem ser obtidos com propriedades das folhas de estilo:
font-style:......estilo da fonte: normal, itálico etc;
font-weight:.....peso da fonte: bold;
  
Com base nessas informações, podemos a�rmar que:
Deve-se optar pelo uso de tags e folhas de estilo, pois assim o efeito é aplicado
em todos os navegadores
Deve-se optar pelo uso de propriedades css ao invés de tags, pois
o conteúdo fica  separado da apresentação.
Sua resposta está incorreta. Essa alternativa não corresponde a uma a�rmativa
correta sobre o uso das tags ou das propriedades referentes a estilo de texto. O
uso de folhas de estilo deve ser priorizado, já que o código �ca mais organizado,
separando o conteúdo da apresentação. Isso porque o custo de manutenção do
sistema tente a reduzir com o uso dessa separação, uma vez que as mudanças
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 3/10
de aparência do sistema �cam localizadas nos arquivos de folhas de estilo. Em
termos de funcionamento, tanto o uso das tags quanto das folhas de estilo
dependem da forma como o navegador renderizará a informação e a aparência.
Entretanto não há depreciação no uso de um ou de outro tipo em termos de
aparência.
Pergunta 3
Resposta
Selecionada:
Resposta
Correta:
Comentário
da
resposta:
O seletor .class no CSS seleciona elementos que tem um determinado valor desse atributo e
permitem aplicar uma série de estilos. Um elemento HTML pode ter mais de uma classe
associada, sendo o efeito cascata aplicado neste caso. A sintaxe básica do seletor .class está
de�nido abaixo 
  
.class { 
  css declarations; 
} 
  
Considere agora o trecho de código a seguir 
 
<!DOCTYPE html> <html> <head> <style> p.center {   text-align: center;   color: red; }  
p.large {   font-size: 300%; } </style> </head> <body>   <h1 class="center">Cabeçalho 1</h1>
<p class="center">Parágrafo 1</p> <p class="center large">Parágrafo 2</p>   </body>
</html>
  
  
Assinale a alternativa correta sobre o conteúdo renderizado a partir desse código:
O texto “Parágrafo 2” será exibido na cor vermelha, centralizado e com
fonte grande.
O texto “Parágrafo 2” será exibido na cor vermelha,
centralizado e com fonte grande.
Resposta correta. O “Parágrafo 2” está de�nido por duas classes: center e large.
Com a propriedade cascata das folhas de estilo, todas as propriedades de�nidas
nessas duas classes serão aplicadas a este parágrafo. Por esse motivo,
“Parágrafo 2” será renderizado na cor vermelha, centralizado e com fonte
grande.
Pergunta 4
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma
folha de estilo externa, você pode mudar a aparência de um site inteiro mudando
1 em 1 pontos
1 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 4/10
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo com
extensão .css). 
  
Selecione a opção que contém a sintaxe correta para a importação de uma folha de
estilo externa denominada “estiloBase.css”:
<link rel="stylesheet" type="text/css" href="estiloBase.css">
<link rel="stylesheet" type="text/css"
href="estiloBase.css">
Resposta correta. A tag <link> é utilizada para importar ou linkar uma folha de
estilo externa. Além da tag <link> é importante que sejam incluídos três (3)
atributos associados com ela e com os valores corretos: (1) rel com o valor
"stylesheet"; (2) type com o valor "text/css"; e (3) href com o valor
"estiloBase.css".
Pergunta 5
No HTML usamos a tag form para delimitar a área na qual se encontram os campos a serem
preenchidos pelo usuário, a �m de serem enviados para processamento no back-end (enquanto
a página HTML é chamada de front-end da aplicação). 
Considere o trecho de código abaixo referente a de�nição de um formulário e sua folha de estilo:
 
Definição html do formulário:
<form>
  <label for="fname">Nome</label>
  <input type="text" id="fnome" name="fnome">
</form>
 
Folha de estilo:
input {
  width: 50%;
}
  
Sobre o trecho de código anterior, podemos a�rmar que:
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 5/10
Resposta
Selecionada:
Resposta
Correta:
Comentário
da
resposta:
É necessário utilizar o atributo class no formulário para linkar com a folha de
estilo.
A propriedade “width” define que os campos de entrada terão
largura igual a 50% do espaço ocupado pelo formulário.
Sua resposta está incorreta. Essa alternativanão corresponde a a�rmativa
correta sobre o trecho de código anterior. A propriedade “width” de�ne que os
campos de entrada terão largura igual a 50% do espaço ocupado pelo
formulário. Não tem correlação com o tamanho do formulário em si.
Pergunta 6
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
As tags html de texto são comumente empregadas com folhas de estilo para organizar a
apresentação do conteúdo apresentado. Tendo isso em mente, analise o exemplo de folha de
estilo que é disponibilizada para a tag <p> em que todos os caracteres são apresentados em
letras maiúsculas. 
 
p.uppercase {
  text-transform: uppercase;
}
  
  
Assinale a alternativa que emprega corretamente a de�nição anterior para que o conteúdo
exibido esteja em caracteres maiúsculos:
<p style="uppercase">Este é um texto em letras maiúsculas</p>
<p class="uppercase">Este é um texto em letras
maiúsculas</p>
Sua resposta está incorreta. Essa alternativa não corresponde ao correto uso da
de�nição de “p.uppercase”. Para que seja possível utilizar o estilo de�nido em
“p.uppercase” deve-se acrescentar o atributo class na tag <p>.
Pergunta 7
Uma folha de estilos é composta por uma ou mais de�nições de estilo. Uma de�nição de estilo é,
0 em 1 pontos
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 6/10
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
por sua vez, composta pelo nome de uma tag html (qualquer uma), seguida por uma lista de
propriedades para essa tag, dentro de chaves de abertura e fechamento. Cada uma dessas
propriedades é identi�cada pelo seu nome, seguido de dois-pontos (:) e pelo seu valor. Na
de�nição de várias propriedades para uma tag, utiliza-se o ponto-e-vírgula (;) para as separar. 
  
Assinale a alternativa que apresenta um trecho de código com sintaxe incorreta para uma folha
de estilo
#minhadiv {background-color:lightblue}
body {font-size: 0.5 cm, color: yellow, background: black}
Sua resposta está incorreta. Essa alternativa não corresponde a uma folha de
estilo de�nida incorretamente em termos de sintaxe. Como foi apresentado no
texto introdutório as propriedades de um estilo devem vir separadas por ponto-
e-vírgula (;). As vírgulas são utilizadas para descrever diferentes informações
sobre uma mesma propriedade, como é utilizado na de�nição da fonte em
“font-family: tahoma, sans-serif”.
Pergunta 8
A extensão CSS signi�ca Cascading Style Sheets ou Folhas de Estilo em Cascata. Esse nome
advém da propriedade de sobreposição de estilo que ocorre entre as de�nições mais genéricas
até as mais especí�cas. A regra é que quanto mais especí�co um estilo, a sua aplicação é
priorizada. 
  
Conhecendo esse conceito, considere agora os trechos de código a seguir que correspondem a
um trecho de um arquivo de folha de estilos e um arquivo html:
Folha de estilo externa: meuEstilo.css
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 9px;
}
#conteudo p. minhaClasse {
color: #0f0; /* Cor verde */
}
#conteudo p {
color: #00f; /* Cor azul */
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 7/10
Resposta Selecionada: 
Resposta Correta: 
Comentário
da
resposta:
font-size: 18px;
}
p {
color: #f00; /* Cor vermelha */
font-size: 26px;
}
 
Arquivo html: minhaPagina.html
<html>
     <head>
          <link rel="stylesheet" type="text/css" href="meuEstilo.css">
     </head>
<div id="conteudo">
     <p class="minhaClasse">
                Parágrafo 1
     </p>
</div>
 <p>
       Parágrafo 2
  </p>
</html>
  
Com base no código apresentado anteriormente, podemos a�rma que :
A exibição do “Parágrafo 1” será na cor vermelha
A exibição do “Parágrafo 2” será na cor vermelha
Sua resposta está incorreta. Essa alternativa não corresponde a correta
aparência do conteúdo da tag <p> mencionada. Na folha de estilo externa, o
escopo mais genérico é de�nida com a cor vermelha. A de�nição mais especí�ca
que esta é aquela que é atrelada ao identi�cado “conteudo”. Esse identi�cador
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 8/10
foi utilizado na tag <div>. Posteriormente, a terceira de�nição mais especí�ca é
para a cor verde. Ela é aplicada para a tag <p> que está atrelada a uma tag
externa a <p> com o valor de classe igual a “minhaClasse” e além disso, <p> está
de�nida internamente a uma tag com o identi�cado “conteudo”. Este último
caso ocorre para o parágrafo com conteúdo “Parágrafo 1”.
Pergunta 9
Resposta Selecionada:
As istas são comumente utilizadas nas páginas html para apresentar de forma
organizada uma enumeração de elementos. A tag <ul> representa uma lista não
ordenada com as opções de bebidas em um restaurante, sendo cada item da lista
determinado pelo elemento li. Considere a lista apresentada abaixo: 
  
 
O trecho html que foi utilizado para renderizar essa lista está apresentado no
trecho de código a seguir:
<ul>
  <li>Café</li>
  <li>Chá</li>
  <li>Refrigerante</li
>
</ul>
  
Com base nessas informações e sabendo que green é verde e yellow é amarelo, a
opção que apresenta a correta definição do código css para alcançar a aparência
da lista anterior está representado em
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_6… 9/10
 
Resposta Correta:
 
Comentário
da
resposta:
d.  
ul {  
  background: green;  
  padding: 20px;  
}  
   
ul class=”li” {  
  background: yellow;  
  margin: 5px;  
} 
 
ul { 
  background: green; 
  padding: 20px; 
} 
  
ul li { 
  background: yellow; 
  margin: 5px; 
}
Sua resposta está incorreta. Essa alternativa não corresponde a
aparência determinada pela aparência da lista apresentada. Observe
que a propriedade background é responsável por definir a cor de
fundo de cada um dos elementos. No caso da lista apresentada, o
conteiner/caixa mais externo é na cor verde. Cada um dos itens da
lista tem um background na cor amarelo. A definição “ul li” indica
que o estilo é aplicado aos itens das listas não ordenadas. Isso é
interessante porque seria possível definir comportamentos distintos
a elementos das listas ordenadas e não ordenadas de forma
separada.
Pergunta 10
Os links no html são de�nidos com a tag <a>. Em uma folha de estilo é possível alterar a
aparência do link. Dentro desse contexto, o link possui diferentes estados que são descritos no
css pela tag a, seguida do nome do estado: 
a:link – o usuário ainda não visitou o link 
a:visited -  o usuário já visitou o link 
a:hover – o link quando o mouse do usuário passa por cima 
a:active – o momento em que um link é clicado 
  
Sabendo dessa informação considere agora o trecho de código a seguir: 
 
0 em 1 pontos
17/06/2021 Revisar envio do teste: ATIVIDADE 2 (A2) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_TEST_PLAYER&COURSE_ID=_… 10/10
Quinta-feira, 17 de Junho de 2021 22h16min13s BRT
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
a:link {
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
  
  
Podemos a�rmar que os links na página que tem o css anterior associado irão se comportar da
seguinte maneira:
Os links nos estados “link” e “hover” terão o mesmo comportamento.
Os links nos estados “visited” e “active” terão o
comportamento padrão.
Sua resposta está incorreta. Essa alternativa não corresponde ao
comportamento que será renderizadopelos navegadores ao verem um link no
corpo da página html. No trecho de código css os estados que estão sendo
alterados são “link” e “active”. A propriedade “text-decoration” está relacionada
com o sublinhado no link. Assim no estado “link” o link não estará com o
sublinhado, mas no estado “hover” estará. Ou seja, quando o usuário passar o
mouse por cima do link ele vai aparecer sublinhado. Os demais estados que não
foram de�nidos terão o comportamento padrão que dependerá do navegador
utilizado.