Servicio Nacional de Aprendizaje · SENA

# Guía de Aprendizaje: Desarrollo de Interfaces Web con HTML y CSS

Material de apoyo para la formación presencial. Contiene fundamentos teóricos, ejemplos de código listos para probar, actividades prácticas y criterios de evaluación.

Ficha3516362
ModalidadPresencial / Guía web
Duración estimada40 horas
Dirigido aAprendices en formación

## 1. Identificación de la guía

### Competencia

Construir interfaces web funcionales y accesibles aplicando los lenguajes de marcado y de estilos según los estándares del World Wide Web Consortium (W3C) y los requerimientos del cliente.

### Resultados de aprendizaje

1. Estructurar documentos web utilizando etiquetas HTML5 semánticas y correctamente anidadas.
2. Aplicar hojas de estilo en cascada para definir la presentación visual de una interfaz.
3. Implementar maquetaciones flexibles y adaptables a distintos tamaños de pantalla.
4. Validar el código producido frente a los estándares del W3C y criterios básicos de accesibilidad.

### Criterios de evaluación

N.º | Criterio | Evidencia
--- | --- | ---
CE1 | Elabora la estructura de una página web empleando etiquetas semánticas de HTML5. | Producto
CE2 | Diferencia y aplica los tres métodos de vinculación de CSS, justificando el uso de la hoja externa. | Conocimiento
CE3 | Aplica selectores CSS resolviendo correctamente conflictos de especificidad. | Desempeño
CE4 | Maqueta una interfaz con Flexbox y/o Grid respetando el diseño propuesto. | Producto
CE5 | Adapta la interfaz a resoluciones de móvil, tableta y escritorio mediante media queries. | Producto
CE6 | Valida el documento en el validador del W3C sin errores de sintaxis. | Desempeño

### Ambiente y materiales

- Ambiente: aula de sistemas con equipos de cómputo y acceso a internet.
- Software: editor de código (Visual Studio Code recomendado), navegador web actualizado (Chrome, Firefox o Edge).
- Extensiones sugeridas: Live Server, Prettier, HTML CSS Support.

## 2. Introducción y contexto

Toda página que visitas en internet está construida sobre tres tecnologías base. Comprender qué hace cada una evita el error más común del aprendiz principiante: mezclar responsabilidades.

Tecnología | Responsabilidad | Analogía
--- | --- | ---
HTML | Estructura y contenido | Los ladrillos y muros de una casa
CSS | Presentación y diseño visual | La pintura, los acabados y la decoración
JavaScript | Comportamiento e interactividad | La instalación eléctrica y los electrodomésticos

### ¿Cómo llega una página a tu pantalla?

1. El usuario escribe una dirección en el navegador (cliente).
2. El navegador envía una petición HTTP al servidor donde vive el sitio.
3. El servidor responde con los archivos: HTML, CSS, imágenes, scripts.
4. El navegador interpreta el HTML, construye el árbol DOM, aplica el CSS y renderiza la página.

Concepto clave: el DOM El Document Object Model es la representación en memoria que el navegador crea a partir de tu HTML. Es un árbol de nodos; cada etiqueta es un nodo. Cuando escribes HTML mal anidado, el navegador intenta corregirlo y el árbol resultante puede no ser el que esperabas.

## 3. ¿Qué es HTML?

HTML (HyperText Markup Language) es un lenguaje de marcado, no de programación. No tiene variables, condicionales ni ciclos: su única función es describir el significado y la estructura del contenido mediante etiquetas.

### Anatomía de una etiqueta

Estructura de un elemento HTML

    <p class="destacado">Texto del párrafo</p>
     │  │       │              │            │
     │  │       │              │            └─ Etiqueta de cierre
     │  │       │              └─ Contenido
     │  │       └─ Valor del atributo
     │  └─ Nombre del atributo
     └─ Etiqueta de apertura (nombre del elemento)

### Elementos vacíos

Algunos elementos no tienen contenido y por tanto no llevan etiqueta de cierre:

    <br>      <!-- salto de línea -->
    <hr>      <!-- línea divisoria -->
    <img src="foto.jpg" alt="Descripción">
    <input type="text">
    <meta charset="UTF-8">

### Reglas de anidamiento

Los elementos se cierran en orden inverso al que se abrieron. Piensa en cajas dentro de cajas.

    <!-- CORRECTO -->
    <p>Un texto <strong>muy importante</strong> aquí.</p>

    <!-- INCORRECTO: las etiquetas se cruzan -->
    <p>Un texto <strong>muy importante</p></strong>

Error frecuente Olvidar cerrar una etiqueta contenedora (`<div>`, `<section>`) hace que todo el contenido posterior quede "dentro" de ella y los estilos se apliquen donde no corresponde. Indenta tu código: si una etiqueta de cierre no queda alineada con su apertura, hay un error.

### Comentarios

    <!-- Esto es un comentario. No se muestra en el navegador,
         pero SÍ es visible en el código fuente. -->

## 4. Estructura de un documento HTML5

Todo documento HTML parte de la misma plantilla base. Memorízala: la escribirás cientos de veces.

