css4-ejer-html


 .

📚 EXPLICACIÓN DETALLADA DE CÓMO FUNCIONA

Arquitectura visual de la página

text
┌─────────────────────────────────────────────────────────────────┐
│  NAV (barra negra - width:100%)                                 │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  UL (width:50%, margin:auto) → CENTRADO                   │  │
│  │  ┌─────────┬─────────┬─────────┬─────────┐               │  │
│  │  │   LI    │   LI    │   LI    │   LI    │               │  │
│  │  │ (24%)   │ (24%)   │ (24%)   │ (24%)   │               │  │
│  │  │ Registro│ Ingreso │ Usuarios│  Salir  │               │  │
│  │  └─────────┴─────────┴─────────┴─────────┘               │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  SECTION (width:400px, margin:auto, padding:40px) → CENTRADO    │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  H3: "REGISTRO DE USUARIO" (text-align:center)           │  │
│  │  ┌─────────────────────────────────────────────────────┐  │  │
│  │  │  FORM                                              │  │  │
│  │  │  ┌─────────────────────────────────────────────┐   │  │  │
│  │  │  │  INPUT: Usuario (width:100%, padding:10px)  │   │  │  │
│  │  │  ├─────────────────────────────────────────────┤   │  │  │
│  │  │  │  INPUT: Contraseña (width:100%, padding:10px)│   │  │  │
│  │  │  ├─────────────────────────────────────────────┤   │  │  │
│  │  │  │  INPUT: Email (width:100%, padding:10px)    │   │  │  │
│  │  │  ├─────────────────────────────────────────────┤   │  │  │
│  │  │  │  BUTTON: Enviar (width:100%, padding:10px)  │   │  │  │
│  │  │  └─────────────────────────────────────────────┘   │  │  │
│  │  └─────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

Conceptos clave explicados

1. display: inline-block en los <li>

css
nav ul li {
    display: inline-block;  /* Elementos en línea PERO con ancho/altura ajustable */
}

  • Sin esto: los <li> se apilarían verticalmente (uno debajo de otro)

  • Con esto: se alinean HORIZONTALMENTE (como palabras en una oración)

  • Diferencia con inline: permite aplicar width y height

2. width: 24% en cada <li>

css
nav ul li {
    width: 24%;  /* Cada menú ocupa 24% del UL padre */
}

  • 4 elementos × 24% = 96% del ancho total

  • El 4% restante es espacio entre elementos (por los márgenes automáticos)

3. margin: auto para centrar

css
nav ul {
    margin: auto;  /* Centra horizontalmente el UL dentro del NAV */
}
section {
    margin: auto;  /* Centra horizontalmente la sección dentro del BODY */
}

  • margin: auto a izquierda y derecha centra CUALQUIER bloque con ancho definido

4. width: 100% en inputs y botón

css
section form input, section form button {
    width: 100%;  /* Ocupan TODO el ancho del formulario */
}

  • Hace que todos los campos tengan el MISMO ancho (el del formulario)

  • El formulario a su vez tiene width: 400px

🧠 MÉTODO PARA APRENDER Y MEMORIZAR

Técnica 1: La "Regla de los 4 pasos" para menús horizontales

Memoriza este patrón para crear CUALQUIER menú horizontal:

PasoElementoPropiedadFrase para recordar
1<ul> padretext-align: center"El papá centra a los hijos"
2<li> hijosdisplay: inline-block"Los hijos se ponen en fila"
3<li> hijoswidth: 24%"Cada hijo ocupa su espacio"
4<li> hijoslist-style: none"Quitamos los puntos feos"

Técnica 2: Asociaciones visuales (mnemotecnia)

text
display: inline-block   → 🧍‍♂️🧍‍♀️ "Personas en fila (hombro con hombro)"
width: 50% + margin:auto → 🎯 "Diana en el centro (apunta al medio)"
line-height: 50px       → 📏 "Regla vertical (altura del renglón)"
list-style: none        → ❌ "Tacha los puntos de la lista"
padding: 40px           → 🛋️ "Espacio como un cojín alrededor"
width: 100% + padding   → 📦 "Caja que se estira sin romperse (gracias a border-box)"

