Simulic
Português

Laboratório de HTML e CSS – conteúdo, estrutura e estilo

ComputaçãoAplicativos digitaisIdades 17–18

Carregando…

Usar com minha turma ✨ Personalizar com IA Relatar um problema

Edite o conteúdo, a marcação HTML e uma folha de estilos CSS em painéis separados e veja a página e a árvore DOM se atualizarem enquanto digita. Troque a folha de estilos para ver o mesmo conteúdo apresentado de um jeito totalmente diferente; clique em um elemento para ver quais regras CSS se aplicam, sua especificidade e o modelo de caixa. Um validador aponta tags não fechadas ou mal aninhadas e propriedades e valores CSS inválidos. Outras duas abas tratam de um formulário com validação do navegador e a requisição GET/POST que ele envia, e de eventos click e input que mudam a página.

Aula: Criar páginas web com HTML e CSS: elementos, atributos, seletores, modelo de caixa, formulários e eventos

O que mostra

Uma página web tem três camadas. O HTML marca o conteúdo com elementos como h1, p, ul e table, e o navegador transforma a marcação em uma árvore DOM. As regras CSS escolhem elementos com seletores (tag, .classe, #id) e definem propriedades como color, margin e padding; quando regras entram em conflito, decidem a importância, a especificidade e a ordem, e algumas propriedades são herdadas. Cada elemento é uma caixa de conteúdo, preenchimento, borda e margem. Formulários enviam pares nome=valor a um servidor com GET ou POST, e manipuladores de eventos em JavaScript mudam o DOM depois que a página carrega.

Como usar

Em Página e estilo, escolha uma Página de exemplo e uma Folha de estilos, depois edite o painel Conteúdo, HTML ou CSS e observe a página e a árvore DOM. Clique em um elemento da página ou em uma linha da árvore DOM para ver suas regras e seu modelo de caixa; clique em uma mensagem para ir até a linha dela. Em Formulário, preencha os campos e envie para ver a requisição HTTP. Em Eventos, edite os manipuladores no painel Eventos (JS) e clique nos botões.

Parâmetros que você pode mudar

  • Aba Página e estilo, Formulário, Eventos
  • Página de exemplo Artigo, Cartões de perfil, Tabela
  • Folha de estilos Clássica, Moderna, Escura, Sem CSS
  • Método do formulário GET, POST
  • Mostrar a árvore DOM
  • Mostrar o modelo de caixa

Perguntas para explorar

  1. Por que a árvore DOM fica igual quando você troca a folha de estilos?
  2. Qual regra vence, #lamp ou #lamp.on, e qual é a especificidade de cada uma?
  3. Onde um formulário GET coloca os dados e por que isso é ruim para senhas?

Simulações relacionadas