index.html — plantilla base

    <!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Breve descripción de la página">
      <title>Título que aparece en la pestaña</title>
      <link rel="stylesheet" href="css/estilos.css">
    </head>
    <body>

      <h1>Contenido visible de la página</h1>
      <p>Aquí va todo lo que el usuario ve.</p>

      <script src="js/main.js"></script>
    </body>
    </html>

### Explicación línea por línea

Elemento | Para qué sirve
--- | ---
`<!DOCTYPE html>` | Declara que el documento usa HTML5. Sin esto el navegador entra en "modo peculiar" y el CSS se comporta de forma impredecible.
`<html lang="es">` | Elemento raíz. El atributo `lang` ayuda a lectores de pantalla y traductores automáticos.
`<head>` | Metadatos: información sobre el documento que el usuario no ve directamente.
`<meta charset="UTF-8">` | Codificación de caracteres. Sin esto las tildes y la ñ se ven como símbolos raros.
`<meta name="viewport">` | Indispensable para el diseño responsive. Le dice al móvil que use su ancho real.
`<title>` | Texto de la pestaña y del resultado en buscadores. Obligatorio.
`<link rel="stylesheet">` | Vincula la hoja de estilos externa.
`<body>` | Todo el contenido visible.
`<script>` | Se coloca antes de `</body>` para que el HTML cargue primero.

Atajo en VS Code Escribe `!` y presiona `Tab` dentro de un archivo `.html`: Emmet genera la plantilla base completa automáticamente.

### Organización de archivos del proyecto

    mi-proyecto/
    ├── index.html
    ├── css/
    │   └── estilos.css
    ├── js/
    │   └── main.js
    └── img/
        ├── logo.png
        └── banner.jpg

Usa siempre nombres en minúscula, sin espacios ni tildes. Separa palabras con guion: `sobre-nosotros.html`, no `Sobre Nosotros.html`.

## 5. Texto, títulos y listas

### Jerarquía de títulos

Existen seis niveles, de `<h1>` a `<h6>`. No se eligen por tamaño sino por jerarquía de contenido: el tamaño se ajusta después con CSS.

    <h1>Título principal — uno solo por página</h1>
      <h2>Sección</h2>
        <h3>Subsección</h3>
          <h4>Detalle</h4>

No saltes niveles Pasar de `<h1>` a `<h4>` rompe la navegación por encabezados que usan los lectores de pantalla y perjudica el posicionamiento en buscadores.

### Párrafos y formato de texto

    <p>Un párrafo normal de texto.</p>

    <p>Texto con <strong>importancia semántica</strong> y con
       <em>énfasis</em>. También hay <b>negrita visual</b> y
       <i>cursiva visual</i>, pero se prefieren las dos primeras.</p>

    <p>Otros elementos útiles:
       <mark>resaltado</mark>,
       <small>letra pequeña</small>,
       <del>texto eliminado</del>,
       <ins>texto insertado</ins>,
       H<sub>2</sub>O, x<sup>2</sup>,
       <code>código en línea</code>.</p>

    <blockquote cite="https://ejemplo.com">
      <p>Una cita textual extensa.</p>
      <footer>— Autor de la cita</footer>
    </blockquote>

Texto con importancia semántica y con énfasis. También resaltado, eliminado, H2O y x2.

¿`strong` o `b`? Visualmente se ven igual, pero `<strong>` comunica al lector de pantalla que el contenido es importante; `<b>` solo aplica negrita. Usa siempre la versión semántica.

### Listas

    <!-- Lista no ordenada (viñetas) -->
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

    <!-- Lista ordenada (numerada) -->
    <ol>
      <li>Analizar el requerimiento</li>
      <li>Diseñar el prototipo</li>
      <li>Codificar la interfaz</li>
    </ol>

    <!-- Lista anidada -->
    <ul>
      <li>Frontend
        <ul>
          <li>HTML</li>
          <li>CSS</li>
        </ul>
      </li>
      <li>Backend</li>
    </ul>

    <!-- Lista de definiciones -->
    <dl>
      <dt>HTML</dt>
      <dd>Lenguaje de marcado para estructurar contenido web.</dd>
      <dt>CSS</dt>
      <dd>Lenguaje de hojas de estilo en cascada.</dd>
    </dl>

La lista anidada va dentro del `<li>` padre, nunca entre dos `<li>`.

## 6. Enlaces e imágenes

### Enlaces con <a>

    <!-- Enlace externo: se abre en pestaña nueva de forma segura -->
    <a href="https://www.sena.edu.co" target="_blank" rel="noopener noreferrer">
      Portal SENA
    </a>

    <!-- Enlace interno (otra página del mismo sitio) -->
    <a href="contacto.html">Contacto</a>
    <a href="paginas/servicios.html">Servicios</a>

    <!-- Ancla dentro de la misma página -->
    <a href="#seccion-2">Ir a la sección 2</a>
    ...
    <section id="seccion-2">...</section>

    <!-- Correo y teléfono -->
    <a href="mailto:contacto@ejemplo.com">Escríbenos</a>
    <a href="tel:+573001234567">Llámanos</a>

    <!-- Descarga de archivo -->
    <a href="documentos/guia.pdf" download>Descargar guía</a>

#### Rutas relativas vs. absolutas

