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

Estructurar documentos web utilizando etiquetas HTML5 semánticas y correctamente anidadas.
Aplicar hojas de estilo en cascada para definir la presentación visual de una interfaz.
Implementar maquetaciones flexibles y adaptables a distintos tamaños de pantalla.
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?

El usuario escribe una dirección en el navegador (cliente).
El navegador envía una petición HTTP al servidor donde vive el sitio.
El servidor responde con los archivos: HTML, CSS, imágenes, scripts.
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~~, H₂O y x².

¿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:

Origen e importancia: !important gana sobre todo lo demás.
Especificidad: el selector más específico gana.
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:

Elige un sitio web que uses a diario. Presiona Ctrl+U para ver su código fuente. ¿Reconoces alguna etiqueta?
¿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.
¿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:

Estructura de carpetas organizada (css/, img/, js/).
Navegación funcional entre todas las páginas.
HTML5 semántico en todas las páginas, validado en el W3C sin errores.
Una única hoja de estilos externa compartida.
Maquetación con Flexbox y Grid.
Formulario de contacto con validación HTML5.
Diseño responsive con al menos dos puntos de quiebre, verificado en móvil, tableta y escritorio.
Imágenes optimizadas, todas con atributo alt.
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
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.

1. Identificación de la guía

Competencia

Resultados de aprendizaje

Criterios de evaluación

Ambiente y materiales

2. Introducción y contexto

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

3. ¿Qué es HTML?

Anatomía de una etiqueta

Elementos vacíos

Reglas de anidamiento

Comentarios

4. Estructura de un documento HTML5

Explicación línea por línea

Organización de archivos del proyecto

5. Texto, títulos y listas

Jerarquía de títulos

Párrafos y formato de texto

Listas

6. Enlaces e imágenes

Enlaces con <a>

Rutas relativas vs. absolutas

Imágenes con <img>

Formatos de imagen

7. Tablas

Combinar celdas

8. Formularios

Tipos de input más usados

Validación del lado del cliente

9. HTML semántico

10. ¿Qué es CSS?

Sintaxis

Tres formas de aplicar CSS

1. En línea — evitar

2. Interna — solo para pruebas

3. Externa — la correcta

Unidades de medida

Variables CSS

11. Selectores y cascada

Selectores básicos

Combinadores

Pseudoclases y pseudoelementos

La cascada: cómo se resuelven los conflictos

Cálculo de especificidad

Herencia

12. Modelo de caja

box-sizing: el ajuste indispensable

display: cómo se comporta la caja

Posicionamiento

13. Colores y tipografía

Formas de expresar un color

Fondos

Tipografía

Fuentes externas (Google Fonts)

Sombras y transiciones

14. Flexbox

Propiedades del contenedor

Propiedades de los hijos

Caso práctico: barra de navegación

Centrado perfecto

15. CSS Grid

Definir la cuadrícula

Cuadrícula automática y adaptable

Ubicar elementos en la cuadrícula

Áreas con nombre

¿Flexbox o Grid?

16. Diseño responsive

Requisito previo

Media queries

Puntos de quiebre habituales

Otras técnicas responsive

17. Actividades de aprendizaje

Reconocimiento de saberes previos

Mi primera página HTML

Formulario de inscripción

Aplicando estilos

Maquetación con Flexbox y Grid

Sitio web responsive completo

18. Evaluación

Instrumento: lista de chequeo del proyecto final

Tipos de `input` más usados

`box-sizing`: el ajuste indispensable

`display`: cómo se comporta la caja