Quiz 02 - Introdução
1. O que significa a sigla HTML?
HyperTool Multi Language
HyperText Markup Language
High Technical Modern Language
Hybrid Text Markup Level
*Explicação: HTML é a linguagem de marcação padrão para criar páginas web.*
2. Qual tag é usada para definir o título que aparece na aba do navegador?
``
`
`
``</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<meta>`
*Explicação: A tag `<title>` fica dentro do `<head>` e define o nome da página na aba.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">3. Onde deve ficar todo o conteúdo visual do site (títulos, imagens, textos)?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Dentro da tag `<head>`</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Antes da tag `<html>`</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Dentro da tag `<body>`">Dentro da tag `<body>`</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Dentro da tag `<meta>`
*Explicação: O `<body>` é o corpo do documento, onde reside tudo o que é visível ao usuário.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">4. Qual a função da tag `<!DOCTYPE html>` no início do arquivo?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Criar um título para o site</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Definir a cor do fundo da página</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Informar ao navegador que o documento utiliza a versão HTML5">Informar ao navegador que o documento utiliza a versão HTML5</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Conectar o site ao banco de dados
*Explicação: O DOCTYPE é uma instrução que indica a versão do HTML para que o navegador renderize corretamente.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">5. Para que serve o atributo `lang` na tag `<html lang="pt-br">`?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Para definir o nome do autor do site</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Para informar o idioma principal da página aos navegadores e buscadores">Para informar o idioma principal da página aos navegadores e buscadores</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Para traduzir o código automaticamente para outras línguas</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Para mudar a cor do texto do site
*Explicação: O atributo `lang` é crucial para acessibilidade e SEO (otimização de buscas).*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">6. O que são Metadados no contexto do HTML?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Os textos principais do corpo do site</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Informações sobre o documento que não aparecem diretamente na página">Informações sobre o documento que não aparecem diretamente na página</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Imagens de alta resolução</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Os links para sites externos
*Explicação: Metadados são "dados sobre dados", como codificação de caracteres e configurações de tela.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">7. Qual a importância da tag `<meta charset="UTF-8">`?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Deixar o site mais rápido</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Garantir que acentos, caracteres especiais e emojis sejam exibidos corretamente">Garantir que acentos, caracteres especiais e emojis sejam exibidos corretamente</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Permitir o uso de vídeos no site</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Definir a largura da página
*Explicação: O UTF-8 é o padrão de codificação de caracteres mais usado na web moderna.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">8. No HTML, como identificamos uma tag de fechamento?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Ela não tem o sinal de maior `>`</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Ela começa com um ponto `.`</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Ela possui uma barra `/` antes do nome da tag (ex: `</p>`)">Ela possui uma barra `/` antes do nome da tag (ex: `</p>`)</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Ela é escrita em negrito
*Explicação: A barra indica o fim do elemento que foi aberto anteriormente.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">9. Qual o objetivo da tag `<meta name="viewport" ...>`?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Definir a cor da barra de rolagem</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Inserir uma imagem de fundo</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Garantir que o site seja exibido corretamente em dispositivos móveis (responsividade)">Garantir que o site seja exibido corretamente em dispositivos móveis (responsividade)</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Criar um menu de navegação
*Explicação: Essa tag configura a área de visualização do navegador para telas de diferentes tamanhos.*</div>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-container">
<div class="quiz-question">10. O que é um "Atributo" em uma tag HTML?</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">O nome do arquivo salvo no computador</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">O texto que o usuário digita no site</div>
<div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Uma informação adicional fornecida dentro da tag de abertura (ex: `src`, `class`, `id`)">Uma informação adicional fornecida dentro da tag de abertura (ex: `src`, `class`, `id`)</div>
<div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Uma tag que não precisa ser fechada
*Explicação: Atributos personalizam ou fornecem dados necessários para o funcionamento da tag.*</div>
<div class="quiz-feedback"></div>
</div>