Ruta | Significado
--- | ---
`imagen.jpg` | Misma carpeta que el HTML actual
`img/imagen.jpg` | Carpeta `img` dentro de la actual
`../imagen.jpg` | Sube un nivel de carpeta
`/img/imagen.jpg` | Desde la raíz del sitio
`https://...` | Ruta absoluta a otro dominio

Sobre `target="_blank"` Acompáñalo siempre de `rel="noopener noreferrer"`. Sin esto, la página destino puede manipular la ventana de origen: es una vulnerabilidad conocida.

### Imágenes con <img>

    <img src="img/logo-sena.png"
         alt="Logotipo del Servicio Nacional de Aprendizaje"
         width="200" height="200">

    <!-- Imagen con leyenda semántica -->
    <figure>
      <img src="img/grafico.png" alt="Gráfico de matrículas 2026">
      <figcaption>Figura 1. Matrículas por trimestre.</figcaption>
    </figure>

    <!-- Imagen adaptable a distintas pantallas -->
    <picture>
      <source media="(min-width: 800px)" srcset="img/banner-grande.jpg">
      <source media="(min-width: 400px)" srcset="img/banner-medio.jpg">
      <img src="img/banner-pequeno.jpg" alt="Banner del curso">
    </picture>

El atributo `alt` es obligatorio Describe la imagen para quien no puede verla y se muestra si la imagen falla al cargar. Si la imagen es puramente decorativa, déjalo vacío: `alt=""`. Nunca lo omitas.

#### Formatos de imagen

Formato | Cuándo usarlo
--- | ---
JPG | Fotografías. Buena compresión, sin transparencia.
PNG | Logos e imágenes con transparencia o texto nítido.
SVG | Iconos y logos vectoriales. Escala sin perder calidad.
WebP | Formato moderno: mejor compresión que JPG y PNG.

## 7. Tablas

Las tablas sirven para presentar datos tabulares. No se usan para maquetar la página: para eso están Flexbox y Grid.

Tabla completa y accesible

    <table>
      <caption>Notas del primer trimestre</caption>
      <thead>
        <tr>
          <th scope="col">Aprendiz</th>
          <th scope="col">HTML</th>
          <th scope="col">CSS</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Ana Torres</th>
          <td>4.5</td>
          <td>4.2</td>
        </tr>
        <tr>
          <th scope="row">Luis Peña</th>
          <td>3.8</td>
          <td>4.0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Promedio</th>
          <td>4.15</td>
          <td>4.10</td>
        </tr>
      </tfoot>
    </table>

Notas del primer trimestre
Aprendiz | HTML | CSS
--- | --- | ---
Ana Torres | 4.5 | 4.2
Luis Peña | 3.8 | 4.0
Promedio | 4.15 | 4.10

### Combinar celdas

    <tr>
      <td colspan="2">Ocupa dos columnas</td>
    </tr>
    <tr>
      <td rowspan="3">Ocupa tres filas</td>
      <td>Dato</td>
    </tr>

Accesibilidad en tablas `<caption>` describe el propósito de la tabla y `scope` indica si un `<th>` encabeza una columna o una fila. Ambos permiten que un lector de pantalla lea la tabla de forma comprensible.

## 8. Formularios

El formulario es el principal canal de entrada de datos del usuario. Un formulario mal construido es la causa número uno de abandono en un sitio web.

Formulario de registro

    <form action="/procesar.php" method="POST">

      <fieldset>
        <legend>Datos personales</legend>

        <label for="nombre">Nombre completo</label>
        <input type="text" id="nombre" name="nombre"
               placeholder="Ana Torres" required>

        <label for="correo">Correo electrónico</label>
        <input type="email" id="correo" name="correo" required>

        <label for="clave">Contraseña</label>
        <input type="password" id="clave" name="clave"
               minlength="8" required>

        <label for="edad">Edad</label>
        <input type="number" id="edad" name="edad" min="14" max="99">

        <label for="fecha">Fecha de nacimiento</label>
        <input type="date" id="fecha" name="fecha">
      </fieldset>

      <fieldset>
        <legend>Preferencias</legend>

        <label for="programa">Programa de formación</label>
        <select id="programa" name="programa">
          <option value="">-- Seleccione --</option>
          <option value="adso">Análisis y Desarrollo de Software</option>
          <option value="redes">Redes de Datos</option>
        </select>

        <p>Jornada:</p>
        <input type="radio" id="manana" name="jornada" value="manana">
        <label for="manana">Mañana</label>
        <input type="radio" id="tarde" name="jornada" value="tarde">
        <label for="tarde">Tarde</label>

        <input type="checkbox" id="terminos" name="terminos" required>
        <label for="terminos">Acepto el tratamiento de datos</label>

        <label for="comentario">Comentarios</label>
        <textarea id="comentario" name="comentario" rows="4"></textarea>
      </fieldset>

      <button type="submit">Registrarme</button>
      <button type="reset">Limpiar</button>
    </form>

### Tipos de `input` más usados

type | Uso
--- | ---
`text` | Texto libre de una línea
`email` | Correo; el navegador valida el formato
`password` | Oculta los caracteres
`number` | Valor numérico con `min`, `max`, `step`
`tel` | Teléfono; abre teclado numérico en móvil
`date` / `time` | Selector de fecha u hora nativo
`file` | Carga de archivos
`color` | Selector de color
`range` | Control deslizante
`hidden` | Dato oculto que viaja con el formulario

