Font size
WorksheetsCurso de HTML e CSS
Total questions: 12
Worksheet time: 14mins
Durante a aula, você criou um arquivo chamado index.html para iniciar a construção do conteúdo da sua página. Sobre as tags que foram utilizadas, é correto afirmar:
A tag <p> é utilizada para criar títulos.
A tag <header> define o conteúdo da página.
A tag <h1> é utilizada para criar textos menores.
A tag <body> define o conteúdo da página.
Observe a imagem acima. Cada um dos textos foi escrito utilizando uma tag HTML.
Ordene todos os blocos que representam, na hierarquia correta, as tags utilizadas.
<header></header>
<h1></h1>
<p></p> parágrafo 1
<p></p> parágrafo 2
Observe a imagem. José está criando uma página para organizar o conteúdo que ele precisa estudar para as disciplinas da escola. Até o momento, a página de José está assim:
Ordene todos os blocos e ajude José a continuar desenvolvendo a página ao fazer o mesmo processo para as disciplinas de Biologia.
<h1>Biologia
</h1>
<p>3° Trimestre
</p>
Durante a aula você aprendeu a funcionalidade de mais algumas tags importantes na estrutura de uma página. Sobre tags, é correto afirmar:
Usamos a tag <title> para criar o título da página que é exibido na aba no navegador.
Por ser uma tag de organização, a tag <div> não precisa de fechamento, ou seja, de </>.
Assim como no arquivo HTML, ao utilizarmos uma tag no arquivo CSS usamos os caracteres <>.
A tag <title> é responsável por definir o idioma do conteúdo da página.
Helena está criando uma página de esportes e para mantê-la organizada, criou uma grande seção para todos os esportes. Dentro desta seção criou a primeira categoria “esportes com bola”.
Ordene todos os blocos que programam corretamente a página descrita.
<section>
<div>esportes com bola
</div>
</section>
Reordenar o seguinteJefferson está criando seu primeiro site e decidiu que a cor de fundo da sua tela será branca. Já para destacar os títulos, a cor do texto será vermelha.
Ordene todos os blocos que representam corretamente as propriedades CSS da página descrita.
background:
white;
red;
color:
Durante a aula conhecemos sobre dois tipos de espaçamento: o padding e margin. Agora vamos colocar esses conhecimentos em prática! Vamos desenvolver o seguinte código:
- Título com um espaçamento interno de 2 pixels igualmente para todos os lados
- O mesmo título com um espaçamento externo superior de 5 pixels
Qual dos códigos abaixo representa corretamente estas modificações?
h1 { font-size: 40px;
padding-right: 2px;
margin: 5px; }
h1 { font-size: 40px;
padding: 2px;
margin-left: 5px; }
h1 { font-size: 40px;
padding-bottom: 2px;
margin: 5px; }
h1 { font-size: 40px;
padding: 2px;
margin-top: 5px; }
Reordenar o seguinteVamos continuar testando nossos conhecimentos sobre os espaçamentos padding e margin?
Agora, queremos desenvolver um código que a seção tenha um espaçamento interno superior de 10 pixels e um espaçamento interno inferior de 20 pixels.
Ordene todos os blocos que programam corretamente o espaçamento da seção de conteúdo.
padding-top:
10px;
padding-bottom:
20px;
Reordenar o seguinteGabriel adicionou cores novas em seu arquivo CSS mas, ao carregar a página, percebeu que as modificações não estão sendo aplicadas na página HTML. Então lembrou que precisa conectar o seu novo arquivo CSS em seu arquivo HTML.
Ordene todos os blocos que façam corretamente esta conexão.
<link = rel
"stylesheet"
href=
"style.css"/>
Durante a aula você aprendeu a utilizar classes para customizar elementos da página HTML. Sobre as características de uma classe, é correto afirmar:
Uma classe tem como função customizar apenas um elemento da página, como o título por exemplo.
Para inserir uma classe no arquivo CSS utilizamos o seletor . (ponto) antes de seu nome.
Para criar uma classe no arquivo HTML, utilizamos a palavra “classe”.
Ao criar uma classe no CSS, automaticamente o arquivo index.html inclui esta classe na página.
Reordenar o seguinteArthur 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.
font-size:
30px;
margin:
10px;
Reordenar o seguinteJoana está criando um catálogo de filmes virtual onde a cada mês ela apresenta 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.
.filmes-agosto {
background: black;
color: yellow;
padding-bottom: 5px; }
