Metadados e CSS em HTML

Prévia do material em texto

Verifique o seu desempenho e continue
treinando! Você pode refazer o exercício
quantas vezes quiser.
A
B
C
1
Quando criamos uma página HTML, podemos
acrescentar metadados, através da tag meta,
para definir características específicas, como
página de código utilizada para acentuação,
nome do autor, descrição do conteúdo e
palavras-chave para sistemas de busca. Qual
dos metadados está relacionado à
responsividade, definindo a área de
visualização padrão?
keywords
description
charset
Questão de 10
Corretas
Incorretas
Em branco
1 2 3 4 5
6 7 8 9 10
Camada De…
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
1 of 17 16/11/2025, 23:27
D
E
viewport
author
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
O metadado que está diretamente
relacionado à responsividade de uma
página HTML é o 'viewport'. Este metadado
define a área de visualização padrão,
permitindo que a página seja exibida
corretamente em diferentes dispositivos. As
demais opções apresentadas têm funções
distintas: 'author' é utilizado para definir o
nome do autor da página, 'description'
fornece uma descrição do conteúdo da
página, 'keywords' cria uma lista de
palavras-chave para auxiliar os sistemas de
busca a encontrar a página, e 'charset' é
usado para definir a codificação de
caracteres utilizada na página, o que é
essencial para a correta exibição de
caracteres acentuados. Portanto, embora
todos esses metadados sejam importantes
para diferentes aspectos de uma página
HTML, apenas 'viewport' está relacionado
à sua responsividade.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
2 of 17 16/11/2025, 23:27
A
B
C
D
E
2
Podemos utilizar formatações CSS de diferentes
formas, como escrita direta no atributo da tag,
de forma inline, em um trecho delimitado pela
tag style, ou em um arquivo externo. O uso de
arquivo externo traz os maiores benefícios, pois
traz uma separação física entre a estrutura e a
formatação do documento, além de promover o
reuso, permitindo até mesmo a definição de
temas para o site. Qual tag deve ser utilizada na
página HTML para importar as formatações
definidas em um arquivo CSS?
script
link
meta
a (âncora)
object
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Para importar um arquivo CSS em uma
página HTML, utilizamos a tag 'link'. Esta
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
3 of 17 16/11/2025, 23:27
A
B
tag deve ter o atributo 'rel' definido como
'stylesheet' e o atributo 'href' deve conter o
caminho para o arquivo CSS. Um exemplo
de uso seria: . Em relação às
outras tags mencionadas nas alternativas,
'script' é usada para incorporar ou
referenciar um arquivo JavaScript, 'a'
(âncora) é usada para criar links, 'meta' é
usada para definir metadados sobre a
página HTML e 'object' é usada para
incorporar conteúdo multimídia, como
vídeos, áudios ou imagens.
3
As tags para tipografia, utilizadas nas versões
antigas do HTML, são consideradas obsoletas
atualmente, sendo toda a formatação delegada
para folhas de estilo em cascata �CSS�, o que
foi definido como uma boa prática pela W3C.
Supondo que seja necessário formatar
determinado trecho genérico único, identificado
como "aviso", com fonte amarela, fundo
vermelho, itálico e sublinhado, qual seria a
expressão utilizada em uma tag style?
span, #aviso {background-color: red;
font: yellow italic underline}
.aviso {color: yellow; background-
color: red; text-decoration: italic
underline}
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
4 of 17 16/11/2025, 23:27
C
D
E
#aviso {font-color: yellow; font-
background: red; text-decoration: italic
underline}  
span, .aviso {background-color: red;
font: yellow italic underline}
#aviso {color: yellow; background-
color: red; text-decoration: underline;
font-style: italic}
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
A formatação de um elemento único é
realizada através do uso do id precedido de
cerquilha, neste caso, #aviso. A cor da
fonte é definida pelo atributo color,
enquanto o fundo é determinado por
background-color. O sublinhado é aplicado
através de text-decoration e o estilo itálico
é obtido por meio de font-style. É
importante notar que não devemos
preceder o seletor com um ponto, pois isso
seria usado para aplicar estilos a elementos
de uma classe específica, o que não
permitiria a individualização. Além disso, o
uso de vírgula nos seletores não estabelece
uma hierarquia para a aplicação de estilos,
mas sim um grupo onde o estilo será
aplicado.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
5 of 17 16/11/2025, 23:27
A
B
C
D
E
4
As tabelas já foram muito utilizadas para
organizar o conteúdo da página HTML, mas a
W3C desaconselha a prática, por causa da
incompatibilidade de alguns navegadores,
levando a outro tipo de organização, baseado
em divs, segundo o padrão tableless. No
entanto, as tabelas ainda são utilizadas para
exibição de dados tabulares. Qual tag define
uma área de títulos na tabela?
tbody
tfoot
thead
tr
table
Opa! A alternativa correta é a letra
C. Confira o gabarito comentado!
Na estrutura de uma tabela HTML, a tag
'thead' é utilizada para definir a área de
cabeçalho, onde geralmente são colocados
os títulos das colunas. Esta área é de
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
6 of 17 16/11/2025, 23:27
A
B
grande utilidade para o reconhecimento a
partir de frameworks ou na aplicação de
estilos. Além do 'thead', existem outras
duas áreas importantes na estrutura de
uma tabela: 'tbody', que contém o
conteúdo principal da tabela, ou seja, as
linhas de valores associados aos títulos; e
'tfoot', que define o rodapé da tabela, onde
é comum a presença de sumarizações dos
valores apresentados. Embora a tag 'table'
seja usada para definir a tabela em si e a
tag 'tr' seja usada para cada linha, a
resposta correta para a pergunta é a tag
'thead', pois ela é que define a área de
títulos na tabela.
5
O uso de Bootstrap facilita muitas das tarefas
comuns na construção de interfaces gráficas,
além de incluir recursos para garantia da
responsividade. Entre os diversos ferramentas
que são disponibilizados, temos a criação de
diálogos modais com o uso de classes CSS e
um pequeno conjunto de divs. Nesse contexto,
qual a função do atributo data-bs-dismiss com
valor modal?
Desativa o acesso à fonte de dados
padrão do formulário.
Deve ser aplicado à div contendo o
título, para que o valor não seja
substituído no template.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
7 of 17 16/11/2025, 23:27
C
D
E
Não tem efeito sobre o
comportamento do diálogo, e serve
apenas para indicar a presença dele
nas ferramentas de busca.
Desativa todos os botões que foram
definidos no trecho do diálogo modal.
Quando aplicado a um botão, fecha o
diálogo modal como resposta ao
clique.
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
A criação de um diálogo modal no
Bootstrap é estruturada com uma div da
classe 'modal', que possui o atributo 'role'
com valor 'dialog'. Dentro desta div, o
primeiro elemento interno deve ser outra
div, da classe 'modal-dialog'. Esta, por sua
vez, contém uma div da classe 'modal-
content', que abriga três divisões: 'modal-
header' (para o título), 'modal-body' (para
informações ou formulários) e 'modal-
footer' (geralmente com botões de ação).
Quando um desses botões recebe o
atributo 'data-bs-dismiss' com valor
'modal', ele adquire a função de fechar o
diálogo modal quando clicado. Portanto, a
alternativa correta é a E� "Quando aplicado
a um botão, fecha o diálogo modal como
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...8 of 17 16/11/2025, 23:27
A
B
C
D
E
resposta ao clique".
6
Para utilizar o Bootstrap em um projeto Spring
Boot, podemos acessar as bibliotecas via link
para os repositórios na Web, ou adicionar uma
dependência para baixar os arquivos JavaScript
e CSS necessários, transformando em
chamadas locais para o servidor, o que pode
diminuir de forma considerável o tempo
necessário para a abertura das páginas. Qual
componente deve ser incluído para que os
arquivos sejam baixados?
JacksonConverter
Retrofit
OkHttpClient
WebJars
Express
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
9 of 17 16/11/2025, 23:27
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Os WebJars são bibliotecas do Bootstrap
disponibilizadas no formato jar. Essas
bibliotecas permitem a utilização do
Bootstrap ao nível do projeto, sem a
necessidade de acesso a um repositório
remoto. Para incluir os WebJars no projeto,
é necessário especificar a versão desejada
no arquivo pom.xml. A versão 5.0.2 é
frequentemente indicada devido à sua
documentação mais completa. Portanto, a
alternativa correta é a "D", que menciona
os WebJars como o componente
necessário para baixar os arquivos
JavaScript e CSS do Bootstrap.
7
Uma das grandes vantagens na utilização do
framework Spring é a gerência de segurança
através do módulo Spring Security, que oferece
diversas formas de autenticação, como OAuth,
diretamente no protocolo HTTP ou através de
formulários. Ao trabalhar com um aplicativo
Web, o processo de autenticação é
normalmente feito através de formulários, onde
o Spring Security permite a personalização das
páginas de login e logout. Analise as afirmativas
e marque a opção correta acerca da
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
10 of 17 16/11/2025, 23:27
A
B
C
D
E
personalização de interfaces na autenticação
baseada em formulários.
Deve ser criado um controlador para
responder às rotas /login e /logout no
modo POST.
A configuração do objeto HttpSecurity
permite o direcionamento para uma
página de logout personalizada
através do método logoutPage.
A tela de login deve apresentar um
formulário com os campos e-mail e
password.
No comportamento padrão, um logout
bem-sucedido direciona para a raiz do
site.
A configuração do objeto HttpSecurity
permite o direcionamento para uma
página de login personalizada através
do método loginPage.
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
O Spring Security, ao ser utilizado com
base no modelo de formulário, oferece
telas de login e logout padronizadas que
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
11 of 17 16/11/2025, 23:27
utilizam Bootstrap. No entanto, essas telas
podem não estar alinhadas com o design
do aplicativo e, por padrão, o usuário é
redirecionado para a tela de login após o
logout. Para personalizar essas telas, é
possível utilizar alguns métodos de
HttpSecurity. O método loginPage permite
definir uma página de login personalizada,
enquanto os métodos logoutUrl e
logoutSuccessUrl permitem personalizar a
página de logout e a página para a qual o
usuário é redirecionado após o logout,
respectivamente. Os campos do formulário
de login serão 'username' e 'password'.
Além disso, é necessário criar um
controlador para responder às rotas /login
e /logout no modo GET, pois o modo POST
é gerenciado pelo próprio Spring Security.
Portanto, a alternativa correta é a E, que
afirma que a configuração do objeto
HttpSecurity permite o direcionamento para
uma página de login personalizada através
do método loginPage.
8
O uso de iterações baseadas em coleções é
muito comum nas mais diversas plataformas,
inclusive no Java, onde temos o formato
especial do for para iterar em coleções e
vetores, o que não seria diferente nos templates
do Thymeleaf, onde é utilizado o atributo
th:each. Qual das afirmações a seguir é
CORRETA, no que se refere ao uso do atributo
th:each?
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
12 of 17 16/11/2025, 23:27
A
B
C
D
E
Só permite a utilização com elementos
do tipo ArrayList.
Recebe cada elemento da coleção em
um objeto, permitindo acesso aos seus
campos nas tags internas do trecho
estabelecido.
É um recurso bastante restrito,
devendo ser utilizado apenas para o
preenchimento das linhas em uma
tabela HTML.
Não pode ser utilizado para o
preenchimento dos itens de uma lista
HTML.
Ao contrário do for para coleções do
Java, não individualiza os objetos da
coleção.
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Segundo a sintaxe utilizada pelo atributo
th:each, recebemos cada valor da coleção
em um objeto nomeado, que pode ser
utilizado nas tags internas com
${objeto.campo}, como em
th:each="depto: ${deptos}". A fonte de
dados pode ser qualquer coleção,
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
13 of 17 16/11/2025, 23:27
A
B
C
D
E
mapeamento ou vetor, exatamente como o
for especial do Java, e qualquer tag pode
ser repetida, incluindo itens de lista e
opções para caixas de seleção, não se
limitando às linhas de uma tabela.
9
Utilizar o Thymeleaf junto ao Spring Boot
permite eliminar muitas configurações,
facilitando o processo de fornecimento de
dados para os templates HTML, dentro da
arquitetura padrão de controladores. Na prática,
utilizamos o mesmo modelo de comunicação
adotado para interfaces JSP, mas agora com os
dados sendo tratados em arquivos HTML, com
os atributos e diretivas do Thymeleaf. Nesse
contexto, qual atributo do Thymeleaf permite
associar um formulário HTML aos dados de um
objeto fornecido pelo controlador?
th:action
th:field
th:text
th:object
th:href
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
14 of 17 16/11/2025, 23:27
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Na integração do Thymeleaf com o Spring
Boot, o controlador adiciona um objeto
nomeado ao modelo, que é recuperado no
template e associado ao formulário pelo
atributo th:object. Este atributo é o
responsável por vincular os dados de um
objeto fornecido pelo controlador a um
formulário HTML. Os campos do formulário
são preenchidos com os valores das
propriedades do objeto, por meio do
atributo th:field, e os dados são enviados
para a rota definida no atributo th:action,
quando o formulário é submetido. Em
relação aos outros atributos, th:href é
usado para definir o endereço de uma
âncora, e th:text substitui o conteúdo
interno de uma tag.
10
Qualquer site precisa de um sistema de
navegação adequado, onde temos como
exemplo a barra de navegação, posicionada no
topo da página, com os links para as páginas,
na forma de um menu principal. Através do
Bootstrap, temos a classe navbar para a
definição de uma barra de navegação a partir
de uma tag nav, apresentando diversas opções,
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
15 of 17 16/11/2025, 23:27
A
B
C
D
E
como uso de tema dark. Qual das afirmativas
seguintes é correta, no que se refere ao
componente navbar?
De forma geral, a classe navbar-brand
é aplicada na opção principal da barra
de navegação.
A definição de uma barra de
navegação impede a organização do
espaço através de classes como col-
sm-8 ou col-sm-4.
Para demonstrar visualmente qual a
página ativa, devemos configurar o
nav-link como used.
A classe navbar-nav é aplicada aos
itens de uma lista, fazendo com que
eles se apresentem como itens de
menu.
A opção navbar-expand-lg é utilizada
para preencher todo o espaço vertical
com o conteúdo da barra de
navegação.
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
No Bootstrap, a classe navbar é utilizada
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
16 of 17 16/11/2025, 23:27
para criar uma barra de navegação.A
opção principal dessa barra, como por
exemplo a página inicial (home), é
configurada através da classe navbar-
brand, que a destaca das demais opções.
As outras opções de navegação podem ser
organizadas em uma lista, utilizando a
classe navbar-nav. Cada item dessa lista
será do tipo nav-item, representando as
diferentes opções de menu. Dentro de cada
nav-item, deve haver uma âncora da classe
nav-link, que indicará a página ativa através
da opção active. Além disso, o Bootstrap
permite a organização dos espaços por
meio de suas classes do Grid System,
como col-sm-4. A opção navbar-expand-
lg, por sua vez, é utilizada para preencher
todo o espaço horizontal em telas largas,
comprimindo os itens em telas com espaço
reduzido.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a87bb42af42702d...
17 of 17 16/11/2025, 23:27