NEW
Font size
WorksheetsProva PR: Algoritmos: HTML, CSS, JS
Total questions: 15
Worksheet time: 8mins
1-Luciano está desenvolvendo uma página web sobre automóveis esportivos. Ele gostaria de inserir fotos de carros na página. Para manter o layout de sua página coeso e impedir que a imagem perca qualidade, ele deseja que o tamanho máximo das imagens seja de 60%. Como ele pode fazer isso?
A- img
{max-widht:60%}
B- Img: 60%
C- (img: 60-%)
2-Você está trabalhando em um projeto onde precisa que um botão execute uma ação quando clicado. Você sabe que deve usar um ouvinte para isso. Como você deveria adicionar este ouvinte ao botão com o id "botaoEnviar"?
document.getElementById('botaoEnviar').addEventListener('click', enviaFormulario);
document.getElementById('botaoEnviar').onclick = enviaFormulario();
document.getElementById('botaoEnviar').addEventListener('click', enviaFormulario());
3-Ana está criando um site para a biblioteca da escola, onde todos os livros devem ser exibidos na estante, mas quando algum estudante clicar em um deles, ele deverá desaparecer.
Aqui estão os passos que ela precisa seguir:
Selecionar todos os livros da estante.
Exibir todos os livros na estante.
Fazer com que, ao clicar em um livro da estante, o livro desapareça.
const estante = document.querySelector
('.estante');
estante.classList.add
('mostrar');
estante.addEventListener
('click', function() {
estante.classList.remove('mostrar') } );
estante.classList.add('mostrar');
const estante = document.querySelector('.estante');
estante.addEventListener('click', function() {
estante.classList.remove('mostrar') } );
estante.addEventListener('click', function() {
estante.classList.remove('mostrar') } );
4-A turma de Giovana está desenvolvendo uma página web com várias fotos da turma. Essas imagens estão guardadas em uma única pasta, dentro do diretório com os arquivos de seu projeto. Considerando isso, quais as vantagens de armazenar todas as imagens de uma página web em uma pasta específica?
a-Melhoria na velocidade de carregamento da página.
b-Facilidade de referenciar as imagens nos arquivos HTML.
c-Alternativa correta
Redução do tamanho total do projeto.
5-A linha de código abaixo é referente a uma foto com um texto alternativo. Porém, quando adicionamos esse trecho dentro do código, ele não funciona.
<img p="Desenho a mão de um pôr do sol entre os prédios da cidade src="por-do-sol.png" </img>
<img src="por-do-sol.png" alt= "Desenho a mão de um pôr do sol entre os prédios da cidade"</img>
<img src="por-do-sol.png" alt= "Desenho a mão de um pôr do sol entre os prédios da cidade">
<img src="por-do-sol.png" p= "Desenho a mão de um pôr do sol entre os prédios da cidade"</p>
6-Gustavo desenvolveu uma página web sobre dinossauros brasileiros. Ele já compartilhou os arquivos de sua página no GitHub, e agora deseja publicá-los através do GitHub Pages.
Acessar as configurações do repositório
(clicar em "Settings")
Selecionar a opção Pages (Páginas)
Em "Branch (Filial)", selecionar main (principal)
Pressionar o botão Save (Salvar)
Acessar as configurações do repositório
(clicar em "Settings")
Selecionar a opção Pages (Páginas)
Em "Branch (Filial)", selecionar main (principal)
Não é preciso Salvar.
Apenas salvar
7-Durante a aula, você aprendeu a estilizar alguns elementos HTML utilizando as propriedades CSS. Agora, você deverá aplicar os seus conhecimentos para alterar a cor de fundo do conteúdo da página para azul.
body {
background-color: blue;
}
head {
background-color: blue;
}
body {
background-color:
#555555}
8-A linguagem de estilização CSS, nos auxilia a personalizar a estrutura HTML que desenvolvemos para uma página web, possibilitando criar uma imagem atrativa e agradável ao usuário.
No entanto, para que essas mudanças ocorram é preciso que uma conexão entre os documentos HTML e CSS seja feita. Isso acontece através:
A-Da inserção de uma tag no arquivo HTML para vincular o documento CSS.
B-Da criação de um novo documento que conterá os códigos HTML e CSS juntos.
C- Do navegador web que conecta os documentos ao exibir a página web
9-Max desenvolveu um site e precisa definir estilos na página principal. Ele deseja adicionar as seguintes propriedades:
body
{ color: _____;
font-family: _____;
display: _____;
height: _____; }
Complete as lacunas do código, de acordo com o valor de cada propriedade:
A- green | Arial |50px | flex
B- green |50px | flex
C- green | arial | flex | 50px
10-Silvio está criando um site sobre jogos de tabuleiro e construiu o seguinte código:
<h1>Jogos de tabuleiro</h1>
<p>Dama</p>
<p>Xadrez</p>
Agora, ele quer aumentar o tamanho da fonte dos nomes dos jogos.
p{ font-size: 20px }
h1{ font-size: 20px }
body: 20px;
11-Lucas está refinando a estética do seu site e decidiu que os títulos principais
precisam ser maiores para chamar mais atenção, enquanto os parágrafos
precisam ser menores. Ordene todos os blocos abaixo de acordo com a hierarquias das tags e a
importância dos elementos, começando pela maior hierarquia e importância.
h1 { fonte-size: 40px; } p { fonte-size: 20px; } body { fonte-size: 16px; }
h1{ fonte-size: 16px; }
body { fonte-size: 40px; }
p { fonte-size: 20px; }
body { fonte-size: 16px; }
h1 { fonte-size: 40px; }
p { fonte-size: 20px; }
p { fonte-size: 20px; }
body{ fonte-size: 16px; }
h1 { fonte-size: 40px; }
12-Caio desenvolveu o seguinte código:
<body>
<h1>Meu projeto escolar</h1>
<p>Tema: programação</p>
</body>
Ele importou a fonte Roboto e quer que ela seja aplicada em todos os elementos.
Qual comando abaixo é responsável por executar essa ação?
a) h1 { font-family: “Roboto”, sans-serif; }
b) head { font-family: “Roboto”, sans-serif; }
c) p { font-family: “Roboto”, sans-serif; }
d) body { font-family: “Roboto”, sans-serif; }
13-Durante a aula, você aprendeu a utilizar classes para personalizar elementos da
página HTML. Sobre as características de uma classe, é correto afirmar:
a) Uma classe tem como função personalizar apenas um elemento da página,
como o título.
b) Para inserir uma classe no arquivo CSS, utilizamos o seletor . (ponto) antes
de seu nome.
c) Para criar uma classe no arquivo HTML, utilizamos a palavra classe.
d) Ao criar uma classe no CSS, o arquivo index.html inclui automaticamente
essa classe na página.
14-Arthur está desenvolvendo uma página sobre seus livros favoritos e, após adicionar
o título dos livros, customizou esse elemento com as seguintes propriedades:
• Tamanho de fonte: 30 pixels;
• Espaçamento externo em todos os lados: 10 pixels.
Ordene todos os blocos que representam corretamente a customização feita
por Arthur.
10px; } margin: 30px; font-size:
A- font-size: 30px; |margin: 10px; }
B- font-size: 10px;
margin: 30px
C- 30px:margin
font-size:10px}
15-Joana está criando um catálogo de filmes virtual no qual a cada mês ela
apresentará as estreias do cinema de sua cidade. Para criar a seção dos filmes
do mês de agosto, ela utilizou as seguintes customizações:
• Cor de fundo: preta;
• Cor da fonte: amarela;
• Espaçamento interno inferior: 5 pixels.
Ordene todos os blocos que representam corretamente a customização feita
por Joana.: { | background: black; | color: yellow; | padding-bottom: 5px; .filmes-agosto }
{ background: black; color: yellow; padding-bottom: 5px; .filmes-agosto}
.filmes-agosto { background: black; color: yellow; padding-bottom: 5px; }
.filmes-agosto { padding-bottom: 5px; background: black; color: yellow; }
