Apostilas em PDF – Estruturação Web com HTML5, DHTML e CSS3

não diz nada sobre o conteúdo que carrega. O HTML5 introduziu tags que explicam o que é o conteúdo para os navegadores e motores de busca (SEO).

Tags Semânticas Essenciais para Prova:

• : Cabeçalho da página ou de uma seção.
• : O conteúdo principal e único da página.
• : Conteúdo independente e autossuficiente (ex: um post de blog).
• : Uma seção temática de conteúdo.

Outras novidades do HTML5:

CSS3: A Pele e o Estilo

O CSS (Cascading Style Sheets) é responsável pela apresentação. O CSS3 trouxe modularidade e novos recursos poderosos como sombras, bordas arredondadas, gradientes e animações, sem a necessidade de imagens pesadas.

O Conceito Mais Cobrado: Box Model (Modelo de Caixa) Para a banca, tudo no HTML é uma caixa retangular. Entender como o tamanho dessa caixa é calculado é vital.

O Box Model é composto, de dentro para fora, por:

1. Content: O conteúdo real (texto, imagem).
2. Padding: O espaçamento interno (entre o conteúdo e a borda).
3. Border: A borda da caixa.
4. Margin: O espaçamento externo (entre a caixa e os elementos vizinhos).

Seletores CSS (Hierarquia): Quem ganha se houver conflito de estilos? A “especificidade”.

Estilo Inline (style=”…”) > ID (#id) > Classe (.class) > Tag (p, div).

DHTML: O Conceito Dinâmico

Aqui está uma “pegadinha” comum. DHTML (Dynamic HTML) não é uma linguagem nova e nem um padrão W3C específico. O DHTML é um termo guarda-chuva usado para descrever a combinação de tecnologias para criar páginas web interativas e animadas. A fórmula do DHTML é:

DHTML = HTML (Estrutura) + CSS (Estilo) + JavaScript (Comportamento/DOM)

Quando uma questão fala em DHTML, ela está se referindo à capacidade de manipular o DOM (Document Object Model) em tempo real. Por exemplo: passar o mouse sobre um menu e ele abrir (drop-down) ou validar um formulário sem recarregar a página. Embora o termo seja antigo, o conceito é a base das SPAs (Single Page Applications) modernas.

Resumo da Tríade Front-End

Tecnologia	Função	Analogia do Corpo Humano
HTML5	Estrutura e Significado (Semântica).	O Esqueleto.
CSS3	Apresentação e Estilo Visual.	A Pele e as Roupas.
JavaScript (DHTML)	Comportamento e Interatividade.	Os Músculos e o Sistema Nervoso.

Bora ver como esse assunto é cobrado nos concursos!

1. (QUADRIX/ANALISTA/CFO/2025)

Os desenvolvedores dispõem de uma grande variedade de linguagens de programação, cada uma com suas vantagens e desvantagens. Com base nessa informação, julgue o item a seguir.

HTML5 é a evolução da linguagem HTML e oferece novos elementos semânticos, como

,

e

COMENTÁRIO

O item está correto. O HTML5 representou um marco na evolução do desenvolvimento web ao introduzir elementos semânticos como

,

e

2. (QUADRIX/ASSISTENTE DE TI/CRN-8/2024)

Assinale a alternativa que apresenta a definição do termo DHTML (Dynamic HTML).

1. Uma linguagem de programação para desenvolvimento de páginas web.
2. É uma combinação de HTML, CSS e JavaScript para criar páginas web interativas.
3. É um conjunto de tecnologias para criar, especificamente, animações em 3D.
4. Uma técnica para criar documentos HTML dinâmicos usando apenas o servidor.
5. É um protocolo de comunicação segura entre servidores web.

COMENTÁRIO

A alternativa correta é a B. O termo DHTML (Dynamic HTML) não se refere a uma linguagem de programação única, mas sim ao conceito de utilizar de forma combinada o HTML (para a estrutura), o CSS (para o estilo), o JavaScript (para a lógica e interatividade) e o DOM (Document Object Model) para criar páginas web que podem mudar e reagir às ações do usuário em tempo real, sem a necessidade de recarregar o navegador. Diferente de tecnologias puramente do lado do servidor (como sugerido na opção D), o DHTML opera no lado do cliente (navegador), permitindo animações, menus interativos e atualizações dinâmicas de conteúdo que tornam a experiência do usuário muito mais rica e fluida.

3. (CEBRASPE/ANALISTA/FINEP/2024)

Assinale a opção em que é indicado atributo HTML usado para especificar o destino de um link.

1. target
2. rel
3. href
4. alt
5. src

COMENTÁRIO

A alternativa correta é a C. O atributo href (do inglês Hypertext Reference) é o elemento essencial da tag de âncora () utilizado para especificar o endereço de destino (URL) de um link. Enquanto o href define para onde o usuário será direcionado, os outros atributos citados possuem funções diferentes: o target (A) determina onde o link será aberto (como em uma nova aba), o rel (B) descreve a relação entre o documento atual e o recurso vinculado, o alt (D) provê um texto alternativo para acessibilidade e o src (E) é usado para definir a origem de arquivos em elementos como imagens e scripts.

Conclusão

Não subestime o poder dos fundamentos. Entender a semântica do HTML5, o cálculo do Box Model do CSS3 e o conceito de interatividade do DHTML é a base sólida que te permitirá responder desde questões simples até as mais complexas sobre frameworks modernos que, no fundo, apenas abstraem esses três pilares.

Mantenha o foco e até a próxima!