html.html--css.html




 PÁGINA 1: Inicio (html.html)

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">                               <!-- Define codificación UTF-8 para soportar caracteres especiales como ñ o tildes -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace la página responsive en móviles: escala 1:1 -->
    <title>Inicio · Tutoriales</title>                   <!-- Título que aparece en la pestaña del navegador -->
    
    <style>
        /* ============================================================ */
        /* DOCUMENTACIÓN COMPLETA - CADA LÍNEA DE CSS EXPLICADA        */
        /* ============================================================ */
        
        /* ---------- RESET UNIVERSAL ---------- */
        * {
            margin: 0;                          /* Elimina el margen exterior por defecto de TODOS los elementos */
            padding: 0;                         /* Elimina el relleno interior por defecto de TODOS los elementos */
            box-sizing: border-box;             /* Hace que el ancho/alto incluyan padding y borde, no solo el contenido */
                                                /* Ej: un div con width:100px y padding:10px sigue midiendo 100px totales */
        }

        /* ---------- CUERPO PRINCIPAL ---------- */
        body {
            font-family: Arial, Helvetica, sans-serif; /* Fuente genérica limpia y legible en todos los sistemas */
            height: 100vh;                      /* Altura total = 100% del viewport (ventana del navegador) */
            display: flex;                      /* Activa Flexbox para organizar los elementos hijos */
            flex-direction: column;             /* Los hijos se apilan VERTICALMENTE (uno abajo del otro) */
        }

        /* ===== MENÚ SUPERIOR (barra de navegación horizontal) ===== */
        .menu-superior {
            background-color: #333;             /* Fondo gris oscuro para destacar el menú */
        }
        
        .menu-superior a {
            color: white;                       /* Texto blanco para contraste sobre fondo oscuro */
            text-decoration: none;              /* Elimina el subrayado predeterminado de los enlaces */
            padding: 12px 15px;                 /* Espaciado interno: 12px arriba/abajo, 15px izquierda/derecha */
            display: inline-block;              /* Permite aplicar padding/margin pero mantiene disposición horizontal */
        }
        
        .menu-superior a:hover {
            background-color: #555;             /* Cambia a gris más claro al pasar el mouse (feedback visual) */
        }
        
        .menu-superior a.activo {
            background-color: #007bff;          /* Resalta la página actual con fondo azul */
        }

        /* ===== CONTENEDOR CENTRADO (vertical y horizontal) ===== */
        .contenedor-centrado {
            flex: 1;                            /* Ocupa TODO el espacio restante después del menú superior */
            display: flex;                      /* Activa Flexbox dentro de este contenedor */
            justify-content: center;            /* Centra el contenido horizontalmente (izquierda-derecha) */
            align-items: center;                /* Centra el contenido verticalmente (arriba-abajo) */
            text-align: center;                 /* Asegura que el texto dentro también esté centrado */
        }
        
        /* Contenido interno con ancho limitado */
        .contenido {
            max-width: 600px;                   /* Ancho máximo para no estirarse demasiado en pantallas grandes */
            padding: 20px;                      /* Espacio interno alrededor del texto */
        }
        
        /* Estilo del título principal */
        h1 {
            margin-bottom: 20px;                /* Separación inferior respecto al párrafo siguiente */
        }
        
        /* Estilo del párrafo */
        p {
            font-size: 18px;                    /* Tamaño de letra cómodo para lectura */
        }
        /* ============================================================ */
        /* RESUMEN DEL FUNCIONAMIENTO:                                 */
        /* - body con display:flex y flex-direction:column → estructura vertical */
        /* - .menu-superior → barra fija arriba sin scroll             */
        /* - .contenedor-centrado con flex:1 → ocupa todo el espacio restante */
        /* - justify-content:center + align-items:center → centrado perfecto */
        /* ============================================================ */
    </style>
</head>
<body>

    <!-- ===== BARRA DE NAVEGACIÓN SUPERIOR ===== -->
    <!-- Esta barra aparece en todas las páginas del sitio para navegar entre tutoriales -->
    <div class="menu-superior">
        <a href="html.html" class="activo">Inicio</a>      <!-- Enlace a página de inicio (página actual, por eso class="activo") -->
        <a href="js.html">JavaScript</a>                   <!-- Enlace a tutorial de JavaScript -->
        <a href="css.html">CSS</a>                         <!-- Enlace a tutorial de CSS -->
    </div>

    <!-- ===== CONTENIDO CENTRADO ===== -->
    <!-- Este bloque ocupa todo el espacio disponible y centra su contenido -->
    <div class="contenedor-centrado">
        <div class="contenido">
            <h1>Bienvenido a los Tutoriales</h1>
            <p>Selecciona un tema en el menú superior para comenzar.</p>
        </div>
    </div>

    <!-- NOTA: Esta página es la pantalla de inicio/presentación del sitio web -->
