¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.
Ver cursos de HTML & CSS en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primer HTML
- 03Listas y enlaces
- 04Poner color con CSS
- 05Selectores CSS y clases
- 06Maquetar con Flexbox
- 07Probar imágenes y tablas
- 08Probar los controles de formulario
- 09Entender el modelo de cajas
- 10Introducción al diseño adaptable (media queries)
- 11Variables CSS (propiedades personalizadas)
- 12Maquetar con CSS Grid
- 13Añadir una animación
- 14Escribir comentarios
- 15Añadir interacción con pseudoclases (:hover)
- 16:not() y selectores con varias condiciones en CSS
- 17Fundamentos de las metaetiquetas y el SEO
- 18Fundamentos de accesibilidad (alt y aria-label)
- 19Probar los atributos data (data-*)
- 20Transiciones CSS (cambios suaves al pasar el ratón)
- 21iframe (incrustar otra página)
- 22position (colocar un elemento con precisión)
- 23z-index (indicar el orden de apilamiento)
- 24Fundamentos de localStorage (guardar datos en el navegador)
- 25Las etiquetas video y audio (incrustar medios)
- 26Tablas avanzadas (colspan y rowspan)
- 27Fundamentos de la especificidad en CSS
- 28Fundamentos de SVG (dibujar imágenes vectoriales)
- 29Flexbox avanzado (envolver y crecer)
- 30Validación de formularios (required y pattern)
- 31CSS Grid avanzado (grid-template-areas)
- 32Las etiquetas details y summary (crear un panel plegable)
- 33Contadores CSS (numeración automática)
- 34Tamaños de letra fluidos con clamp()
- 35prefers-color-scheme (compatibilidad con el modo oscuro)
- 36Construir un deslizador con input type=range
- 37Fijar una proporción con aspect-ratio
- 38Ajustar cómo se muestra una imagen con object-fit
- 39Girar y escalar con transform
- 40Servir imágenes adaptables con la etiqueta picture
- 41Mostrar el foco del teclado con :focus-visible
- 42Desplazamiento suave con scroll-behavior
- 43Cambiar la disposición por componente con container queries
- 44Crear un efecto de cristal esmerilado con backdrop-filter
- 45Construir una rejilla flexible con repeat() y minmax()
- 46Fijar una cabecera en su sitio con position: sticky
- 47Añadir pseudoelementos con ::before y ::after
- 48Recortar textos largos con puntos suspensivos usando text-overflow
- 49Usar un valor calculado en CSS con calc()
- 50[Aplicado] Construye un sitio web sencillo
Probar imágenes y tablas
En esta lección incorporarás dos tipos de contenido que van más allá del texto: imágenes y tablas de datos.
Una imagen se inserta con <img src="ruta" alt="descripción">. No lleva etiqueta de cierre, y alt es el texto alternativo que se muestra (o se lee en voz alta) cuando la imagen no está disponible. Una tabla se construye con <table> como contenedor, <tr> para cada fila, <th> para las celdas de cabecera y <td> para las de datos.
El código de ejemplo muestra una imagen redondeada y, debajo, una tabla de dos columnas con nombres y notas. Prueba a añadir una fila más copiando una línea <tr>.
El descuido más típico es dejar el alt vacío o no ponerlo: perjudica a quien usa un lector de pantalla y también al posicionamiento en buscadores. En las tablas, el fallo habitual es que el número de <td> no coincida entre filas, lo que descuadra toda la rejilla.
En el trabajo real las tablas se reservan para datos tabulares de verdad (precios, especificaciones, horarios). Usarlas para maquetar la página es una práctica antigua que hoy se considera un error, porque estropea la accesibilidad y la adaptación a móvil.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.