Técnica 3: El método de "construcción por capas"

Memoriza este orden de construcción para formularios:

text
CAPA 1: Contenedor SECTION
section {
    margin: auto;     /* Centrar */
    width: 400px;     /* Ancho fijo */
    padding: 40px;    /* Espacio interno */
}

CAPA 2: Título H3
section h3 {
    text-align: center;  /* Centrar texto */
}

CAPA 3: Campos INPUT
section form input {
    display: inline-block;  /* Comportamiento en línea */
    width: 100%;           /* Ancho completo */
    padding: 10px;         /* Espacio interno */
    margin: 5px;           /* Separación entre campos */
}

CAPA 4: Botón (mismos estilos que inputs)
section form button {
    width: 100%;    /* Mismo ancho */
    padding: 10px;  /* Mismo padding */
    margin: 5px;    /* Mismo margen */
}

Técnica 4: Práctica de "5 minutos diarios" (plan de una semana)

DíaActividadTiempo
LunesEscribe el menú horizontal (UL + LI con inline-block)5 min
MartesEscribe el centrado (margin:auto + width definido)5 min
MiércolesEscribe el formulario (inputs + button con width:100%)5 min
JuevesEscribe TODO el CSS desde cero sin mirar10 min
ViernesModifica colores, anchos y paddings para experimentar15 min
SábadoCrea un menú de 5 elementos y un formulario de 4 campos20 min
DomingoExplica en voz alta cómo funciona cada propiedad15 min

Técnica 5: Preguntas de autoevaluación

Responde estas preguntas en voz alta:

  1. ¿Por qué usamos display: inline-block en los <li> en lugar de display: inline?

    • Respuesta: Porque inline-block permite aplicar width y height, mientras que inline no respeta estas propiedades

  2. ¿Qué hace margin: auto en un elemento con width definido?

    • Respuesta: Centra horizontalmente el elemento dentro de su contenedor padre

  3. ¿Para qué sirve box-sizing: border-box?

    • Respuesta: Para que el padding y border se incluyan DENTRO del ancho total, evitando que los elementos se desborden

  4. ¿Por qué el botón tiene width: 100% igual que los inputs?

    • Respuesta: Para mantener consistencia visual, todos los campos del formulario tienen el mismo ancho

  5. ¿Qué pasa si quitamos text-align: center del <ul>?

    • Respuesta: Los <li> se alinearían a la izquierda (no estarían centrados)

Técnica 6: El "esqueleto mental" que debes memorizar

css
/* PATRÓN PARA MENÚ HORIZONTAL (MEMORIZA ESTO) */
nav ul {
    text-align: center;     /* 1. Centrar hijos */
}
nav ul li {
    display: inline-block;  /* 2. Poner en fila */
    width: 24%;            /* 3. Distribuir ancho */
    list-style: none;      /* 4. Quitar puntos */
}

/* PATRÓN PARA FORMULARIO CENTRADO (MEMORIZA ESTO) */
section {
    margin: auto;     /* 1. Centrar contenedor */
    width: 400px;     /* 2. Ancho fijo */
    padding: 20px;    /* 3. Espacio interno */
}
input, button {
    width: 100%;      /* 4. Mismo ancho */
    padding: 10px;    /* 5. Mismo padding */
    margin: 5px;      /* 6. Separación */
}

Técnica 7: La "prueba del espejo"

Cada noche antes de dormir, recita en voz alta mirándote al espejo:

text
"Para hacer un menú horizontal:
Primero, display: inline-block en los LI
Segundo, text-align: center en el UL padre
Tercero, width: 24% para distribuir
Cuarto, list-style: none para quitar los puntos"

"Para centrar un formulario:
Primero, margin: auto
Segundo, width definido
Tercero, y los hijos con width: 100%"

Técnica 8: Las 10 líneas de CSS que debes saber de memoria

css
/* REPITE ESTAS 10 LÍNEAS TODOS LOS DÍAS */