</body>
</html>

📄 PÁGINA 2: Tutorial de CSS (css.html)

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">                               <!-- Codificación UTF-8 para caracteres especiales -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design básico -->
    <title>CSS · Tutorial</title>                        <!-- Título de la página (aparece en pestaña) -->
    
    <style>
        /* ============================================================ */
        /* DOCUMENTACIÓN COMPLETA - CADA LÍNEA DE CSS EXPLICADA        */
        /* ============================================================ */
        
        /* ---------- RESET UNIVERSAL ---------- */
        * {
            margin: 0;                          /* Elimina márgenes por defecto de todos los elementos */
            padding: 0;                         /* Elimina paddings por defecto de todos los elementos */
            box-sizing: border-box;             /* El width/height incluye padding y borde en el cálculo */
        }

        /* ---------- CUERPO PRINCIPAL ---------- */
        body {
            font-family: Arial, Helvetica, sans-serif; /* Fuente limpia y universal */
            height: 100vh;                      /* Altura total = 100% del viewport */
            display: flex;                      /* Activa Flexbox en el body */
            flex-direction: column;             /* Apila elementos verticalmente (menú arriba, luego el resto) */
        }

        /* ===== MENÚ SUPERIOR ===== */
        .menu-superior {
            background-color: #333;             /* Fondo oscuro para el menú principal */
        }
        .menu-superior a {
            color: white;                       /* Texto blanco para contraste */
            text-decoration: none;              /* Sin subrayado en los enlaces */
            padding: 12px 15px;                 /* Espaciado interno cómodo para hacer clic */
            display: inline-block;              /* Enlaces en línea horizontal pero con padding respetado */
        }
        .menu-superior a:hover {
            background-color: #555;             /* Oscurece el fondo al pasar el mouse (efecto hover) */
        }
        .menu-superior a.activo {
            background-color: #007bff;          /* Fondo azul para indicar en qué página estamos */
        }

        /* ===== CONTENEDOR FLEX PRINCIPAL (menú lateral + contenido) ===== */
        .contenedor-flex {
            display: flex;                      /* Divide en dos columnas: menú lateral | contenido */
            flex: 1;                            /* Ocupa todo el espacio restante después del menú superior */
            min-height: 0;                      /* CRUCIAL: permite que el contenido con overflow funcione correctamente */
                                                /* Sin esto, el contenido grande rompe el diseño Flex */
        }

        /* ===== MENÚ LATERAL ===== */
        .menu-lateral {
            width: 200px;                       /* Ancho fijo para el menú de navegación lateral */
            background-color: #f5f5f5;          /* Fondo gris muy claro para diferenciar del contenido */
            padding: 15px;                      /* Espacio interno alrededor de los enlaces */
            overflow-y: auto;                   /* Scroll vertical propio si hay muchos temas (independiente) */
            border-right: 1px solid #ddd;       /* Línea divisoria sutil entre menú y contenido */
        }
        
        .menu-lateral h3 {
            margin-bottom: 15px;                /* Separación entre el título "Temas de CSS" y los enlaces */
            color: #007bff;                     /* Color azul para destacar el título del menú */
        }
        
        .menu-lateral a {
            display: block;                     /* Cada enlace ocupa toda la línea (apilados verticalmente) */
            padding: 8px 0;                     /* Espaciado vertical: 8px arriba/abajo, 0 izquierda/derecha */
            color: #333;                        /* Color gris oscuro para el texto */
            text-decoration: none;              /* Elimina subrayado de los enlaces */
        }
        
        .menu-lateral a:hover {
            color: #007bff;                     /* Cambia a azul al pasar el mouse (feedback visual) */
        }

        /* ===== ZONA DE CONTENIDO (donde ocurre el scroll suave) ===== */
        .contenedor-centrado {
            flex: 1;                            /* Ocupa todo el espacio restante a la derecha del menú lateral */
            padding: 20px;                      /* Espacio interno alrededor del contenido */
            overflow-y: auto;                   /* Scroll vertical INTERNO (el contenido se desplaza aquí) */
            scroll-behavior: smooth;            /* ¡CLAVE! Hace que la navegación por anclas sea suave y animada */
        }
        
        /* Contenido interno con ancho limitado para mejor legibilidad */
        .contenido {
            max-width: 800px;                   /* Ancho máximo para que las líneas de texto no sean demasiado largas */
            margin: 0 auto;                     /* Centra el contenido horizontalmente dentro del contenedor */
        }

        /* ===== ESTILOS TIPOGRÁFICOS PARA EL CONTENIDO ===== */
        h1 {
            margin-bottom: 20px;                /* Separación debajo del título principal */
        }
        
        h2 {
            margin-top: 30px;                   /* Espacio superior grande para separar secciones */
            margin-bottom: 10px;                /* Espacio inferior antes del contenido */
            border-bottom: 2px solid #007bff;   /* Línea azul debajo de cada título de sección */
            padding-bottom: 5px;                /* Espacio entre el texto y la línea inferior */
        }
        
        /* Bloques de código preformateados */
        pre {
            background-color: #f4f4f4;          /* Fondo gris claro para destacar el código */
            padding: 10px;                      /* Espacio interno alrededor del código */
            overflow-x: auto;                   /* Scroll horizontal si el código es muy ancho */
            margin: 15px 0;                     /* Separación vertical con otros elementos */
            font-family: monospace;             /* Fuente monoespaciada para código */
        }
        
        /* Código en línea (dentro de párrafos) */
        code {
            background-color: #f4f4f4;          /* Mismo fondo gris claro que pre */
            padding: 2px 5px;                   /* Relleno pequeño alrededor del código */
        }
        /* ============================================================ */
        /* RESUMEN DEL FUNCIONAMIENTO:                                 */
        /* 1. Menú superior fijo arriba (navegación entre páginas)     */
        /* 2. Menú lateral izquierdo con anclas (#ids)                 */
        /* 3. Zona de contenido con scroll-behavior: smooth            */
        /* 4. Al hacer clic en enlace del menú lateral:                */
        /*    - El navegador busca el elemento con el ID correspondiente */
        /*    - El scroll ocurre DENTRO de .contenedor-centrado        */
        /*    - El menú lateral NO se mueve (está fuera del scroll)    */
        /* ============================================================ */
    </style>
