CSS e Bootstrap: Formatação e Navegação

Prévia do material em texto

Verifique o seu desempenho e continue
treinando! Você pode refazer o exercício
quantas vezes quiser.
A
1
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}
Questão de 10
Corretas
Em branco
1 2 3 4 5
6 7 8 9 10
Camada De…
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
1 of 17 16/11/2025, 23:31
B
C
D
E
.aviso {color: yellow; background-
color: red; text-decoration: italic
underline}
#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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
2 of 17 16/11/2025, 23:31
A
B
C
uma hierarquia para a aplicação de estilos,
mas sim um grupo onde o estilo será
aplicado.
2
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,
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.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
3 of 17 16/11/2025, 23:31
D
E
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
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
4 of 17 16/11/2025, 23:31
A
B
C
D
E
reduzido.
3
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
5 of 17 16/11/2025, 23:31
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
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.
4
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/691a88d7c2d762a619...
6 of 17 16/11/2025, 23:31
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/691a88d7c2d762a619...
7 of 17 16/11/2025, 23:31
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.
5
Uma grande preocupação do Bootstrap é a
garantia da responsividade, e ele traz diversas
classes para a definição de colunas, como col-
sm-2 e col-sm-4, dividindo o espaço da tela em
doze áreas de igual espaçamento e utilizando o
número de colunas indicado na classe,
podendo ser 1, 2, 4, 8 ou 12. Qual o nome desse
sistema de organização fornecido pelo
Bootstrap?
Sistema Colunar
Sistema de Posicionamento Global
Sistema de Grid
Sistema Tabular
Sistema de Dispersão
Parabéns, você selecionou a
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
8 of 17 16/11/2025, 23:31
alternativa correta. Confira o
gabarito comentado!
O sistema de organização fornecido pelo
Bootstrap é chamado de Sistema de Grid.
Este sistema divide a tela em doze colunas
de igual espaçamento, permitindo uma
organização flexível e responsiva do
conteúdo. As classes como col-sm-2 e col-
sm-4 são usadas para definir o número de
colunas que um elemento deve ocupar. O
número após o 'sm' indicaa quantidade de
colunas, podendo ser 1, 2, 4, 8 ou 12. A
responsividade é garantida pela construção
do Bootstrap, que é baseada no Flexbox,
um modelo de layout primordial para
aplicativos que seguem a filosofia mobile-
first, onde o design é voltado para
dispositivos móveis, mesmo quando
executado na Web.
6
A construção de interfaces gráficas seguindo
uma estratégia modular permite, entre outras
coisas, a reutilização de componentes visuais
ao longo de todo o sistema, diminuindo o
esforço de programação e design
consideravelmente. Quando utilizamos o
Bootstrap em conjunto com o Thymeleaf, a
modularização é proporcionada pelo uso de
fragmentos. Em termos práticos, temos um
template dividido em fragmentos, os quais
podem ser incluídos em outros templates, de
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
9 of 17 16/11/2025, 23:31
A
B
C
D
E
acordo com a Standard Expression Syntax,
através do símbolo:
Cerquilha
Til
Asterisco
Arroba
Cifrão
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Na combinação do Bootstrap com o
Thymeleaf, a inclusão de um fragmento em
um template é realizada por meio do
símbolo til (~). A sintaxe geral para essa
operação é ~{template-fonte :: fragmento}.
No template de origem, o nome do
fragmento é definido através do atributo
th:fragment, ao nível da tag principal. A
inclusão pode ser feita em um segundo
template, inclusive com a passagem de
parâmetros. Um exemplo prático de
utilização de fragmento seria , onde é necessário um
arquivo menu.html, contendo uma tag com
atributo th:fragment="menuprincipal". Essa
estratégia permite a reutilização de
componentes visuais, otimizando o
processo de programação e design.
7
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
11 of 17 16/11/2025, 23:31
Parabéns, você selecionou a
alternativa correta. 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
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.
8
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
12 of 17 16/11/2025, 23:31
A
B
C
D
E
visualização padrão?
keywords
description
charset
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
13 of 17 16/11/2025, 23:31
A
B
C
D
E
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.
9
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/691a88d7c2d762a619...
14 of 17 16/11/2025, 23:31
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.
10
No conjunto de componentes do Thymeleaf,
temos uma classe denominada WebContext,
que permite o encapsulamento de chamadas
HTTP, com base na requisição, na resposta e
no próprio contexto do Servlet. Após ser
instanciado, o componente permite obter os
valores que foram enviados na requisição,
efetuar os procedimentos necessários, e definir
valores que serão utilizados no template,
tornando-o uma ferramenta prática para a
definição de controladores genéricos. Qual
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
15 of 17 16/11/2025, 23:31
A
B
C
D
E
método de WebContext permite enviar um valor
para o template?
getParameter
setAttribute
setLocale
setVariable
getAttribute
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
A classe WebContext do Thymeleaf é uma
ferramenta poderosa que permite o
encapsulamento de chamadas HTTP. Uma
vez instanciada, essa classe permite a
manipulação de valores enviados na
requisição e a definição de valores que
serão utilizados no template. Nesse
contexto, o método setVariable
desempenha um papel crucial, pois é ele
que permite enviar um valor para o
template. Esse método define o valor que
será recuperado no template, utilizando o
símbolo de cifrão �$) antes do nome da
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
16 of 17 16/11/2025, 23:31
variável. Esse valor é então substituído pelo
valor fornecido durante o processamento
por um objeto do tipo TemplateEngine.
Portanto, a alternativa correta é a "D", que
menciona o método setVariable.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a88d7c2d762a619...
17 of 17 16/11/2025, 23:31