### Validación del lado del cliente

    <input type="text" required>                    <!-- obligatorio -->
    <input type="text" minlength="3" maxlength="20"> <!-- longitud -->
    <input type="number" min="0" max="100" step="5"> <!-- rango -->
    <input type="text" pattern="[0-9]{10}"
           title="Debe tener 10 dígitos">             <!-- expresión regular -->

La validación del cliente no es seguridad Cualquier usuario puede desactivarla desde las herramientas del navegador. Siempre debe existir una validación equivalente en el servidor.
El vínculo `label` ↔ `input` El atributo `for` de la etiqueta debe coincidir con el `id` del campo. Así, al hacer clic en el texto, el campo recibe el foco — y el lector de pantalla sabe qué se está pidiendo. Es un requisito de accesibilidad, no un adorno.

## 9. HTML semántico

Antes de HTML5 casi todo se construía con `<div>`. Hoy existen etiquetas que describen el papel de cada bloque, lo que mejora la accesibilidad, el SEO y la legibilidad del código.

    <body>
      <header>
        <h1>Nombre del sitio</h1>
        <nav>
          <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a></li>
          </ul>
        </nav>
      </header>

      <main>
        <article>
          <h2>Título del artículo</h2>
          <section>
            <h3>Primera parte</h3>
            <p>Contenido...</p>
          </section>
        </article>

        <aside>
          <h2>Contenido relacionado</h2>
        </aside>
      </main>

      <footer>
        <p>&copy; 2026 SENA. Todos los derechos reservados.</p>
      </footer>
    </body>

Etiqueta | Representa
--- | ---
`<header>` | Cabecera del sitio o de una sección
`<nav>` | Bloque de navegación principal
`<main>` | Contenido principal. Solo uno por página
`<article>` | Contenido autónomo que tendría sentido por sí solo
`<section>` | Agrupación temática. Debe llevar un encabezado
`<aside>` | Contenido secundario o complementario
`<footer>` | Pie de página o de sección
`<figure>` | Ilustración con su leyenda
`<div>` | Contenedor sin significado. Úsalo solo cuando ninguna etiqueta semántica aplique

Criterio práctico Antes de escribir un `<div>`, pregúntate: ¿qué es este bloque? Si la respuesta es "el menú", "el pie", "un artículo", existe una etiqueta semántica para eso.

## 10. ¿Qué es CSS?

CSS (Cascading Style Sheets) define cómo se presenta el contenido: colores, tipografías, espaciado, posición y comportamiento visual.

### Sintaxis

    selector {
      propiedad: valor;
      propiedad: valor;
    }

    /* Ejemplo real */
    h1 {
      color: #39A900;
      font-size: 2rem;
      text-align: center;
    }

### Tres formas de aplicar CSS

#### 1. En línea — evitar

    <p style="color: red; font-size: 18px;">Texto</p>

Mezcla estructura y presentación, no se reutiliza y tiene la máxima especificidad, lo que dificulta sobrescribirla. Solo se justifica en correos HTML.

#### 2. Interna — solo para pruebas

    <head>
      <style>
        p { color: red; }
      </style>
    </head>

#### 3. Externa — la correcta

    <!-- En el HTML -->
    <link rel="stylesheet" href="css/estilos.css">

    /* En css/estilos.css */
    p { color: red; }

Separa responsabilidades, se cachea en el navegador y una sola hoja sirve a todo el sitio.

### Unidades de medida

Unidad | Tipo | Descripción
--- | --- | ---
`px` | Absoluta | Píxeles. Precisa pero no escala con la preferencia del usuario.
`rem` | Relativa | Respecto al tamaño de fuente raíz (por defecto 16px). La más recomendada.
`em` | Relativa | Respecto al tamaño de fuente del elemento padre. Se acumula al anidar.
`%` | Relativa | Porcentaje del contenedor padre.
`vw` / `vh` | Viewport | 1% del ancho / alto de la ventana.
`fr` | Grid | Fracción del espacio disponible en una cuadrícula.

### Variables CSS

    :root {
      --color-primario: #39A900;
      --color-texto: #1f2933;
      --espaciado: 16px;
    }

    .boton {
      background: var(--color-primario);
      color: #fff;
      padding: var(--espaciado);
    }

Definir la paleta una sola vez permite cambiar todo el sitio modificando una línea.

## 11. Selectores y cascada

### Selectores básicos

    * { margin: 0; }              /* Universal: todos los elementos */
    p { color: gray; }            /* Etiqueta */
    .destacado { color: red; }    /* Clase — se repite las veces que quieras */
    #principal { width: 80%; }    /* ID — único por página */
    [type="text"] { border: 1px solid; }  /* Atributo */

### Combinadores

    div p       { }  /* Todo p descendiente de div, a cualquier nivel */
    div > p     { }  /* Solo p hijo directo de div */
    h2 + p      { }  /* El p inmediatamente después de un h2 */
    h2 ~ p      { }  /* Todos los p hermanos posteriores a un h2 */
    h1, h2, h3  { }  /* Agrupación: aplica a los tres */