</head>
<body>

    <!-- ===== MENÚ SUPERIOR (navegación entre páginas) ===== -->
    <div class="menu-superior">
        <a href="html.html">Inicio</a>                  <!-- Enlace a la página de inicio -->
        <a href="js.html">JavaScript</a>                <!-- Enlace a tutorial de JavaScript -->
        <a href="css.html" class="activo">CSS</a>       <!-- Página actual, resaltada con class="activo" -->
    </div>

    <!-- ===== CONTENEDOR FLEX: menú lateral + contenido ===== -->
    <div class="contenedor-flex">
        
        <!-- MENÚ LATERAL: contiene los enlaces de navegación interna (anclas) -->
        <div class="menu-lateral">
            <h3>Temas de CSS</h3>
            <!-- Cada enlace apunta a un ID dentro del contenido usando href="#nombre" -->
            <a href="#css-intro">🎨 Introducción</a>
            <a href="#css-selectores">🔍 Selectores</a>
            <a href="#css-colores">🌈 Colores</a>
            <a href="#css-modelo-caja">📦 Modelo de Caja</a>
            <a href="#css-flexbox">🧩 Flexbox</a>
            <a href="#css-grid">📐 Grid</a>
        </div>

        <!-- ZONA DE CONTENIDO: aquí se muestra el texto del tutorial -->
        <!-- El scroll ocurre DENTRO de este contenedor gracias a overflow-y:auto -->
        <!-- La navegación por anclas es suave gracias a scroll-behavior:smooth -->
        <div class="contenedor-centrado">
            <div class="contenido">
                <h1>Tutorial de CSS</h1>

                <!-- Cada sección tiene un ID único que coincide con los href del menú lateral -->
                <h2 id="css-intro">Introducción a CSS</h2>
                <p>CSS (Cascading Style Sheets) es el lenguaje que usamos para dar estilo a las páginas web.</p>
                <p>Define colores, fuentes, disposición y diseño responsive.</p>

                <h2 id="css-selectores">Selectores CSS</h2>
                <pre>/* Selector de elemento */