/* 1 - Reset universal */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 2 - Menú horizontal (padre) */
nav ul { text-align: center; }

/* 3 - Menú horizontal (hijos) */
nav ul li { display: inline-block; width: 24%; list-style: none; }

/* 4 - Enlaces del menú */
nav ul li a { color: white; text-decoration: none; }

/* 5 - Contenedor centrado */
section { margin: auto; width: 400px; padding: 20px; }

/* 6 - Título centrado */
section h3 { text-align: center; }

/* 7 - Campos de formulario */
section form input { width: 100%; padding: 10px; margin: 5px; }

/* 8 - Botón (mismos estilos) */
section form button { width: 100%; padding: 10px; margin: 5px; }

🎯 Resumen final: Lo que DEBES memorizar

Propiedades esenciales para menús:

css
display: inline-block;  /* Pone elementos en fila */
text-align: center;     /* Centra elementos hijos */
list-style: none;       /* Quita puntos de lista */

Propiedades esenciales para centrar:

css
margin: auto;    /* Centra bloques con ancho definido */
width: 400px;    /* Ancho necesario para que margin:auto funcione */

Propiedades esenciales para formularios:

css
width: 100%;     /* Ocupa todo el ancho del padre */
padding: 10px;   /* Espacio interno consistente */
margin: 5px;     /* Separación entre campos */

Fórmula mágica para recordar:

"Para centrar cualquier cosa: dale un ancho y margin auto"
"Para menús horizontales: inline-block al hijo, text-align:center al padre"
"Para formularios limpios: mismo ancho y padding a todos los campos"

