layouts
"Explica el siguiente código HTML y CSS poniendo especial énfasis en:
La maquetación de cajas: cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón).
El flujo natural de las cajas: cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros.
La agrupación de elementos: cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor.
La jerarquía padre-hijo: cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).
f
Tutorial: Creando una Plantilla de Registro HTML/CSS
Objetivo del Proyecto
Vamos a crear la estructura básica de una página web que contiene:
Un menú de navegación con 4 opciones.
Un formulario de registro de usuario.
Estilos CSS para que todo se vea ordenado y profesional.
Paso 1: Entendiendo la Estructura HTML
Todo documento HTML tiene una estructura básica:
<!DOCTYPE html> <html lang="en"> <head> <!-- Aquí van los metadatos y estilos --> </head> <body> <!-- Aquí va el contenido visible --> </body> </html>
Explicación:
<!DOCTYPE html>: Le dice al navegador que es un documento HTML5.<html lang="en">: La etiqueta principal, con el atributolangindicando el idioma (inglés).<head>: Contiene información para el navegador (título, estilos, etc.) que no se ve directamente.<body>: Todo lo que se muestra en la pantalla.
Paso 2: El Menú de Navegación (<nav>)
<nav> <ul> <li><a href="index.php">Registro</a></li> <li><a href="index.php?action=ingresar">Ingreso</a></li> <li><a href="index.php?action=usuarios">Usuarios</a></li> <li><a href="index.php?action=salir">Salir</a></li> </ul> </nav>
Conceptos clave:
<nav>: Etiqueta semántica para menús de navegación.<ul>: Lista no ordenada (nuestro contenedor de menú).<li>: Cada elemento de la lista (opción del menú).<a>: Hipervínculo. El atributohrefindica la página destino.index.php: Archivo principal.?action=...: Parámetro en la URL que podríamos usar en PHP para saber qué acción realizar.
Paso 3: El Formulario de Registro (<section> y <form>)
<section> <h3>REGISTRO DE USUARIO</h3> <form method="post" action=""> <input type="text" placeholder="Usuario" name="usuario" required> <input type="password" placeholder="Contraseña" name="password" required> <input type="email" placeholder="Email" name="email" required> <button type="submit">Enviar Formulario</button> </form> </section>
Explicación de etiquetas:
<section>: Agrupa contenido relacionado (el formulario).<h3>: Título de la sección.<form>: Contenedor del formulario.method="post": Los datos se envían de forma oculta (mejor para contraseñas).action="": Los datos se envían a la misma página.
<input>: Campos para ingresar datos:type="text": Texto normal.type="password": Texto oculto con puntos.type="email": Valida que tenga formato de email.placeholder: Texto de ayuda dentro del campo.name: Identificador para el backend (PHP).required: El campo es obligatorio.
<button type="submit">: Botón para enviar el formulario.
Paso 4: Los Estilos CSS - Reset Inicial
* { margin: 0; padding: 0; box-sizing: border-box; }
¿Qué hace esto?
*: Selecciona TODOS los elementos.margin: 0; padding: 0;: Elimina márgenes y rellenos por defecto que ponen los navegadores.box-sizing: border-box;: Muy importante. Hace que elpaddingyborderse incluyan en el ancho/alto total del elemento. Así es más fácil calcular tamaños.
Paso 5: Estilizando el Menú (Barra de Navegación)
nav { margin: auto; width: 100%; height: auto; background: black; } nav ul { margin: auto; width: 50%; text-align: center; } nav ul li { display: inline-block; width: 24%; line-height: 50px; list-style: none; } nav ul li a { color: white; text-decoration: none; }
Desglose:
nav: Fondo negro, ocupa todo el ancho (width: 100%).nav ul: El contenedor de la lista ocupa el 50% de la pantalla y se centra conmargin: auto.nav ul li:display: inline-block;→ Los pone en horizontal (uno al lado del otro).width: 24%;→ 4 elementos de 24% = 96% (dejando un pequeño margen).line-height: 50px;→ Centra verticalmente el texto.list-style: none;→ Quita los puntos de la lista.
nav ul li a: Texto blanco, sin subrayado.
Paso 6: Estilizando la Sección del Formulario
section { margin: auto; width: 400px; padding: 40px; } section h3 { text-align: center; margin: auto; } section form input { display: inline-block; padding: 10px; width: 100%; margin: 5px; } section form button { width: 100%; padding: 10px; margin: 5px; }
Explicación:
section:margin: auto;+width: 400px;→ Centra horizontalmente un bloque de 400px.padding: 40px;→ Espacio interno alrededor del contenido.
section h3: Centra el título.section form inputybutton:width: 100%;→ Ocupan todo el ancho del formulario (400px menos el padding).padding: 10px;→ Área interna más grande para mejor usabilidad.margin: 5px;→ Separación entre campos.
Conceptos Adicionales Explicados
| Concepto | ¿Qué significa? | ¿Para qué sirve? |
|---|---|---|
margin: auto; | Margen automático izquierdo/derecho | Centrar elementos horizontales |
display: inline-block; | Elemento en línea pero con tamaño | Poner elementos en horizontal |
line-height | Altura de línea | Centrar verticalmente textos |
box-sizing: border-box; | Incluir padding en el ancho total | Evitar que los elementos se desborden |
required | Atributo HTML | Validación básica sin JavaScript |
Ejercicios para Practicar
Cambia los colores: Haz que el menú sea azul y los enlaces amarillos.
Añade más campos: Por ejemplo: "Teléfono", "Fecha de nacimiento".
Responsive: ¿Cómo harías que el formulario ocupe el 90% en móviles?
Estados hover: Haz que los enlaces cambien de color al pasar el ratón.
Resumen Final
Has aprendido a:
Estructurar un documento HTML5.
Crear un menú horizontal con CSS.
Diseñar un formulario con campos obligatorios.
Aplicar estilos básicos para mejorar la apariencia.
Entender conceptos clave como
box-sizing,inline-blocky el centrado de elementos.
Aquí tienes el código completo con el CSS completamente documentado, explicando cada propiedad y su función:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Template - Tutorial CSS</title> <style> /* ===== RESET / ESTILOS GLOBALES ===== */ /* Aplicamos a TODOS los elementos (*) un reset básico */ * { margin: 0; /* Elimina márgenes por defecto del navegador */ padding: 0; /* Elimina rellenos por defecto del navegador */ box-sizing: border-box; /* INCLUYE padding y border en el ancho/alto total del elemento */ /* Ejemplo: si un elemento tiene width:100px y padding:10px, seguirá ocupando 100px (no 120px) */ } /* ===== BARRA DE NAVEGACIÓN (NAV) ===== */ nav { margin: auto; /* Centra el nav horizontalmente (aunque con width:100% no es necesario) */ width: 100%; /* Ocupa el 100% del ancho disponible de la pantalla */ height: auto; /* Altura automática según el contenido */ background: black; /* Fondo negro para el menú */ } /* ===== LISTA DEL MENÚ (UL) ===== */ nav ul { margin: auto; /* Centra la lista horizontalmente dentro del nav */ width: 50%; /* La lista ocupa el 50% del ancho del nav */ text-align: center; /* Centra el texto de los elementos de la lista */ } /* ===== ELEMENTOS DE LA LISTA (LI) ===== */ nav ul li { display: inline-block; /* Coloca los elementos en HORIZONTAL (en línea) */ /* inline-block permite darles ancho y alto, a diferencia de inline */ width: 24%; /* Cada li ocupa el 24% del ancho del ul */ /* 4 elementos x 24% = 96% (deja 4% para espacios) */ line-height: 50px; /* Altura de línea = 50px (centra verticalmente el texto) */ list-style: none; /* Elimina los puntos/bullets de la lista */ } /* ===== ENLACES DEL MENÚ (A) ===== */ nav ul li a { color: white; /* Color del texto: blanco */ text-decoration: none; /* Elimina el subrayado de los enlaces */ } /* ===== SECCIÓN DEL FORMULARIO ===== */ section { margin: auto; /* Centra la sección horizontalmente */ width: 400px; /* Ancho fijo de 400 píxeles */ padding: 40px; /* Espacio INTERNO de 40px por todos lados */ /* El contenido total será 400px (incluyendo el padding) */ } /* ===== TÍTULO DE LA SECCIÓN ===== */ section h3 { text-align: center; /* Centra el texto del título */ margin: auto; /* Margen automático (aunque no es necesario aquí) */ } /* ===== CAMPOS DEL FORMULARIO (INPUTS) ===== */ section form input { display: inline-block; /* Se comporta como bloque en línea */ padding: 10px; /* Espacio interno de 10px dentro del input */ width: 100%; /* Ocupa el 100% del ancho de su contenedor (section) */ /* Como el section tiene 400px y padding:40px, el ancho real disponible es 400px - 80px = 320px, pero con box-sizing:border-box, el input ocupará 320px contando su padding */ margin: 5px; /* Margen EXTERNO de 5px entre inputs */ } /* ===== BOTÓN DEL FORMULARIO ===== */ section form button { width: 100%; /* Mismo ancho que los inputs (consistencia visual) */ padding: 10px; /* Mismo padding que los inputs */ margin: 5px; /* Mismo margen que los inputs */ /* Nota: Podríamos añadir color de fondo, bordes, etc. */ } /* ===== POSIBLES MEJORAS (COMENTADAS) ===== */ /* EJERCICIOS PARA PRACTICAR: 1. Hover en enlaces: nav ul li a:hover { color: yellow; /* Cambia a amarillo al pasar el ratón */ background: gray; /* Fondo gris */ } 2. Botón más atractivo: section form button { background-color: #4CAF50; /* Verde */ color: white; /* Texto blanco */ border: none; /* Sin borde */ border-radius: 5px; /* Bordes redondeados */ cursor: pointer; /* Manito al pasar */ } 3. Diseño responsive para móviles: @media (max-width: 768px) { nav ul { width: 100%; } /* Menú ocupa todo en móvil */ section { width: 90%; } /* Formulario ocupa 90% */ nav ul li { width: 100%; } /* Menú vertical en móvil */ } */ </style> </head> <body> <!-- ===== MENÚ DE NAVEGACIÓN ===== --> <!-- nav: Etiqueta semántica para menús --> <nav> <ul> <!-- href: Enlaces con parámetros GET (action) que podrían usarse en PHP --> <li><a href="index.php">Registro</a></li> <!-- Página principal: registro --> <li><a href="index.php?action=ingresar">Ingreso</a></li> <!-- Página de ingreso/login --> <li><a href="index.php?action=usuarios">Usuarios</a></li> <!-- Lista de usuarios --> <li><a href="index.php?action=salir">Salir</a></li> <!-- Cerrar sesión --> </ul> </nav> <!-- ===== FORMULARIO DE REGISTRO ===== --> <!-- section: Agrupa contenido relacionado (el formulario) --> <section> <h3>REGISTRO DE USUARIO</h3> <!-- Título de la sección --> <!-- form: Contenedor del formulario --> <!-- method="post": Envía datos ocultos (seguro para contraseñas) --> <!-- action="": Envía a la misma página --> <form method="post" action=""> <!-- Campos del formulario --> <input type="text" placeholder="Usuario" name="usuario" required> <!-- required: Campo obligatorio, el navegador no dejará enviar vacío --> <input type="password" placeholder="Contraseña" name="password" required> <!-- type="password": Oculta los caracteres escritos --> <input type="email" placeholder="Email" name="email" required> <!-- type="email": Valida que tenga formato de email (contiene @ y .) --> <button type="submit">Enviar Formulario</button> <!-- type="submit": Botón para enviar los datos --> </form> </section> <!-- ===== NOTAS ADICIONALES ===== ¿Cómo funciona box-sizing: border-box? Sin border-box: width = contenido SOLO (padding y border se suman aparte) Con border-box: width = contenido + padding + border ¿Por qué 24% en los li? 4 elementos x 24% = 96%. El 4% restante se reparte como espacio natural entre elementos. Si quisiéramos exacto, usaríamos 25% cada uno, pero quedarían pegados. ¿Para qué sirve line-height? Si line-height = altura del contenedor, el texto se centra verticalmente. En este caso, li tiene altura de 50px por el line-height. ¿Qué significa display: inline-block? - inline: se colocan en línea pero no admiten width/height - block: ocupan todo el ancho y admiten width/height - inline-block: mezcla: en línea pero admiten width/height --> </body> </html>
ANÁLISIS COMPLETO DE MAQUETACIÓN - "CAJAS DENTRO DE CAJAS"
Vamos a diseccionar este código como si fuera una muñeca rusa (matrioska), viendo cómo cada caja contiene a otras y cómo las propiedades del padre afectan a los hijos.
VISIÓN 360°: La jerarquía completa
<body> (El terreno)
├── <nav> (La barra negra)
│ └── <ul> (La lista centrada)
│ ├── <li> <a>Registro</a> </li>
│ ├── <li> <a>Ingreso</a> </li>
│ ├── <li> <a>Usuarios</a> </li>
│ └── <li> <a>Salir</a> </li>
│
└── <section> (El formulario)
├── <h3>REGISTRO DE USUARIO</h3>
└── <form>
├── <input type="text">
├── <input type="password">
├── <input type="email">
└── <button>Enviar Formulario</button>NIVEL 1: La caja <body> - El contenedor universal
* { margin: 0; padding: 0; box-sizing: border-box; }
¿Qué hace esto?
TODAS las cajas parten de cero: sin márgenes exteriores, sin rellenos interiores
box-sizing: border-boxsignifica: "cuando digas width: 100px, eso incluye el borde y el padding"
El body en sí:
Es una caja de bloque (ocupa todo el ancho)
No tiene estilos propios, pero es el gran contenedor
Sus hijos (
<nav>y<section>) se colocarán uno debajo del otro por ser elementos de bloque
NIVEL 2: La caja <nav> - La barra de navegación negra
nav { margin: auto; /* No hace nada con width:100% */ width: 100%; /* Ocupa TODO el ancho de la ventana */ height: auto; /* Su altura la determina el contenido */ background: black; /* Fondo negro - visible */ }
Visualmente: Una franja negra horizontal que cruza toda la pantalla.
Como padre: Contiene a <ul>. Todo lo que esté dentro vivirá sobre este fondo negro.
Flujo: Es un elemento de bloque, así que empuja a <section> hacia abajo.
NIVEL 3: La caja <ul> - El contenedor de la lista
nav ul { margin: auto; /* CENTRA la caja horizontalmente */ width: 50%; /* Ocupa la MITAD del ancho de nav */ text-align: center;/* Centra el texto de los hijos */ }
Visualmente: Una caja invisible (sin fondo) que ocupa el 50% del ancho de la barra negra y está centrada.
El truco del centrado:
┌─────────────────────────┐ <-- nav (100% ancho) │ ┌───────────────────┐ │ │ │ <ul> │ │ <-- ul (50% ancho, centrado con margin:auto) │ │ (50% ancho) │ │ │ └───────────────────┘ │ └─────────────────────────┘
text-align: center: Esto lo heredarán los hijos (<li> y <a>), centrando el texto dentro de cada uno.
NIVEL 4: Las cajas <li> - Los ítems del menú
nav ul li { display: inline-block; /* Se colocan en HORIZONTAL */ width: 24%; /* Cada uno ocupa el 24% del ancho de ul */ line-height: 50px; /* Altura de línea = centrado vertical */ list-style: none; /* Quita los puntos de la lista */ }
Cambio de flujo crucial:
Por defecto,
<li>son elementos de bloque (se apilan verticalmente)Con
inline-blockse convierten en cajas que fluyen horizontalmente, como palabras
Matemáticas: 24% × 4 = 96%. Ese 4% restante son los espacios entre palabras que genera el inline-block.
Visualmente:
<ul>
├──┬ [LI 24%] ──┬── [LI 24%] ──┬── [LI 24%] ──┬── [LI 24%]
│ Registro │ Ingreso │ Usuarios │ Salir │
└───────────────┴───────────────┴───────────────┴─────────────┘
↑ pequeños espacios invisibles aquíline-height: 50px: Da altura a la caja y centra verticalmente el texto.
NIVEL 5: Las cajas <a> - Los enlaces
nav ul li a { color: white; /* Texto blanco sobre fondo negro */ text-decoration: none; /* Quita el subrayado */ }
Herencia: Reciben el text-align: center de <ul>, por eso el texto está centrado dentro de cada <li>.
Son elementos en línea dentro de cada <li>.
AHORA VAMOS CON LA SECCIÓN DEL FORMULARIO
NIVEL 2 (otro hijo del body): La caja <section>
section { margin: auto; /* CENTRA la sección horizontalmente */ width: 400px; /* Ancho fijo de 400 píxeles */ padding: 40px; /* ESPACIO INTERNO de 40px por todos lados */ }
Visualmente:
┌────────────────────────────────────┐ │ │ │ ┌──────────────────────────────┐ │ ← padding de 40px │ │ │ │ (separación del borde) │ │ ÁREA DE CONTENIDO │ │ │ │ (donde van los hijos) │ │ │ │ │ │ │ └──────────────────────────────┘ │ │ │ └────────────────────────────────────┘ <-------- 400px (width total) -------->
Importante: El padding crea un "colchón" interno. Los hijos NO pueden tocar los bordes de section; estarán dentro del área blanca interior.
Como padre: Todos sus hijos vivirán dentro de esa área central con 40px de margen interno.
NIVEL 3: La caja <h3> - El título
section h3 { text-align: center; /* Centra el texto */ margin: auto; /* Inútil aquí (los h3 ya son bloque) */ }
Flujo: Es un elemento de bloque, ocupa todo el ancho del área de contenido de section. Se coloca en su propia línea, arriba del todo.
NIVEL 3: La caja <form> - El contenedor del formulario
Sin estilos directos, pero contiene a los inputs y al botón.
Flujo: Es un elemento de bloque, así que se coloca debajo del <h3>.
NIVEL 4: Las cajas <input> - Los campos
section form input { display: inline-block; /* Se comportan como bloques en línea */ padding: 10px; /* Espacio interior en los inputs */ width: 100%; /* OCUPAN TODO EL ANCHO DISPONIBLE */ margin: 5px; /* Margen exterior separa unos de otros */ }
Punto clave: Aunque son inline-block, con width: 100% cada uno ocupa toda la línea, por lo que visualmente se apilan verticalmente.
Cálculo del ancho real:
El área de contenido de section mide: 400px - (40px padding × 2) = 320px de ancho
Cada input mide
width: 100%= 320pxTienen
margin: 5px(izquierda y derecha), pero al ser 100% el ancho, los márgenes laterales se suman al ancho total? ¡Cuidado! Conbox-sizing: border-box, el padding y borde van dentro, pero el margin SIEMPRE va fuera. Esto puede causar desbordamiento.
Visualmente:
Área de contenido (320px) ┌────────────────────────────────┐ │ ┌────────────────────────────┐ │ │ │ Input Usuario │ │ ← width: 100% = 320px │ │ │ │ margin: 5px (izq y der) │ └────────────────────────────┘ │ Ocupa 320px + 10px de margen │ │ = 330px total, ¡sobresale! │ ┌────────────────────────────┐ │ │ │ Input Contraseña │ │ │ └────────────────────────────┘ │ └────────────────────────────────┘
Problema potencial: Los inputs con width: 100% + margin: 5px se saldrán del contenedor porque el 100% ya ocupa todo, y los márgenes son EXTRA.
NIVEL 4: La caja <button> - El botón (¡MEJORADO!)
section form button { width: 100%; /* Mismo ancho que los inputs - ¡BIEN! */ padding: 10px; /* Mismo padding para consistencia */ margin: 5px; /* Mismo margen para alineación */ }
¡Correcto! Ahora el botón:
Tiene el MISMO ANCHO que los inputs (
width: 100%)Tiene el MISMO PADDING para que visualmente sea coherente
Tiene el MISMO MARGEN para mantener la separación
Resultado: El botón se alinea PERFECTAMENTE con los inputs porque comparten las mismas dimensiones y espaciado.
LA AGRUPACIÓN VISUAL - CÓMO SE VEN LAS CAJAS
<body> ├─────────────────────────────────────┐ │ <nav> (fondo negro) │ │ ┌───────────────────────────────┐ │ │ │ <ul> (50% ancho, centrado) │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌──┐│ │ │ │ │Regis│ │Ingre│ │Usuar│ │Sal││ │ ← inline-block horizontal │ │ │tro │ │so │ │ios │ │ir ││ │ │ │ └─────┘ └─────┘ └─────┘ └──┘│ │ │ └───────────────────────────────┘ │ ├─────────────────────────────────────┤ │ <section> (width:400px, padding) │ │ ┌───────────────────────────────┐ │ │ │ <h3>REGISTRO DE USUARIO</h3> │ │ ← centrado │ ├───────────────────────────────┤ │ │ │ <form> │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ [Input Usuario] │ │ │ ← width:100% (320px reales) │ │ ├─────────────────────────┤ │ │ ← margin:5px separa │ │ │ [Input Contraseña] │ │ │ │ │ ├─────────────────────────┤ │ │ │ │ │ [Input Email] │ │ │ │ │ ├─────────────────────────┤ │ │ │ │ │ [Botón Enviar] │ │ │ ← MISMO ancho y margen │ │ └─────────────────────────┘ │ │ │ │ │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘
PROBLEMAS DETECTADOS EN LA MAQUETACIÓN
1. Márgenes laterales en inputs con width:100%
section form input { width: 100%; margin: 5px; /* ¡CUIDADO! Esto suma 10px al ancho total */ }
Solución: Usar solo margen vertical o poner los inputs como bloque:
section form input { display: block; /* En lugar de inline-block */ width: 100%; margin: 5px 0; /* Solo margen vertical */ }
2. El botón también sufre el mismo problema
Misma situación: margin: 5px horizontal con width: 100% desborda.
3. La tabla en CSS no se usa
Hay estilos para tabla que no tienen correspondencia en HTML.
4. Los ítems del menú no suman 100%
24% × 4 = 96%. Ese 4% restante son espacios entre elementos que pueden causar que el último baje de línea en pantallas pequeñas.
MEJORAS SUGERIDAS
/* Para los inputs y botón - solución limpia */ section form input, section form button { display: block; /* Cambiar a bloque */ width: 100%; /* Sigue ocupando todo */ margin: 5px 0; /* Solo margen vertical */ padding: 10px; } /* Para el menú - quitar espacios entre inline-block */ nav ul { font-size: 0; /* Elimina espacios entre inline-block */ } nav ul li { font-size: 16px; /* Restaura tamaño de fuente */ width: 25%; /* Ahora sí suma 100% exacto */ }
RESUMEN: CÓMO AFECTA LA JERARQUÍA PADRE-HIJO
| Padre | Propiedad | Efecto en hijos |
|---|---|---|
* | box-sizing: border-box | Todos heredan este modelo de caja |
<nav> | background: black | Fondo negro, los hijos lo ven |
<ul> | text-align: center | Los <li> y <a> heredan texto centrado |
<ul> | width: 50% | Los <li> miden 24% de ESTE ancho, no del nav |
<section> | width: 400px; padding:40px | Los hijos tienen 320px de ancho disponible |
<form> | (sin estilos) | Simplemente agrupa, no afecta visualmente |
En una frase: El <body> da la estructura básica, <nav> aporta el fondo negro, <ul> centra y limita el ancho, los <li> se colocan en horizontal, y <section> crea una caja con padding que obliga a inputs y botón a vivir dentro de un espacio limitado y coherente.
g
Consejos para recordar
No uses position:relative si no lo necesitas - Es como llevar un paraguas cuando no llueve
Para centrar, elige UN método:
margin:0 auto → para cajas
text-align:center → para texto
flexbox → para todo lo demás
No mezcles margin:auto con left:X% - Se pelean entre ellos
Borra el CSS que no uses - Si no hay tabla, no hay CSS de tabla
Comentarios
Publicar un comentario