Simulic
Español

Laboratorio de HTML y CSS – contenido, estructura y estilo

InformáticaAplicaciones digitalesEdades 17–18

Cargando…

Usar con mi clase ✨ Personalizar con IA Informar de un problema

Edita el contenido, el marcado HTML y una hoja de estilos CSS en paneles separados y mira cómo la página y el árbol DOM se actualizan mientras escribes. Cambia de hoja de estilos para ver el mismo contenido presentado de forma muy distinta; haz clic en un elemento para ver qué reglas CSS se aplican, su especificidad y el modelo de caja. Un validador señala etiquetas sin cerrar o mal anidadas y propiedades y valores CSS no válidos. Otras dos pestañas tratan un formulario con validación del navegador y la petición GET/POST que envía, y eventos click e input que cambian la página.

Lección: Crear páginas web con HTML y CSS: elementos, atributos, selectores, modelo de caja, formularios y eventos

Qué muestra

Una página web tiene tres capas. HTML marca el contenido con elementos como h1, p, ul y table, y el navegador convierte el marcado en un árbol DOM. Las reglas CSS eligen elementos con selectores (etiqueta, .clase, #id) y fijan propiedades como color, margin y padding; si varias reglas chocan, deciden la importancia, la especificidad y el orden, y algunas propiedades se heredan. Cada elemento es una caja de contenido, relleno, borde y margen. Los formularios envían pares nombre=valor a un servidor con GET o POST, y los manejadores de eventos de JavaScript cambian el DOM después de cargar la página.

Cómo usarla

En Página y estilo, elige una Página de ejemplo y una Hoja de estilos, luego edita el panel Contenido, HTML o CSS y observa la página y el árbol DOM. Haz clic en un elemento de la página o en una fila del árbol DOM para ver sus reglas y su modelo de caja; haz clic en un mensaje para ir a su línea. En Formulario, rellena los campos y envíalo para ver la petición HTTP. En Eventos, edita los manejadores del panel Eventos (JS) y pulsa los botones.

Parámetros que puedes cambiar

  • Pestaña Página y estilo, Formulario, Eventos
  • Página de ejemplo Artículo, Tarjetas de perfil, Tabla
  • Hoja de estilos Clásica, Moderna, Oscura, Sin CSS
  • Método del formulario GET, POST
  • Mostrar el árbol DOM
  • Mostrar el modelo de caja

Preguntas para explorar

  1. ¿Por qué el árbol DOM queda igual cuando cambias la hoja de estilos?
  2. ¿Qué regla gana, #lamp o #lamp.on, y cuál es la especificidad de cada una?
  3. ¿Dónde pone los datos un formulario GET y por qué es mala idea para contraseñas?

Simulaciones relacionadas