Repite estas 3 frases 10 veces al día durante una semana. No las olvidarás nunca.

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> <!-- Define la codificación UTF-8 para soportar caracteres especiales (ñ, tildes) -->
    <title>Template</title> <!-- Título que aparece en la pestaña del navegador -->
    <style>
        /* ============================================================
           RESET UNIVERSAL - Elimina márgenes y paddings por defecto
           ============================================================ */
        * {
            margin: 0;                      /* Elimina el margen EXTERNO predeterminado de TODOS los elementos HTML */
            padding: 0;                     /* Elimina el padding INTERNO predeterminado de TODOS los elementos HTML */
            box-sizing: border-box;         /* Hace que el ancho/alto TOTAL incluyan padding y border, no solo el contenido */
            /* ¡Muy útil para maquetación! Ejemplo: un div con width:100px + padding:10px tendrá ancho TOTAL = 100px (no 120px) */
        }

        /* ============================================================
           BARRA DE NAVEGACIÓN (NAV)
           ============================================================ */
        nav {
            width: 100%;                    /* Ancho completo de la página (ocupa de borde izquierdo a derecho) */
            height: auto;                   /* Altura AUTOMÁTICA (se ajusta al contenido interno, en este caso los 50px de los <li>) */
            background: black;              /* Fondo de color negro para toda la barra de navegación */
        }

        /* ============================================================
           LISTA NO ORDENADA (UL) dentro del NAV
           ============================================================ */
        nav ul {
            margin: auto;                   /* Margen automático a izquierda y derecha para CENTRAR horizontalmente */
            width: 50%;                     /* La lista ocupa el 50% del ancho disponible (la mitad de la pantalla) */
            text-align: center;             /* Centra el texto de los elementos de la lista horizontalmente */
        }

        /* ============================================================
           ELEMENTOS DE LISTA (LI) - Los 4 botones del menú
           ============================================================ */
        nav ul li {
            display: inline-block;          /* Muestra los <li> en línea (horizontal) pero permite aplicar ancho/altura */
            width: 24%;                     /* Cada <li> ocupa el 24% del ancho del <ul> (4 x 24% = 96%, deja 4% para márgenes) */
            line-height: 50px;              /* Altura de línea de 50px (centra verticalmente el texto dentro del <li>) */
            list-style: none;               /* Elimina el punto/bullet predeterminado de los elementos de lista */
        }

        /* ============================================================
           ENLACES (A) dentro de los elementos de lista
           ============================================================ */
        nav ul li a {
            color: white;                   /* Color blanco para el texto del enlace (contrasta con fondo negro) */
            text-decoration: none;          /* Elimina el subrayado predeterminado que los navegadores ponen a los enlaces */
        }

        /* ============================================================
           SECCIÓN PRINCIPAL (formulario de registro)
           ============================================================ */
        section {
            margin: auto;                   /* Margen automático a izquierda y derecha para CENTRAR horizontalmente */
            width: 400px;                   /* Ancho fijo de 400px para la sección (formulario de tamaño mediano) */
            padding: 40px;                  /* Espacio interno de 40px alrededor del contenido (separación del borde) */
        }

        /* ============================================================
           TÍTULO H3 dentro de la sección
           ============================================================ */
        section h3 {
            text-align: center;             /* Centra horizontalmente el texto del título */
            margin: auto;                   /* Margen automático (centra el bloque, pero en inline-block no es necesario) */
        }

        /* ============================================================
           CAMPOS DE INPUT del formulario (texto, password, email)
           ============================================================ */
        section form input {
            display: inline-block;          /* Muestra los inputs en línea (por defecto ya lo son, pero se especifica) */
            padding: 10px;                  /* Espacio interno de 10px alrededor del texto dentro del input */
            width: 100%;                    /* Ancho completo del contenedor padre (el formulario) */
            margin: 5px;                    /* Margen externo de 5px alrededor de cada input (separación entre ellos) */
        }

        /* ============================================================
           BOTÓN DEL FORMULARIO (Enviar Formulario)
           ============================================================ */
        section form button {
            width: 100%;                    /* Mismo ancho que los inputs (100% del contenedor para mantener consistencia) */
            padding: 10px;                  /* Mismo padding que los inputs (10px para altura uniforme) */
            margin: 5px;                    /* Mismo margen que los inputs (5px para espaciado consistente) */
        }

        /* ============================================================
           MEJORAS SUGERIDAS (no incluidas en el código original)
           
           Para mejorar la experiencia de usuario, se podrían agregar:
           
           1. Efecto hover en los enlaces del menú:
              nav ul li a:hover { background-color: #333; padding: 10px; border-radius: 5px; }
           
           2. Efecto hover en el botón:
              section form button:hover { background-color: #007bff; color: white; cursor: pointer; }
           
           3. Bordes redondeados en inputs y botón:
              section form input, section form button { border-radius: 5px; border: 1px solid #ccc; }
           
           4. Foco en inputs (cuando el usuario hace clic):
              section form input:focus { outline: 2px solid #007bff; border-color: transparent; }
        ============================================================ -->
    </style>
</head>

<body>
    <!-- BARRA DE NAVEGACIÓN (menú principal) -->
    <nav>
        <ul>
            <li><a href="index.php">Registro</a></li>      <!-- Enlace a la página de registro -->
            <li><a href="index.php?action=ingresar">Ingreso</a></li>  <!-- Enlace al formulario de ingreso -->
            <li><a href="index.php?action=usuarios">Usuarios</a></li> <!-- Enlace a lista de usuarios -->
            <li><a href="index.php?action=salir">Salir</a></li>       <!-- Enlace para cerrar sesión -->
        </ul>
    </nav>

    <!-- SECCIÓN PRINCIPAL (formulario de registro de usuario) -->
    <section>
        <h3>REGISTRO DE USUARIO</h3> <!-- Título del formulario -->
        <form method="post" action=""> <!-- Formulario que envía datos por POST a la misma página -->
            <input type="text" placeholder="Usuario" name="usuario" required>      <!-- Campo para nombre de usuario -->
            <input type="password" placeholder="Contraseña" name="password" required> <!-- Campo para contraseña -->
            <input type="email" placeholder="Email" name="email" required>        <!-- Campo para correo electrónico -->
            <button type="submit">Enviar Formulario</button> <!-- Botón que envía el formulario -->
        </form>
    </section>
</body>

</html>


Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

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...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"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).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más