p { color: blue; }

/* Selector de clase */
.mi-clase { font-weight: bold; }

/* Selector de ID */
#encabezado { background: #eee; }</pre>

                <h2 id="css-colores">Colores y Fondos</h2>
                <pre>body {
    background-color: #f0f0f0;
    color: rgb(50, 50, 80);
}</pre>

                <h2 id="css-modelo-caja">Modelo de Caja</h2>
                <pre>.caja {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 15px;
}</pre>

                <h2 id="css-flexbox">Flexbox</h2>
                <pre>.contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}</pre>

                <h2 id="css-grid">CSS Grid</h2>
                <pre>.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}</pre>
            </div>
        </div>
    </div>

    <!-- NOTA TÉCNICA: 
         - No se necesita JavaScript para la navegación por anclas
         - El navegador maneja automáticamente el scroll hacia los IDs
         - scroll-behavior: smooth añade la animación
         - El menú lateral permanece estático porque NO está dentro del contenedor con overflow
    -->
</body>
</html>

📖 EXPLICACIÓN DETALLADA DE CÓMO FUNCIONA

Arquitectura de las dos páginas

text
PÁGINA DE INICIO (html.html)          PÁGINA DE CSS (css.html)
┌─────────────────────────┐          ┌─────────────────────────┐
│   MENÚ SUPERIOR         │          │   MENÚ SUPERIOR         │
├─────────────────────────┤          ├─────────────────────────┤
│                         │          │ ┌──────┬──────────────┐ │
│    CONTENIDO CENTRADO   │          │ │MENÚ  │  CONTENIDO    │ │
│                         │          │ │LATERAL│  CON SCROLL   │ │
│   "Bienvenido..."       │          │ │      │               │ │
│                         │          │ │• Intro│  Tutorial     │ │
└─────────────────────────┘          │ • Sel.│  de CSS        │ │
                                      └──────┴──────────────┘ ┘

Comparativa de las dos páginas

CaracterísticaPágina Inicio (html.html)Página CSS (css.html)
LayoutCentrado simpleDos columnas (menú lateral + contenido)
NavegaciónSolo menú superiorMenú superior + menú lateral
ScrollNo hay scroll (contenido pequeño)Scroll interno en zona de contenido
PropósitoPantalla de bienvenidaTutorial extenso con varias secciones

Mecanismo de navegación por anclas (en css.html)

javascript
// No hay código JavaScript, esto lo hace el navegador automáticamente:

// 1. Usuario hace clic en: <a href="#css-intro">
// 2. Navegador busca: <h2 id="css-intro">
// 3. Navegador desplaza el scroll hasta ese elemento
// 4. scroll-behavior: smooth → animación suave

🧠 CÓMO APRENDER Y MEMORIZAR ESTA TÉCNICA

1. Divide y vencerás: 3 capas de conocimiento

🟢 Capa 1: Layout básico con Flexbox

css
/* Fórmula para body con menú arriba y contenido abajo */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.menu-superior { /* altura automática */ }
.contenedor-centrado { flex: 1; }  /* ocupa el resto */

🟡 Capa 2: Layout de dos columnas

css
/* Fórmula para menú lateral + contenido */
.contenedor-flex {
    display: flex;
    flex: 1;
    min-height: 0;  /* ¡NUNCA OLVIDES ESTO! */
}
.menu-lateral { width: 200px; }
.contenedor-centrado { flex: 1; overflow-y: auto; }

🔴 Capa 3: Navegación por anclas

css
/* En el CSS */
.contenedor-centrado {
    overflow-y: auto;
    scroll-behavior: smooth;  /* ¡la magia! */
}

/* En el HTML */
<a href="#mi-seccion">Ir</a>
<h2 id="mi-seccion">Sección</h2>

2. Reglas mnemotécnicas (acrónimos fáciles)

Para la página de inicio: "V-F-C"

Vertical (flex-direction: column)
Flex: 1 (ocupa espacio restante)
Centrado (justify-content + align-items: center)

"V-F-C: Voy Flex Centrado"

Para la página de CSS: "D-M-S"

Dos columnas (display: flex en .contenedor-flex)
Min-height: 0 (permite scroll interno)
Smooth scroll (scroll-behavior: smooth)

