Resumêra

Questão 1 – Qual das alternativas descreve corretamente uma desvantagem do uso de tabelas para layout?

1.50 pontos Média

Escolha a alternativa correta.

A) Tabelas permitem mesclar células com colspan e rowspan. B) O navegador renderiza a página somente após ler toda a estrutura da tabela. C) Tabelas facilitam a acessibilidade para leitores de tela. D) CSS pode ser aplicado diretamente nas células <td>. E) Tabelas são recomendadas para layouts responsivos.

Resposta correta: B) O navegador renderiza a página somente após ler toda a estrutura da tabela.

Essa característica gera atraso na exibição, sendo a principal desvantagem citada no conteúdo.

Questão 2 – Sobre a técnica “tableless” com <div>, assinale a alternativa correta.

2.50 pontos Difícil

Selecione a opção que melhor reflete as vantagens da abordagem.

A) Permite que o navegador renderize o conteúdo à medida que os <div> são interpretados. B) Exige o uso de atributos de apresentação (ex.: align, bgcolor) nas tags. C) Impede a aplicação de estilos CSS externos. D) Necessita de colspan para mesclar áreas de conteúdo. E) Só funciona em navegadores antigos (IE6‑8).

Resposta correta: A) Permite que o navegador renderize o conteúdo à medida que os <div> são interpretados.

Essa característica acelera a exibição e é a principal vantagem da técnica tableless.

Questão 3 – Em relação aos novos elementos semânticos do HTML5, assinale a alternativa INCORRETA.

2.50 pontos Difícil

Escolha a opção que não corresponde ao uso recomendado.

A) <header> agrupa o cabeçalho da página, incluindo logotipo e navegação. B) <article> deve ser usado para blocos de conteúdo independente, como notícias. C) <section> pode substituir <nav> para menus de navegação. D) <footer> contém informações de contato e direitos autorais. E) <nav> indica um bloco de links de navegação principal ou secundário.

Resposta correta: C) <section> pode substituir <nav> para menus de navegação.

Embora ambos agrupem conteúdo, <nav> tem significado específico de navegação, enquanto <section> é genérica.

Questão 4 – Considere o seguinte trecho de CSS usado em um layout “tableless”:

3.50 pontos Extrema

#menu { width: 200px; float: left; }
#artigos { width: 648px; float: left; }
#parceiros { width: 150px; float: left; }

Qual o efeito visual esperado ao aplicar esse CSS ao HTML que contém as três divs acima?

A) As três áreas ficarão empilhadas verticalmente, uma abaixo da outra. B) As áreas #menu e #parceiros ficarão ao lado de #artigos, formando três colunas alinhadas horizontalmente. C) Apenas #artigos ocupará toda a largura da página, enquanto #menu e #parceiros serão ocultados. D) #menu ficará acima de #artigos, e #parceiros ficará abaixo de #artigos. E) O layout ficará quebrado porque faltou definir display:flex no contêiner.

Resposta correta: B) As áreas #menu e #parceiros ficarão ao lado de #artigos, formando três colunas alinhadas horizontalmente.

O uso de float:left em cada div faz com que elas se alinhem lado a lado, respeitando as larguras definidas.

Técnicas de Layout em HTML5: Tabelas, DIVs e Elementos Semânticos

Questões sobre o assunto