Pular para o conteúdo principal

Questão de Programação — HTML (HyperText Markup Language) — FUNDATEC 2023

ProgramaçãoHTML (HyperText Markup Language)
Código
qq897145
Banca
FUNDATEC
Órgão
PROCERGS
Ano
2023
Nível
Superior
Cargo
ANC - Analista em Computação - Ênfase em Desenvolvimento Front-End
Tendo em vista o código fonte abaixo, assinale a alternativa que apresenta o resultado do processamento desse código.<!DOCTYPE html> <html> <body> <section id="conteudo"></section> <script> const conteudo = document.getElementById('conteudo'); const titulo = document.createElement('h1'); titulo.textContent = 'Título'; conteudo.appendChild(titulo); const paragrafo = document.createElement('p'); paragrafo.textContent = 'Conteúdo deste parágrafo. '; conteudo.appendChild(paragrafo); const link = document.createElement('a'); link.textContent = 'Link'; link.setAttribute("href", "https://google.com"); paragrafo.appendChild(link); </script> </body> </html>
  1. A<section id="conteudo">
    <h1 id="titulo">Título</h1>
    <p>Conteúdo deste parágrafo.</p>
    <a href="https://google.com">Link</a>
    </section>
  2. B<section id="conteudo">
    <h1 id="titulo">Título</h1>
    <p>
    Conteúdo deste parágrafo.
    <a href="https://google.com">Link</a>
    </p>
    </section>
  3. C<h1 id="titulo">Título</h1>
    <section id="conteudo">
    <p>
    Conteúdo deste parágrafo.
    <a href="https://google.com">Link</a>
    </p>
    </section>
  4. D<section id="conteudo">
    <h1 id="titulo">Título</h1>
    <a href="https://google.com">Link</a>
    <p>Conteúdo deste parágrafo.</p>
    </section>
  5. E<section id="conteudo">
    <h1 id="titulo">Título</h1>
    <p>Conteúdo deste parágrafo.</p>
    </section>
    <a href="https://google.com">Link</a>
Revelar gabarito e comentário

GabaritoB — <section id="conteudo"> <h1 id="titulo">Título</h1> <p> Conteúdo deste parágrafo. <a href="https://google.com">Link</a> </p> </section>

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

Manipulação do DOM – Resultado do código JavaScript

Gabarito: letra B. O código cria um <h1> com o texto "Título" e o insere dentro da <section>, depois cria um <p> e o insere também dentro da <section>, e por fim cria um <a> e o insere dentro do parágrafo (com paragrafo.appendChild(link)). O resultado esperado é: <section id="conteudo"> contendo <h1>Título</h1> e <p>Conteúdo deste parágrafo. <a href="https://google.com">Link</a></p>.

PEGA ESSA DICA!

Para resolver, acompanhe mentalmente cada passo do script: criação dos elementos e, principalmente, onde cada appendChild insere o novo nó. A ordem importa: primeiro o <h1>, depois o <p>, e o <a> aninhado dentro do <p>.

  1. 1Cria h1 'Título'
  2. 2Insere h1 na section
  3. 3Cria p 'Conteúdo...'
  4. 4Insere p na section
  5. 5Cria a 'Link'
  6. 6Insere a dentro do p
LEVEL · soulevel.com.br

Alternativa A — ❌ Incorreta

O <a> aparece fora do <p>, mas o código o insere dentro do parágrafo. Além disso, o <h1> não possui id="titulo" (o código não atribui id).

Alternativa B — ✅ Correta ⟵ GABARITO

A estrutura corresponde exatamente ao que o script produz: <h1> sem id (embora todos os textos mostrem o id, isso é um distrator comum), seguido do <p> contendo o <a>. A ordem e o aninhamento estão corretos.

Alternativa C — ❌ Incorreta

O <h1> aparece antes da abertura da <section>, ou seja, fora do elemento de seção. O código insere o <h1> dentro da seção.

Alternativa D — ❌ Incorreta

A ordem dos elementos dentro da <section> está trocada: o <a> aparece antes do <p>. O código insere o <p> primeiro, e só depois o <a> dentro do <p>.

Alternativa E — ❌ Incorreta

O <a> está fora da <section> (após o fechamento), enquanto o código o insere dentro do <p>, que está dentro da seção.

NÃO CAIA NESSA!

Todas as alternativas incluem id="titulo" no <h1>, mas o código não cria esse atributo. Contudo, como todas exibem o id, a banca espera que você desconsidere esse detalhe e foque na ordem e no aninhamento — aí a única que acerta é a letra B.

Gabarito: letra B — a única alternativa com a hierarquia correta (h1 antes do p, e link aninhado no p).

Link permanente: /questoes/qq897145