"D-M-S: Dos Menús con Smooth"

Para las anclas: "I-A"

ID en el destino
Ancla en el origen (href="#mismo-id")

"I-A: ID y Ancla van juntos"

3. Ejercicios prácticos para memorizar

📝 Ejercicio 1 (5 minutos) - Copia selectiva

Escribe SOLO las partes clave de cada página:

html
<!-- Estructura mínima de inicio -->
<body style="display:flex; flex-direction:column; height:100vh">
    <div style="background:#333">Menú</div>
    <div style="flex:1; display:flex; justify-content:center; align-items:center">
        Contenido centrado
    </div>
</body>
html
<!-- Estructura mínima de CSS tutorial -->
<body style="display:flex; flex-direction:column; height:100vh">
    <div>Menú superior</div>
    <div style="display:flex; flex:1; min-height:0">
        <div style="width:200px">Menú lateral</div>
        <div style="flex:1; overflow-y:auto; scroll-behavior:smooth">
            <h2 id="sec1">Sección</h2>
        </div>
    </div>
</body>

🎯 Ejercicio 2 (10 minutos) - Construye de memoria

Sin mirar el código original, crea:

  1. Una página de inicio con menú superior y texto centrado

  2. Una página de tutorial con menú lateral y 3 secciones

  3. Conecta ambas páginas con enlaces funcionales

🗣️ Ejercicio 3 (5 minutos) - Explicación en voz alta

Grābate explicando (como si enseñaras a alguien):

  • "El body tiene height: 100vh y display: flex para ocupar toda la pantalla"

  • "flex-direction: column apila los elementos verticalmente"

  • "flex: 1 en el contenedor centrado hace que ocupe el espacio restante"

  • "min-height: 0 es necesario para que el scroll funcione dentro de Flexbox"

4. Analogías para recordar siempre

Analogía de la página de inicio

Imagina una pantalla de cine en blanco (body con 100vh).
El menú superior es como el marco superior de la pantalla.
El texto centrado es como los títulos de crédito que aparecen justo en el medio.

Analogía de la página de CSS

Imagina un libro de recetas abierto:

  • La página izquierda (menú lateral) tiene el índice de recetas

  • La página derecha (contenedor-centrado) tiene la receta completa

  • Cuando tocas un nombre en el índice, la página derecha se desliza suavemente a esa receta

  • El índice nunca se mueve (está pegado)

5. Errores comunes que debes memorizar para evitarlos

❌ Error✅ Solución correcta
Olvidar min-height: 0 en el padre flexSiemponerlo en .contenedor-flex { min-height: 0; }
Poner scroll-behavior: smooth en el bodyPonerlo en el contenedor con overflow-y: auto
Usar id duplicadosCada id debe ser ÚNICO en la página
Olvidar box-sizing: border-boxPonerlo en el reset universal *
Poner height: 100% en lugar de 100vhUsar 100vh para altura total de pantalla

6. Checklist de verificación rápida

Para página de inicio:

  • ¿body tiene height: 100vh y display: flex?

  • ¿flex-direction: column está presente?

  • ¿El contenedor centrado tiene flex: 1?

  • ¿Tiene justify-content: center y align-items: center?

Para página de tutorial:

  • ¿.contenedor-flex tiene display: flex y min-height: 0?

  • ¿.contenedor-centrado tiene overflow-y: auto y scroll-behavior: smooth?

  • ¿Cada <h2> tiene un id único?

  • ¿Cada <a> del menú lateral tiene href="#mismo-id"?

7. Resumen final en 3 líneas (para memorizar)

css
/* INICIO: cuerpo vertical + centrado */
body { display: flex; flex-direction: column; height: 100vh; }
.contenedor-centrado { flex: 1; display: flex; justify-content: center; align-items: center; }

/* TUTORIAL: dos columnas + scroll suave */
.contenedor-flex { display: flex; flex: 1; min-height: 0; }
.contenedor-centrado { flex: 1; overflow-y: auto; scroll-behavior: smooth; }

🎓 Plan de estudio para dominarlo en 3 días

DíaActividadTiempo
Día 1Copia el código de ambas páginas, modifica colores y texto20 min
Día 2Reconstruye de memoria sin mirar, luego compáralo15 min
Día 3Crea una página nueva (ej: tutorial de HTML) con la misma estructura20 min

¡La clave es la práctica diaria y la explicación en voz alta!


 





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