### Pseudoclases y pseudoelementos

    /* Pseudoclases: estado del elemento */
    a:hover        { color: orange; }   /* al pasar el mouse */
    a:visited      { color: purple; }
    input:focus    { outline: 2px solid blue; }
    li:first-child { font-weight: bold; }
    li:last-child  { border: none; }
    li:nth-child(odd)  { background: #f5f5f5; }
    li:nth-child(3n)   { color: green; }

    /* Pseudoelementos: partes del elemento */
    p::first-line   { font-weight: bold; }
    p::first-letter { font-size: 2em; }
    .aviso::before  { content: "⚠ "; }
    .enlace::after  { content: " →"; }

### La cascada: cómo se resuelven los conflictos

Cuando dos reglas afectan al mismo elemento, el navegador decide en este orden:

1. Origen e importancia: `!important` gana sobre todo lo demás.
2. Especificidad: el selector más específico gana.
3. Orden de aparición: a igual especificidad, gana la última regla escrita.

#### Cálculo de especificidad

Tipo de selector | Peso | Ejemplo
--- | --- | ---
Estilo en línea | 1000 | `style="..."`
ID | 100 | `#menu`
Clase, atributo, pseudoclase | 10 | `.activo`, `:hover`
Etiqueta, pseudoelemento | 1 | `p`, `::before`

    p               → 1
    .texto          → 10
    #main p         → 101
    #main .texto p  → 111   ← esta gana

Evita `!important` Es un parche que rompe la cascada. Si lo necesitas, casi siempre significa que tus selectores están mal diseñados. Prefiere clases bien nombradas sobre IDs.

### Herencia

Algunas propiedades se heredan del padre al hijo (`color`, `font-family`, `line-height`) y otras no (`border`, `margin`, `padding`).

    body {
      font-family: 'Segoe UI', sans-serif;  /* se hereda a toda la página */
      color: #333;
    }

## 12. Modelo de caja

Todo elemento HTML es una caja rectangular compuesta por cuatro capas, de adentro hacia afuera:

    ┌─────────────────────────────────────┐
    │           MARGIN (externo)          │
    │  ┌───────────────────────────────┐  │
    │  │          BORDER               │  │
    │  │  ┌─────────────────────────┐  │  │
    │  │  │      PADDING (interno)  │  │  │
    │  │  │  ┌───────────────────┐  │  │  │
    │  │  │  │     CONTENT       │  │  │  │
    │  │  │  └───────────────────┘  │  │  │
    │  │  └─────────────────────────┘  │  │
    │  └───────────────────────────────┘  │
    └─────────────────────────────────────┘

    .caja {
      width: 300px;
      height: 200px;

      padding: 20px;                    /* los 4 lados */
      padding: 10px 20px;               /* vertical | horizontal */
      padding: 10px 20px 15px 5px;      /* arriba der. abajo izq. */

      border: 2px solid #39A900;
      border-radius: 8px;

      margin: 16px;
      margin: 0 auto;                   /* centra horizontalmente */
    }

### `box-sizing`: el ajuste indispensable

Por defecto, `width` mide solo el contenido: el padding y el borde se suman, y la caja termina siendo más ancha de lo declarado.

    /* Sin ajuste: 300 + 40 (padding) + 4 (borde) = 344px reales */
    .caja { width: 300px; padding: 20px; border: 2px solid; }

    /* Con el ajuste: la caja mide exactamente 300px */
    * {
      box-sizing: border-box;
    }

Regla de oro Empieza toda hoja de estilos con `* { box-sizing: border-box; margin: 0; padding: 0; }`. Te ahorra horas de cálculos que no cuadran.

### `display`: cómo se comporta la caja

Valor | Comportamiento
--- | ---
`block` | Ocupa todo el ancho disponible y fuerza un salto de línea. Ej.: `div`, `p`, `h1`
`inline` | Ocupa solo lo que su contenido necesita. No acepta `width` ni `height`. Ej.: `span`, `a`
`inline-block` | Fluye en línea pero acepta dimensiones y márgenes verticales
`flex` | Convierte el elemento en contenedor flexible (ver sección 14)
`grid` | Convierte el elemento en cuadrícula (ver sección 15)
`none` | Oculta el elemento y lo saca del flujo

### Posicionamiento

    position: static;    /* por defecto, sigue el flujo normal */
    position: relative;  /* se desplaza respecto a su posición original */
    position: absolute;  /* respecto al ancestro posicionado más cercano */
    position: fixed;     /* respecto a la ventana; no se mueve al hacer scroll */
    position: sticky;    /* híbrido: se fija al alcanzar un umbral */

    /* Se acompañan de: */
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;         /* orden de apilamiento */

## 13. Colores y tipografía

### Formas de expresar un color

    color: red;                        /* nombre */
    color: #39A900;                    /* hexadecimal */
    color: #fff;                       /* hexadecimal abreviado */
    color: rgb(57, 169, 0);            /* RGB */
    color: rgba(57, 169, 0, 0.5);      /* RGB con transparencia */
    color: hsl(140, 100%, 33%);        /* tono, saturación, luminosidad */

### Fondos

    .hero {
      background-color: #39A900;
      background-image: url('img/fondo.jpg');
      background-size: cover;        /* cubre todo el contenedor */
      background-position: center;
      background-repeat: no-repeat;
    }

    /* Degradados */
    .degradado {
      background: linear-gradient(135deg, #39A900, #2b7d00);
      background: radial-gradient(circle, #fff, #ccc);
    }

### Tipografía

    body {
      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 1rem;          /* 16px por defecto */
      font-weight: 400;         /* 100 a 900; 700 = negrita */
      font-style: normal;       /* normal | italic */
      line-height: 1.6;         /* sin unidad: múltiplo del font-size */
      letter-spacing: 0.5px;
      text-align: left;         /* left | center | right | justify */
      text-transform: none;     /* uppercase | lowercase | capitalize */
      text-decoration: none;    /* underline | line-through */
    }

La lista de `font-family` es una cadena de respaldo: el navegador prueba una por una hasta encontrar la primera disponible.

#### Fuentes externas (Google Fonts)

    <!-- En el head del HTML -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
          rel="stylesheet">

    /* En el CSS */
    body { font-family: 'Poppins', sans-serif; }

### Sombras y transiciones

    .tarjeta {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .tarjeta:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .titulo {
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }

Contraste y accesibilidad La relación de contraste entre texto y fondo debe ser al menos 4.5:1 para texto normal según la norma WCAG 2.1 nivel AA. Verifícalo en `webaim.org/resources/contrastchecker`.

## 14. Flexbox

Flexbox distribuye elementos en una dimensión: una fila o una columna. Es la herramienta ideal para barras de navegación, alineaciones y distribución de espacio.

### Propiedades del contenedor

    .contenedor {
      display: flex;

      flex-direction: row;         /* row | row-reverse | column | column-reverse */

      justify-content: center;     /* eje PRINCIPAL:
                                      flex-start | flex-end | center |
                                      space-between | space-around | space-evenly */

      align-items: center;         /* eje TRANSVERSAL:
                                      stretch | flex-start | flex-end | center | baseline */

      flex-wrap: wrap;             /* nowrap | wrap — permite salto de línea */

      gap: 16px;                   /* separación entre elementos */
    }

Cómo recordar los ejes `justify-content` trabaja sobre el eje que marca `flex-direction`. `align-items` trabaja sobre el eje perpendicular. Si cambias a `flex-direction: column`, ambos intercambian su orientación.

### Propiedades de los hijos

    .item {
      flex-grow: 1;      /* proporción de espacio sobrante que absorbe */
      flex-shrink: 1;    /* qué tanto se encoge si falta espacio */
      flex-basis: 200px; /* tamaño base antes de crecer o encoger */

      flex: 1;           /* atajo de: 1 1 0 */
      flex: 0 0 250px;   /* ancho fijo, no crece ni se encoge */

      align-self: flex-end;  /* sobrescribe align-items solo para este item */
      order: 2;              /* cambia el orden visual sin tocar el HTML */
    }

### Caso práctico: barra de navegación

    <nav class="menu">
      <a class="logo" href="#">MiSitio</a>
      <ul class="enlaces">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>

    .menu {
      display: flex;
      justify-content: space-between;  /* logo a la izquierda, enlaces a la derecha */
      align-items: center;
      padding: 12px 24px;
      background: #39A900;
    }

    .enlaces {
      display: flex;
      gap: 24px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

### Centrado perfecto

    .centrado {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

Tres líneas resuelven el problema que durante años requirió trucos con `position` y `transform`.

## 15. CSS Grid

Grid trabaja en dos dimensiones simultáneamente: filas y columnas. Es la herramienta para maquetar la estructura general de una página.

### Definir la cuadrícula

    .grid {
      display: grid;

      /* Tres columnas iguales */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-columns: repeat(3, 1fr);   /* equivalente */

      /* Columnas de distinto peso */
      grid-template-columns: 250px 1fr 200px;

      /* Filas */
      grid-template-rows: auto 1fr auto;

      gap: 20px;              /* separación entre celdas */
      row-gap: 10px;
      column-gap: 30px;
    }

### Cuadrícula automática y adaptable

    /* Tantas columnas como quepan, mínimo 250px cada una.
       Se adapta sola sin necesidad de media queries. */
    .galeria {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

La línea más útil de CSS moderno `repeat(auto-fit, minmax(250px, 1fr))` crea una galería responsive completa en una sola declaración. Úsala para tarjetas, productos y listados de imágenes.

### Ubicar elementos en la cuadrícula

    .item {
      grid-column: 1 / 3;        /* desde la línea 1 hasta la 3 */
      grid-column: span 2;       /* ocupa 2 columnas */
      grid-row: 1 / 3;           /* ocupa 2 filas */
    }

### Áreas con nombre

    .layout {
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "cabecera cabecera"
        "menu     contenido"
        "pie      pie";
      min-height: 100vh;
      gap: 12px;
    }

    .cabecera  { grid-area: cabecera; }
    .menu      { grid-area: menu; }
    .contenido { grid-area: contenido; }
    .pie       { grid-area: pie; }

La propiedad `grid-template-areas` permite ver la maqueta directamente en el código: es autodocumentada y muy fácil de reorganizar dentro de una media query.

### ¿Flexbox o Grid?

Situación | Herramienta
--- | ---
Barra de navegación | Flexbox
Estructura general de la página | Grid
Alinear elementos en una línea | Flexbox
Galería de tarjetas | Grid
Formulario de dos columnas | Grid
Centrar un elemento | Cualquiera de las dos

No son excluyentes: lo habitual es usar Grid para la estructura mayor y Flexbox dentro de cada bloque.

## 16. Diseño responsive

Un diseño responsive se adapta al tamaño de pantalla del dispositivo. En Colombia, más del 70% del tráfico web proviene de móviles: no es opcional.

### Requisito previo

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Sin esta línea en el `<head>`, el móvil simula una pantalla de escritorio y ninguna media query funcionará.

### Media queries

    /* Estilos base: móvil primero */
    .contenedor {
      display: grid;
      grid-template-columns: 1fr;
      padding: 16px;
    }

    /* Tableta: 768px o más */
    @media (min-width: 768px) {
      .contenedor {
        grid-template-columns: 1fr 1fr;
        padding: 24px;
      }
    }

    /* Escritorio: 1024px o más */
    @media (min-width: 1024px) {
      .contenedor {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        margin: 0 auto;
      }
    }

### Puntos de quiebre habituales

Dispositivo | Ancho
--- | ---
Móvil | hasta 480px
Móvil grande / tableta pequeña | 481px – 767px
Tableta | 768px – 1023px
Escritorio | 1024px – 1439px
Pantalla grande | 1440px en adelante

Enfoque mobile first Escribe primero los estilos para móvil y añade complejidad con `min-width` a medida que crece la pantalla. Resulta en menos código, mejor rendimiento en móviles y una progresión más natural.

### Otras técnicas responsive

    /* Imágenes que nunca desbordan su contenedor */
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* Tipografía fluida: crece con la pantalla, con límites */
    h1 {
      font-size: clamp(1.5rem, 4vw, 3rem);
    }

    /* Anchos flexibles con tope */
    .contenido {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Estilos para impresión */
    @media print {
      nav, footer, .sin-imprimir { display: none; }
    }

Cómo probar Presiona `F12` en el navegador y activa el modo dispositivo (`Ctrl`+`Shift`+`M`). Puedes simular distintos móviles y tabletas sin salir del escritorio.

## 17. Actividades de aprendizaje

Actividad 1 · Reflexión

#### Reconocimiento de saberes previos

Antes de escribir código, responde en tu bitácora de formación:

1. Elige un sitio web que uses a diario. Presiona `Ctrl`+`U` para ver su código fuente. ¿Reconoces alguna etiqueta?
2. ¿Qué diferencia hay entre la estructura y la presentación de una página? Da un ejemplo con algo distinto a una página web.
3. ¿Por qué crees que se separan HTML y CSS en archivos distintos?

Evidencia: documento de reflexión, mínimo una página.

Actividad 2 · Apropiación

#### Mi primera página HTML

Crea un archivo `perfil.html` con tu hoja de vida y que contenga como mínimo:

- Plantilla base completa con `<!DOCTYPE>`, `lang`, `charset`, `viewport` y `title`.
- Un `<h1>` con tu nombre y al menos tres `<h2>` de sección.
- Una imagen con atributo `alt` descriptivo.
- Una lista ordenada de tu formación académica y una no ordenada de tus habilidades.
- Una tabla con tu experiencia laboral (empresa, cargo, periodo).
- Enlaces a tus redes profesionales con `target` y `rel` correctos.
- Estructura semántica: `header`, `main`, `section`, `footer`.

Evidencia: archivo `perfil.html` validado sin errores en `validator.w3.org`.

Actividad 3 · Apropiación

#### Formulario de inscripción

Construye `inscripcion.html` con un formulario que capture: nombre, documento, correo, teléfono, fecha de nacimiento, programa de formación (lista desplegable), jornada (radio), intereses (checkboxes) y un campo de observaciones.

Requisitos: todos los campos con su `<label>` correctamente vinculado, agrupación en `<fieldset>` con `<legend>`, y validación HTML5 (`required`, `pattern`, `min`, `max`).

Evidencia: archivo `inscripcion.html` + captura de pantalla de la validación funcionando.

Actividad 4 · Apropiación

#### Aplicando estilos

Crea `css/estilos.css` y vincúlalo a tu `perfil.html`. Debe incluir:

- Variables CSS en `:root` con al menos cuatro colores de tu paleta.
- Reinicio con `box-sizing: border-box`.
- Al menos un selector de etiqueta, uno de clase, uno de ID y un combinador.
- Un efecto `:hover` con `transition`.
- Fuente externa de Google Fonts.

Evidencia: hoja de estilos externa + página estilizada.

Actividad 5 · Transferencia

#### Maquetación con Flexbox y Grid

Construye una página de aterrizaje (landing page) de un producto o servicio ficticio, con:

- Barra de navegación maquetada con Flexbox (logo a un lado, menú al otro).
- Sección principal con imagen y texto en dos columnas.
- Galería de al menos seis tarjetas con Grid y `repeat(auto-fit, minmax(...))`.
- Pie de página con tres columnas de información.

Evidencia: carpeta del proyecto comprimida (HTML + CSS + imágenes).

Proyecto final · Transferencia

#### Sitio web responsive completo

Desarrolla un sitio de mínimo cuatro páginas enlazadas entre sí sobre un tema de libre elección (emprendimiento, portafolio, organización comunitaria, etc.).

Requisitos obligatorios:

1. Estructura de carpetas organizada (`css/`, `img/`, `js/`).
2. Navegación funcional entre todas las páginas.
3. HTML5 semántico en todas las páginas, validado en el W3C sin errores.
4. Una única hoja de estilos externa compartida.
5. Maquetación con Flexbox y Grid.
6. Formulario de contacto con validación HTML5.
7. Diseño responsive con al menos dos puntos de quiebre, verificado en móvil, tableta y escritorio.
8. Imágenes optimizadas, todas con atributo `alt`.
9. Contraste de texto conforme a WCAG AA.

Evidencia: proyecto comprimido + sustentación oral de 10 minutos ante el grupo.

## 18. Evaluación

### Instrumento: lista de chequeo del proyecto final

N.º | Aspecto a evaluar | Peso | Sí | No
--- | --- | --- | --- | ---
1 | La estructura de carpetas está organizada y los nombres de archivo siguen la convención (minúsculas, sin espacios ni tildes). | 5% |  |
2 | Todos los documentos incluyen la plantilla base completa y correcta. | 10% |  |
3 | Emplea etiquetas semánticas (`header`, `nav`, `main`, `article`, `section`, `footer`) en lugar de `div` genéricos. | 15% |  |
4 | La navegación entre las cuatro páginas funciona en ambos sentidos. | 10% |  |
5 | Usa una hoja de estilos externa; no hay estilos en línea. | 10% |  |
6 | Aplica Flexbox y Grid de forma pertinente según el caso. | 15% |  |
7 | El formulario tiene `label` vinculados y validación HTML5. | 10% |  |
8 | El diseño se adapta correctamente a móvil, tableta y escritorio. | 15% |  |
9 | Todas las imágenes tienen `alt` descriptivo y están optimizadas. | 5% |  |
10 | El código valida sin errores en `validator.w3.org`. | 5% |  |

### Escala de valoración

Nivel | Descripción
--- | ---
Supera | Cumple todos los criterios y aporta elementos adicionales por iniciativa propia.
Cumple | Cumple los criterios establecidos en la guía.
En proceso | Cumple parcialmente; requiere plan de mejoramiento.
No cumple | No presenta la evidencia o esta no corresponde a lo solicitado.

### Tipos de evidencia

- De conocimiento: cuestionario de conceptos (secciones 2, 3, 9, 10, 11).
- De desempeño: observación directa durante la construcción y sustentación del proyecto.
- De producto: archivos HTML y CSS entregados en el repositorio o plataforma acordada.

## 19. Glosario

Término | Definición
--- | ---
Atributo | Información adicional que se agrega a una etiqueta para modificar su comportamiento.
Cascada | Mecanismo por el cual el navegador decide qué regla CSS aplicar cuando varias entran en conflicto.
DOM | Representación en árbol que el navegador construye a partir del documento HTML.
Especificidad | Valor numérico que determina la prioridad de un selector CSS.
Etiqueta | Marca delimitada por `<` y `>` que define un elemento HTML.
Flexbox | Modelo de maquetación unidimensional para distribuir elementos en fila o columna.
Grid | Modelo de maquetación bidimensional basado en filas y columnas.
Media query | Regla CSS que aplica estilos solo cuando se cumplen ciertas condiciones del dispositivo.
Mobile first | Estrategia de diseño que parte de la pantalla más pequeña y escala hacia arriba.
Pseudoclase | Selector que apunta a un estado particular de un elemento, como `:hover`.
Renderizado | Proceso mediante el cual el navegador dibuja la página en pantalla.
Responsive | Diseño que se adapta automáticamente al tamaño de pantalla del dispositivo.
Semántica | Uso de etiquetas que describen el significado del contenido, no su apariencia.
Viewport | Área visible de la página en la ventana del navegador.
W3C | World Wide Web Consortium: organismo que define los estándares de la web.
WCAG | Pautas de Accesibilidad para el Contenido Web, referente internacional en accesibilidad.

## 20. Recursos y bibliografía

### Documentación de referencia

- MDN Web Docs — `developer.mozilla.org/es`. La referencia más completa y confiable, en español.
- W3C — `w3.org`. Especificaciones oficiales de HTML y CSS.
- Can I Use — `caniuse.com`. Compatibilidad de cada propiedad con los navegadores.

### Herramientas

- Validador HTML del W3C — `validator.w3.org`
- Validador CSS del W3C — `jigsaw.w3.org/css-validator`
- Contrast Checker — `webaim.org/resources/contrastchecker`
- Flexbox Froggy — `flexboxfroggy.com`. Juego para practicar Flexbox.
- Grid Garden — `cssgridgarden.com`. Juego para practicar Grid.
- Google Fonts — `fonts.google.com`

### Bibliografía sugerida

- Duckett, J. HTML y CSS: diseñe y construya sitios web. Anaya Multimedia.
- Robbins, J. N. Learning Web Design. O'Reilly Media.
- Grant, K. J. CSS in Depth. Manning Publications.

Consejo final para el aprendiz HTML y CSS no se aprenden leyendo: se aprenden escribiendo. Reproduce cada ejemplo de esta guía en tu editor, rompe el código a propósito y observa qué cambia. El error es la herramienta de aprendizaje más rápida que tienes.
↑