Curso HTML – Módulo 8: Formularios en HTML

Los formularios no son solo una colección de cuadros de texto; son la interfaz de comunicación entre el cliente y el servidor. Un formulario mal diseñado puede hacer que pierdas una venta o un registro.

En este módulo, desglosaremos desde la arquitectura básica hasta las validaciones que evitan errores de datos.

1. La Arquitectura del Elemento <form>

El contenedor <form> define cómo se empaquetan y envían los datos. Es vital entender sus atributos de control:

• action: La URL de destino. Si se deja vacío, el formulario se envía a la misma página.

• method:

  • GET: Los datos viajan en la URL (ej. search?q=html). Límite de caracteres y nula seguridad para datos privados.

  • POST: Los datos viajan en el cuerpo de la petición. Es el estándar para crear contenido o iniciar sesión.

• autocomplete: Puede ser on u off. Útil para desactivar sugerencias en campos de tarjetas de crédito.

• novalidate: Un atributo booleano que indica al navegador que no valide el formulario al enviarlo (útil cuando queremos validar nosotros con JavaScript).

2. Elementos de Agrupación: Fieldset y Legend

Cuando un formulario es extenso, la carga cognitiva del usuario aumenta. HTML ofrece etiquetas semánticas para organizar visual y técnicamente los campos:

• <fieldset>: Agrupa campos relacionados. Los lectores de pantalla anuncian este grupo, dando contexto al usuario.

• <legend>: Es el pie de foto o título del fieldset. Siempre debe ser el primer hijo de un fieldset.

Tip Pro: Puedes deshabilitar un grupo entero de inputs simplemente añadiendo el atributo disabled a la etiqueta <fieldset>.

3. El Universo de los <input>

El elemento <input> es el más versátil de HTML. Su comportamiento depende totalmente del atributo type.

Entradas de Texto y Datos Básicos

Entrada de texto y datos básicos. Son los más comunes para capturar información alfanumérica.

• text: El valor por defecto. Una caja de texto simple de una sola línea.

• password: Los caracteres se ocultan (aparecen puntos o asteriscos) por seguridad.

• email: Valida que el texto introducido tenga formato de correo electrónico (contenga @ y un dominio).

• number: Solo permite números. Suele incluir flechas para subir/bajar el valor.

• tel: Diseñado para números de teléfono (útil para que los móviles muestren el teclado numérico).

• url: Valida que el texto tenga un formato de dirección web legal.

• search: Optimizado para cuadros de búsqueda (a veces incluye una ‘X’ para limpiar el texto).

Selección y Opciones

Ideales para cuando el usuario debe elegir entre opciones predefinidas.

• checkbox: Una casilla de verificación. Permite seleccionar varias opciones de un grupo.

• radio: Botones circulares. Permite seleccionar solo una opción de un grupo (deben compartir el mismo name).

• range: Un control deslizante (slider) para seleccionar un valor dentro de un rango numérico.

• color: Abre un selector de colores del sistema para elegir un tono en formato hexadecimal.

Fecha y Hora

Facilitan la entrada de datos temporales sin errores de formato.

• date: Un selector de calendario (Año, Mes, Día).

• datetime-local: Permite elegir fecha y hora (sin zona horaria).

• month: Selecciona un mes y un año específicos.

• week: Selecciona una semana específica del año.

• time: Un selector de hora (horas y minutos).

Botones y Acciones

Controlan el envío o la interacción con el formulario.

• submit: Un botón que envía los datos del formulario al servidor.

• button: Un botón genérico que no hace nada por defecto (se usa con JavaScript).

• reset: Restablece todos los campos del formulario a sus valores originales.

• image: Utiliza una imagen como botón de envío (requiere el atributo src).

Tipos Especiales

• file: Permite al usuario seleccionar uno o varios archivos de su equipo para subirlos. Recuerda usar enctype=’multipart/form-data’ en el <form>

• hidden: Un campo que no es visible para el usuario. Se usa para enviar datos técnicos al servidor que el usuario no necesita ver.

4. Atributos de Control y Validación Nativa

No necesitas JavaScript para validaciones básicas. HTML5 incluye atributos potentes:

• required: El campo no puede estar vacío.

• pattern: Permite usar Expresiones Regulares (Regex). Por ejemplo, pattern='[A-Z]{3}’ solo aceptará 3 letras mayúsculas.

• minlength / maxlength: Controla la cantidad de caracteres.

• step: Define el intervalo de salto en un type=’number’ o range.

5. Controles Multilínea y Listas

A veces, un <input> de una sola línea no es suficiente.

<textarea>: El editor de texto simple.

A diferencia del input, es una etiqueta de apertura y cierre. Su tamaño se controla con los atributos  rows (filas) y cols (columnas), aunque lo ideal es ajustarlo con CSS.

<select> y la evolución con <datalist>

• <select>: Crea una lista cerrada de opciones.

• <datalist>: Es una mezcla entre un <input> y un <select>. Permite al usuario escribir y, a medida que escribe, le sugiere opciones, pero también le permite ingresar un valor que no esté en la lista.

<label for="navegador">Elige tu navegador:</label>
<input list="navegadores" id="navegador" name="navegador">

<datalist id="navegadores">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

5. Accesibilidad (A11y) en Formularios

Un formulario inaccesible es un formulario roto.

1. Asociación Explícita: Siempre usa el atributo for en el <label> apuntando al id del input.

2. Instrucciones: Usa aria-describedby para conectar un input con un texto de ayuda adicional.

3. Contraste: Asegúrate de que los bordes de los inputs sean visibles (mínimo 3:1 de contraste respecto al fondo).

Ejemplo Maestro: Formulario de Soporte Técnico

Este ejemplo combina estructura avanzada, validación y accesibilidad.

<form action="/api/soporte" method="POST">
   <h2>Ticket de Soporte Técnico</h2>
   <fieldset>
      <legend>Identificación</legend>
      <div class="row">
         <label for="user-id">ID de Usuario (Solo números):</label>
         <input type="number" id="user-id" name="uid" required min="1000">
      </div>
      <div class="row">
         <label for="user-pass">PIN de Seguridad (4 dígitos):</label>
         <input type="password" id="user-pass" name="pin" pattern="[0-9]{4}" title="Debe contener exactamente 4 números">
      </div>
   </fieldset>
   <fieldset>
      <legend>Detalles del Incidente</legend>
      <label for="priority">Prioridad:</label>
      <input type="range" id="priority" name="urgencia" min="0" max="10" step="1">
      <label for="issue-type">Categoría:</label>
      <select id="issue-type" name="categoria">
         <optgroup label="Hardware">
            <option value="monitor">Monitor</option>
            <option value="teclado">Teclado/Mouse</option>
         </optgroup>
         <optgroup label="Software">
            <option value="os">Sistema Operativo</option>
            <option value="app">Aplicación Web</option>
         </optgroup>
      </select>
      <label for="desc">Descripción detallada:</label>
      <textarea id="desc" name="descripcion" rows="5" placeholder="Cuéntanos qué sucedió..."></textarea>
   </fieldset>
   <div class="actions">
      <button type="submit">Enviar Reporte</button>
      <button type="reset" style="background: #ccc;">Limpiar Formulario</button>
   </div>
</form>

Ejercicios Avanzados

1. El Inspector de Elementos: Abre un formulario de cualquier sitio web famoso (como Google o Facebook), usa la herramienta de inspección del navegador y localiza los atributos name y type. ¿Qué tipos de input están usando que no conocías?

2. Restricción de Archivos: Crea un formulario de subida de archivos que solo acepte imágenes .jpg o .png y que permita subir varios archivos a la vez (Investiga el atributo accept y multiple).

3. Formulario Dinámico: Crea un formulario donde uses un datalist para sugerir países, pero que el campo sea obligatorio.

Conclusión y Buenas Prácticas

• No reinventes la rueda: Antes de usar una librería de JavaScript para validar un email, usa type=’email’, ya que los navegadores modernos ya lo hacen por ti.

• Feedback Inmediato: Usa los pseudo-selectores de CSS :valid e :invalid para dar feedback visual (colores verdes/rojos) mientras el usuario escribe.

• Móvil Primero: Asegúrate de que tus inputs tengan un tamaño de fuente de al menos 16px en móviles para evitar que iOS haga un zoom automático molesto al enfocar el campo.

Módulo 7: Gestión de Colores en HTML

La correcta gestión de colores en HTML y CSS es fundamental para crear páginas web atractivas, accesibles y profesionales. Comprender cómo se definen, aplican y combinan los colores en proyectos web es una habilidad clave tanto para quienes inician como para quienes desean perfeccionar sus sitios.

En este módulo abordaremos los siguientes puntos:

• Entender cómo se definen y utilizan los colores en HTML.

• Aprender a trabajar con distintos formatos: nombres, RGB, HEX y HSL.

• Aplicar colores en elementos HTML mediante CSS, tanto en estilo en línea como en hojas de estilo externas.

Nombres y Valores de Colores

HTML define una lista estándar de nombres de colores que pueden usarse de forma directa en atributos de estilo CSS. Algunos ejemplos son: red, blue, green, orange, white, black.

Actualmente existen 147 nombres reconocidos oficialmente por HTML5, asegurando compatibilidad en todos los navegadores modernos.

<p style="color: red;">Este texto es de color rojo usando el nombre de color.</p>

Valores HEX (Hexadecimal)

El formato HEX especifica el color en base hexadecimal, combinando los canales Rojo, Verde y Azul (RGB).

#ff0000: rojo
#3498db: azul
<p style="color: #3498db;">Este texto es color azul en valor hexadecimal</p>

El valor HEX siempre se precede con # y se puede usar 3 dígitos (#rgb) o 6 dígitos (#rrggbb).

Formato RGB (Red, Green, Blue)

El formato RGB permite definir los tres componentes de color usando el siguiente formato: rgb(0, 0, 0), donde los valores de cada canal van de 0 a 255.

<p style="color: rgb(255, 0, 0);">Texto en rojo utilizando RGB.</p>

HSL define:

• Hue (matiz): de 0° a 360° (posición en el círculo cromático).

• Saturation (saturación): 0% (gris) hasta 100% (color vivo).

• Lightness (luminosidad): 0% (negro) hasta 100% (blanco).

<p style="color: hsl(0, 100%, 50%);">Texto en rojo usando HSL.</p>

Diferente formas de aplicar colores en HTML

Podemos modificar el color de texto o fondo directamente en la etiqueta usando el atributo style, conocido como estilos en linea.

<p style="color: #e67e22; background-color: #f9e79f;">
Texto naranja con fondo amarillo claro.
</p>

Mediante Hojas de Estilo (CSS)

<!DOCTYPE html> 
<html>
   <head>
      <title>Mi primera página web</title>
      <meta charset="UTF-8">
      <meta name="description" content="Una página de ejemplo">
      <link rel="stylesheet" href="style.css">
      <style>
         .card {
             background-color: red;
             color: white;
             font-size: 40px;
             padding: 10px;
             margin: 10px;
             border: 3px solid green;
         }
      </style>
   </head>
   <body>
     <div class="card">
        Titulo
     </div>
   </body>
</html>

Propiedades CSS comunes de color

• color: Color del texto.

• background-color: Color de fondo del elemento.

• Otros: border-color, outline-color.

Tabla de Conversión de Colores: HEX, RGB y HSL

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de Colores en HTML</title>
  <style>
    body {
      background-color: #f4f6f7;
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    h1 {
      color: #2e86c1;
    }
    .hex {
      color: #229954;
    }
    .rgb {
      color: rgb(255, 140, 0);
    }
    .hsl {
      color: hsl(240, 100%, 50%);
    }
    .gray {
      color: gray;
    }
  </style>
</head>
<body>

  <h1>Fundamentos de Colores en HTML</h1>

  <p class="hex">Este texto es verde utilizando un código HEX: <code>#229954</code></p>

  <p class="rgb">Este texto es naranja utilizando RGB: <code>rgb(255, 140, 0)</code></p>

  <p class="hsl">Este texto es azul utilizando HSL: <code>hsl(240, 100%, 50%)</code></p>

  <p class="gray">Este texto es gris utilizando una palabra clave: <code>gray</code></p>

  <p style="background-color: lightgrey; padding: 10px;">
    También puedes aplicar colores al fondo, como en este párrafo con <code>background-color: lightgrey;</code>
  </p>

</body>
</html>

Ejercicios Propuestos

1. Tabla de conversión de colores
   Crea una tabla en HTML mostrando al menos 8 colores representados en HEX, RGB y HSL.

2. Página multicolor
   Diseña una página sencilla donde cada sección tenga fondo y textos en diferentes colores aplicando HEX, RGB, HSL y nombres.

3. Personaliza menús, tarjetas o botones
   Usa propiedades de color CSS para lograr mejor contraste y accesibilidad visual, comprobando que los textos sean legibles sobre cualquier fondo.

Consejos y Buenas Prácticas

• Usa colores web seguros y que garanticen contraste adecuado.

• No abuses de los colores llamativos; busca armonía visual.

• Comprueba la accesibilidad usando herramientas como contrast checkers.

• Si accedes mediante CSS externo, organiza variables de color, por ejemplo, en la raíz del documento:

  :root {
     --primary: #2980b9;
     --secondary: #f1c40f;
  }
  body {
     background: var(--secondary);
     color: var(--primary);
  }

Módulo 6: Enlaces en HTML – Fundamentos de navegación web

Los enlaces son una de las bases más importantes de cómo navegamos en internet. Gracias a ellos, cualquier persona puede ir de una página a otra, moverse dentro de un mismo sitio o incluso acceder a diferentes recursos. Por eso, la etiqueta <a> es una de las más usadas en HTML.

En este módulo vamos a explorar a fondo cómo funcionan los enlaces. Empezaremos con lo más básico y poco a poco iremos viendo casos más avanzados, como enlaces internos, externos, a imágenes, a correos electrónicos e incluso cómo controlar dónde se abren.

Tipos de contenido/destino que puede tener un enlace HTML (<a>)

HTML nos da mucha flexibilidad para crear enlaces según lo que necesitemos. Aquí te explicamos los principales tipos:

Externos

Sirven para dirigir al usuario a otro sitio fuera del actual. Son muy útiles para citar fuentes, compartir documentación o llevar a otros recursos en línea.

<a href="https://www.mozilla.org" target="_blank">Visitar Mozilla</a>

Internos

Nos permiten movernos dentro de la misma página o entre secciones del mismo sitio. Para que funcionen, necesitamos usar identificadores (id) o rutas relativas.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de Enlace Interno</title>
</head>
<body>

  <h1>Bienvenido a mi página</h1>
  <p>En esta página aprenderás sobre HTML. Usa el siguiente enlace para saltar directamente a la sección 2:</p>

  <a href="#seccion2">Ir a la Sección 2: Enlaces</a>

  <h2 id="seccion1">Sección 1: Introducción</h2>
  <p>HTML es el lenguaje de marcado principal para la creación de páginas web.</p>

  <h2 id="seccion2">Sección 2: Enlaces</h2>
  <p>Los enlaces en HTML se crean con la etiqueta <code>&lt;a&gt;</code> y permiten conectar documentos entre sí.</p>

  <h2 id="seccion3">Sección 3: Imágenes</h2>
  <p>Las imágenes se insertan en HTML mediante la etiqueta <code>&lt;img&gt;</code>.</p>

</body>
</html>

Imágenes

Transforman imágenes en elementos interactivos, mejorando la interacción visual del usuario.

<a href="https://example.com">
   <img src="imagen.jpg" alt="Descripción de la imagen">
</a>

<a href="/perfil"> <i class="fas fa-user"></i> Perfil </a>

<a href="https://www.ejemplo.com">Ir a Ejemplo</a>

<a href="manual.pdf" download>Descargar Manual</a>

<a href="mailto:[email protected]">Enviar correo</a>

<a href="tel:+34600111222">Llamar al +34 600 111 222</a>

<a href="https://wa.me/34600111222?text=Hola,%20quiero%20más%20información">Hablar por WhatsApp</a>

<a href="#seccion2">Ir a la Sección 2</a>

<a href="https://maps.google.com/?q=40.4168,-3.7038" target="_blank">Ver en Google Maps</a>

<a href="https://www.youtube.com/watch?v=xyz" target="_blank">Ver video</a>

<a href="ftp://servidor.com/archivo.zip">Descargar vía FTP</a>

<a href="https://apps.apple.com/app/id123456">Abrir en App Store</a>
<a href="intent://abrirapp#Intent;scheme=miapp;package=com.ejemplo.app;end">Abrir app (Android)</a>

Diferencias entre Enlaces Relativos y Absolutos

Atributos Esenciales de la Etiqueta <a>

Comparación de Comportamientos con «target»

<!-- Mismo contexto -->
<a href="pagina.html" target="_self">Abrir aquí</a><!-- Nueva pestaña -->
<a href="https://frontsparrow.com" target="_blank">Abrir en nueva pestaña</a>

Ejemplo Práctico

<p>
   Visita
   <a href="https://tecnops.icu" target="_blank">
      Tecnops
   </a>
   para aprender más sobre HTML.
</p>

Creación de Menús de Navegación con Enlaces

Uno de los usos más comunes de los enlaces, son la creación de menús para navegar, tanto horizontales como verticales.

<nav>
   <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/servicios">Servicios</a></li>
      <li><a href="/contacto">Contacto</a></li>
   </ul>
</nav>

Consideraciones de Accesibilidad

• Uso de aria-label en elementos de navegación.

• Inclusión de title y alt para enlaces e imágenes enlazadas.

• Comprobación de contraste y legibilidad en enlaces visuales.

Estilización y Personalización

Los enlaces pueden personalizarse ampliamente mediante CSS

// Enlace
a {
   color: #007BFF;
   text-decoration: none;
}

// Ráton por encima del enlace
a:hover {
   text-decoration: underline;
}

// Ya fue visitado
a:visited {
   color: #00ff00;
}

// Durante el clic
a:active {
   color: #ff00ff;
}

1. Crear una página con enlaces diversos:

   • Enlace externo a un sitio de noticias.

   • Enlace interno a una sección inferior de la misma página.

   • Imagen que actúe como botón con enlace a otra URL.

   • Enlace mailto: a un correo ficticio.

2. Diseñar un menú de navegación:

   • Usar lista desordenada con enlaces.

   • Incluir un submenú anidado con dos niveles.

   • Aplicar estilos visuales personalizados al menú.

3. Simular un sitio multipágina:

   • Crear tres archivos HTML interconectados mediante enlaces relativos.

   • Añadir enlaces de regreso (backlinks) entre ellos.

Módulo 5: Listas en HTML – Estructuración avanzada de contenidos web

Las listas constituyen uno de los mecanismos fundamentales para organizar información en el desarrollo web moderno.

Más allá de su aparente simplicidad, ofrecen capacidades semánticas y técnicas que permiten desde la creación de interfaces de navegación complejas hasta la presentación estructurada de datos jerárquicos.

Clasificación de listas y contextos de uso

HTML define tres tipos esenciales de listas mediante elementos semánticamente diferenciados:

Listas Ordenadas (<ol>): Representan secuencias donde el orden de los ítems es crítico para el significado. Aplicaciones típicas incluyen:

• Procedimientos paso a paso

• Clasificaciones jerárquicas

• Instrucciones técnicas

Listas Desordenadas (<ul>): Ideal para agrupaciones temáticas sin orden inherente. Casos de uso frecuentes:

• Menús de navegación

• Listados de características

• Colecciones de elementos relacionados

Listas de Definición (<dl>): Estructuras pareadas término-descripción para glosarios y diccionarios técnicos:

• Glosarios terminológicos

• FAQs (Preguntas Frecuentes)

• Metadatos estructurados

Comparación de la sintaxis

<!-- Lista Ordenada -->
<ol type="I" start="5">
  <li>Elemento con numeración romana</li>
  <li>Iniciando desde el valor 5</li>
</ol>

<!-- Lista Desordenada con iconografía personalizada -->
<ul class="custom-bullets">
  <li>Elemento con viñeta SVG</li>
  <li>Indicador de progreso</li>
</ul>

<!-- Lista de Definición Multinivel -->
<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado hipertextual</dd>
  <dt>CSS</dt>
  <dd>
    <dl>
      <dt>Flexbox</dt>
      <dd>Sistema de diseño unidimensional</dd>
      <dt>Grid</dt>
      <dd>Sistema de diseño bidimensional</dd>
    </dl>
  </dd>
</dl>

Atributos Específicos para Listas Ordenadas

<ol type="a" start="3" reversed>
  <li>Elemento c</li>
  <li>Elemento b</li>
  <li>Elemento a</li>
</ol>

Genera una lista alfabética invertida comenzando desde la letra ‘c’

Anidamiento Jerárquico de Listas

La combinación de diferentes tipos de listas permite representar estructuras complejas:

<ol>
  <li>Desarrollo Frontend
    <ul>
      <li>HTML5 Semántico</li>
      <li>CSS3 Avanzado</li>
    </ul>
  </li>
  <li>Backend
    <ol type="I">
      <li>Node.js</li>
      <li>Bases de Datos</li>
    </ol>
  </li>
</ol>

Este patrón es fundamental para mapas de sitio, índices técnicos y sistemas de navegación multinivel

Sistemas de Navegación Avanzados

<nav aria-label="Navegación principal">
  <ul class="nav-menu">
    <li><a href="/">Inicio</a></li>
    <li class="dropdown">
      <a href="#servicios">Servicios</a>
      <ul class="submenu">
        <li><a href="/web">Desarrollo Web</a></li>
        <li><a href="/movil">Apps Móviles</a></li>
      </ul>
    </li>
  </ul>
</nav>

Combinación de listas para menús desplegables accesibles con soporte ARIA

Presentación de Datos Técnicos

<dl class="api-docs">
  <dt>Endpoint: /users</dt>
  <dd>
    <ul>
      <li>Método: GET</li>
      <li>Parámetros: 
        <ol>
          <li>limit: number</li>
          <li>offset: number</li>
        </ol>
      </li>
    </ul>
  </dd>
</dl>

Estructura para documentación API utilizando listas anidadas

Consideraciones de Accesibilidad

• Uso de roles ARIA list y listitem para SPA

• Textos alternativos para marcadores visuales

• Navegación por teclado con tabindex

Rendimiento en Listas Masivas

• Técnicas de virtualización para grandes conjuntos

• Paginación progresiva con Intersection Observer

• Estilización GPU-acelerada con will-change

Ejercicios Propuestos

Crear lista de pasos para montar PC con:

• Numeración romana mayúscula comenzando en V

• Tres niveles de anidamiento usando combinación de tipos

Construir menú de navegación con:

• Lista principal con viñetas cuadradas

• Submenús con círculos

• Tercer nivel sin viñetas (type="none")

Crear glosario informático con:

• 5 términos principales

• Dos definiciones alternativas por término

• Subdefiniciones usando listas anidadas

Recrear índice de libro técnico con:

• Secciones numeradas

• Subsecciones con viñetas

• Glosario incrustado

Módulo 4: Tablas en HTML para diseñar y organizar Datos

Las tablas en HTML son esenciales para organizar y presentar datos de manera clara y estructurada en la web.

Aunque hoy en día su uso principal se orienta a la visualización semántica de datos, entender sus fundamentos y técnicas avanzadas resulta vital para desarrollar interfaces accesibles y profesionalmente diseñadas.

En este artículo, abordaremos desde la creación de tablas simples hasta aspectos avanzados como la fusión de celdas, estructuras semánticas, accesibilidad y estilización con CSS.

Tanto si eres principiante como si buscas profundizar en el tema, aquí encontrarás conceptos y ejemplos prácticos que potenciarán tus habilidades.

¿Por Qué Usar Tablas en HTML?

Las tablas permiten:

• Organización Visual: Facilitan la disposición de datos en filas y columnas.
• Claridad y Accesibilidad: Mejoran la legibilidad de la información, tanto para usuarios como para motores de búsqueda.
• Versatilidad: Se pueden diseñar tablas simples o complejas, adaptándolas a las necesidades de cada proyecto.

Conceptos Básicos de las Tablas en HTML

Antes de adentrarnos en ejemplos prácticos, es importante familiarizarnos con algunos términos clave:

• Tabla: Contenedor principal definido con <table>, que organiza la información en filas y columnas.
• Fila: Cada línea de la tabla, creada con <tr>.
• Celda: Unidad de datos dentro de una fila. Se diferencia entre:
  • <td>: Celdas de datos.
  • <th>: Celdas de encabezado, que suelen destacar el contenido.
• Encabezado: Elemento que etiqueta el contenido de una columna o fila, facilitando la lectura y accesibilidad.

Creación de una Tabla Simple

La estructura básica para crear una tabla es muy sencilla. Veamos un ejemplo de una tabla de 2×2:

<table>
   <tr>
      <td>Col 1, Fila 1</td>
      <td>Col 2, Fila 1</td>
   </tr>
   <tr>
      <td>Col 1, Fila 2</td>
      <td>Col 2, Fila 2</td>
   </tr>
</table>

Este código genera una tabla básica en la que defines filas con <tr> y celdas con <td>.

Uso de Encabezados: La Etiqueta <th>

Para resaltar títulos o encabezados, usamos la etiqueta <th>. Esto no solo da énfasis visual (por defecto en negrita y centrado) sino que también mejora la accesibilidad.

<table border="1">
  <tr>
    <th>Día</th>
    <th>Actividad</th>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>Clases de HTML</td>
  </tr>
  <tr>
    <td>Martes</td>
    <td>Práctica de CSS</td>
  </tr>
</table>

Atributos de las Tablas

Aunque hoy se prefiere el uso de CSS para la presentación, es fundamental conocer algunos atributos heredados que pueden ser útiles o necesarios en ciertos casos:

• id y class: Identificadores y clases para aplicar estilos o manipular la tabla con JavaScript.
• style: Estilos en línea (aunque se recomienda usar hojas de estilo externas).
• border: Agrega un borde a la tabla (valor numérico; 0 para sin borde).
• cellpadding y cellspacing: Espaciado interno y entre celdas.
• summary: Proporciona un resumen de la tabla, útil para la accesibilidad.
• colspan y rowspan: Permiten que una celda abarque varias columnas o filas, respectivamente.
• headers: Asocia una celda de datos con sus correspondientes encabezados.

Fusionar Celdas: colspan y rowspan

El atributo colspan se utiliza para que una celda se extienda horizontalmente sobre varias columnas.
Ejemplo:

<table border="1">
  <tr>
    <th>Equipo</th>
    <th colspan="2">Detalles</th>
  </tr>
  <tr>
    <td>Real Madrid</td>
    <td>Victoria</td>
    <td>Derrota</td>
  </tr>
  <tr>
    <td>Liverpool</td>
    <td>Empate</td>
    <td>Victoria</td>
  </tr>
</table>

Con rowspan, una celda puede abarcar varias filas.
Ejemplo:

<table border="1">
  <tr>
    <th>Equipo</th>
    <th>Detalle</th>
    <th>Resultado</th>
  </tr>
  <tr>
    <td rowspan="2">Liverpool</td>
    <td>Partido 1</td>
    <td>Victoria</td>
  </tr>
  <tr>
    <td>Partido 2</td>
    <td>Empate</td>
  </tr>
</table>

Estructura Semántica: <thead>, <tbody>, <tfoot> y <caption>

Dividir la tabla en secciones semánticas mejora la accesibilidad y facilita su mantenimiento:

• <caption>: Proporciona un título descriptivo a la tabla.
• <thead>: Agrupa los encabezados.
• <tbody>: Contiene el cuerpo principal de datos.
• <tfoot>: Agrupa el pie de la tabla (útil para totales o notas).

Ejemplo Completo:

<table border="1">
  <caption>Tabla de Posiciones</caption>
  <thead>
    <tr>
      <th scope="col">Equipo</th>
      <th scope="col">Partidos Jugados</th>
      <th scope="col">Puntos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Real Madrid</td>
      <td>38</td>
      <td>88</td>
    </tr>
    <tr>
      <td>Liverpool</td>
      <td>38</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Promedio de Puntos</td>
      <td>86.5</td>
    </tr>
  </tfoot>
</table>

Uso del Atributo scope para Mejorar la Accesibilidad

El atributo scope indica si un encabezado se relaciona con una fila, columna o grupo, ayudando a los lectores de pantalla a interpretar la tabla.

• scope="col": Encabezado para columnas.
• scope="row": Encabezado para filas.
• scope="colgroup" y scope="rowgroup": Encabezados para grupos de columnas o filas.

Ejemplo con scope="col":

<table border="1">
  <caption>Resultados del Partido</caption>
  <tr>
    <th scope="col">Estadística</th>
    <th scope="col">Local</th>
    <th scope="col">Visitante</th>
  </tr>
  <tr>
    <td>Goles</td>
    <td>2</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Tiradas</td>
    <td>10</td>
    <td>5</td>
  </tr>
</table>

Ejemplo con scope="row":

<table border="1">
  <caption>Horario de Clases</caption>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
      <th>Miércoles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">8:00 - 9:00</th>
      <td>Matemáticas</td>
      <td>Lenguaje</td>
      <td>Inglés</td>
    </tr>
    <tr>
      <th scope="row">9:00 - 10:00</th>
      <td>Física</td>
      <td>Química</td>
      <td>Educación Física</td>
    </tr>
  </tbody>
</table>

Tablas Anidadas

Las tablas anidadas consisten en insertar una tabla dentro de otra, lo que puede ser útil para mostrar información jerárquica o detallada en contextos específicos.

Ejemplo de Tabla Anidada:

<table border="1">
  <tr>
    <th>Producto</th>
    <th>Detalles</th>
  </tr>
  <tr>
    <td>Portátil</td>
    <td>
      <table border="1">
        <tr>
          <td>Marca</td>
          <td>XYZ</td>
        </tr>
        <tr>
          <td>Modelo</td>
          <td>Alpha</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>
      <table border="1">
        <tr>
          <td>Marca</td>
          <td>ABC</td>
        </tr>
        <tr>
          <td>Modelo</td>
          <td>Beta</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Accesibilidad en Tablas

La accesibilidad es clave en el desarrollo web. Al optimizar tus tablas, consideras a usuarios con discapacidades visuales o motoras. Algunas buenas prácticas incluyen:

• Estructura semántica: Utiliza <caption>, <thead>, <tbody>, <tfoot> y atributos como scope para clarificar la relación entre datos.
• Etiquetado claro: Asegúrate de que cada encabezado y celda esté correctamente etiquetado.
• Contraste y tipografía: Usa colores y fuentes que faciliten la lectura.
• Pruebas de accesibilidad: Herramientas como WAVE ayudan a identificar mejoras.

Estilos con CSS para Tablas

El aspecto visual de una tabla se puede mejorar drásticamente con CSS. Aquí un ejemplo de estilos básicos:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

caption {
  font-weight: bold;
  margin-bottom: 8px;
}

Estos estilos aseguran que:

• Los bordes se colapsen para evitar espacios dobles.
• Se añada un espaciado uniforme en celdas.
• Se aplique un fondo alterno a filas pares para mejorar la legibilidad.
• El título de la tabla resalte mediante <caption>.

Ejercicios Propuestos

Poner en práctica lo aprendido es fundamental para consolidar los conocimientos. Aquí te proponemos algunos ejercicios:

Tabla de Horario de Clases:

• • Objetivo: Crear una tabla que represente el horario semanal de clases.
  • Requisitos:
    • Incluir encabezados para los días de la semana.
    • Usar <thead> para la cabecera y <tbody> para el contenido.
    • Aplicar estilos CSS para mejorar la legibilidad.

Uso de colspan y rowspan:

• • Objetivo: Diseñar una tabla de resultados deportivos que utilice ambos atributos.
  • Requisitos:
    • Utilizar colspan para agrupar encabezados de estadísticas.
    • Emplear rowspan para fusionar celdas cuando un equipo tenga datos que se extiendan en varias filas.

Tabla Semántica y Accesible:

• • Objetivo: Crear una tabla con datos de empleados o productos.
  • Requisitos:
    • Incluir un <caption> descriptivo.
    • Dividir la tabla en <thead>, <tbody> y <tfoot>.
    • Utilizar el atributo scope en los encabezados para definir si pertenecen a filas o columnas.

Tabla Anidada:

• • Objetivo: Diseñar una tabla principal que contenga información general (por ejemplo, productos) e insertar tablas anidadas en una o varias celdas para mostrar detalles específicos (como especificaciones técnicas).
  • Requisitos:
    • Asegurarte de que la estructura de la tabla principal se mantenga clara y funcional.

Módulo 3: Elementos Básicos de HTML

Bienvenido al Módulo 3 de HTML, donde profundizaremos en los elementos esenciales que forman la base de cualquier página web. Este módulo está diseñado para proporcionarte una comprensión completa de cómo estructurar y estilizar contenido utilizando HTML y CSS.

Aprenderás a manejar encabezados, párrafos, formateo de texto, y a utilizar contenedores para organizar tu contenido de manera lógica y accesible.

Además, exploraremos cómo aplicar estilos internos con CSS, insertar imágenes, crear mapas de imagen, y usar iframes para integrar contenido externo.

Al finalizar este módulo, estarás equipado con las habilidades necesarias para crear páginas web visualmente atractivas y funcionales.

Diferentes herramientas necesarias

Antes de profundizar en los elementos esenciales de HTML, es fundamental asegurarse de que sabes cómo crear y visualizar archivos HTML, CSS y JavaScript, y para ello, puedes utilizar un editor de código en tu ordenador o una herramienta en línea.

A continuación, te proporcionamos una guía para ambas opciones:

1. Uso de Visual Studio Code (VS Code) en tu ordenador:

Visual Studio Code es un editor de código fuente gratuito y potente, ideal para el desarrollo web.

Pasos para comenzar:

• Instalación:
  • Descarga VS Code desde su sitio oficial.
  • Sigue las instrucciones de instalación según tu sistema operativo.
• Creación de archivos:
  • Abre VS Code.
  • Crea una nueva carpeta para tu proyecto y ábrela en VS Code.
  • Dentro de esta carpeta, crea los archivos necesarios, por ejemplo index.html
• Visualización:
  • Guarda los archivos.
  • Abre index.html en tu navegador preferido para ver el resultado.

2. Uso de una herramienta en línea:

Si prefieres no instalar software adicional, existen editores de código en línea que te permiten escribir y probar HTML, CSS y JavaScript directamente desde tu navegador.

Opción recomendada:

• CodePen:
  • Visita CodePen.
  • Crea una cuenta gratuita para guardar tus proyectos.
  • Inicia un nuevo «Pen» donde podrás escribir tu código HTML, CSS y JavaScript en paneles separados y ver una vista previa en tiempo real.

Con estas herramientas, estarás preparado para profundizar en los elementos básicos de HTML y comenzar a construir páginas web estructuradas y funcionales.

Encabezados y Párrafos

Los encabezados en HTML son esenciales para estructurar el contenido de una página web de manera jerárquica y accesible. Los seis niveles de encabezados, desde <h1> hasta <h6>, permiten a los desarrolladores organizar la información de mayor a menor importancia.

Esto no solo mejora la legibilidad para los usuarios, sino que también ayuda a los motores de búsqueda a entender la estructura y el contenido de la página, lo cual es crucial para el SEO.

<h1>Título Principal</h1>
<h2>Subtítulo Importante</h2>
<h3>Subsección Relevante</h3>
<h4>Detalle Adicional</h4>
<h5>Información Complementaria</h5>
<h6>Nota Menor</h6>
<p>Este es un párrafo de ejemplo que proporciona información adicional sobre el tema principal. Los párrafos se utilizan para agrupar bloques de texto y hacer que el contenido sea más fácil de leer y entender.</p>

Atributos Comunes:

• id: Identificador único para el encabezado.
• class: Clases CSS para aplicar estilos.
• style: Estilos en línea para el encabezado.
• title: Texto informativo que aparece al pasar el ratón sobre el encabezado.

Fuentes y Formateo

HTML ofrece una variedad de etiquetas para cambiar el estilo del texto, mejorando así la legibilidad y el énfasis en partes específicas del contenido. Algunas de las etiquetas más utilizadas incluyen:

• <strong>: Utilizado para texto en negrita, indicando importancia semántica.
• <em>: Utilizado para texto en cursiva, enfatizando el contenido.
• <small>: Utilizado para texto más pequeño, generalmente para anotaciones o texto secundario.
• <mark>: Utilizado para resaltar texto, similar a un marcador.
• <del>: Utilizado para texto tachado, indicando eliminación o corrección.
• <ins>: Utilizado para texto subrayado, indicando inserción o adición.
• <sup> y <sub>: Utilizados para texto en superíndice y subíndice, respectivamente.
• <code>: Utilizado para mostrar código en línea.
• <pre>: Utilizado para mostrar texto preformateado, respetando espacios y saltos de línea.
• <blockquote>: Utilizado para citas largas o bloques de texto citado.
• <q>: Utilizado para citas cortas en línea.
• <cite>: Utilizado para el título de una obra citada.
• <b>: Utilizado para texto en negrita sin importancia semántica.
• <i>: Utilizado para texto en cursiva sin énfasis semántico.
• <u>: Utilizado para texto subrayado sin importancia semántica.

<p>Este texto es <strong>importante</strong> y este es <em>enfatizado</em>. <small>Texto secundario.</small></p>
<p><mark>Texto resaltado</mark> y <del>texto tachado</del>.</p>
<p>Esto es un ejemplo de texto con <sup>superíndice</sup> y <sub>subíndice</sub>.</p>
<p>Código en línea: <code>console.log('Hola Mundo');</code></p>
<pre>Texto preformateado que respeta espacios y saltos de línea.</pre>
<blockquote cite="https://www.example.com">
   <p>Esta es una cita larga de una fuente externa.</p>
</blockquote>
<p>Esta es una <q>cita corta</q> en línea.</p>
<p><cite>Título de la obra citada</cite></p>
<p><b>Texto en negrita</b> y <i>texto en cursiva</i> sin énfasis semántico.</p>
<p><u>Texto subrayado</u> sin importancia semántica.</p>

Bloques y Estructuras de Contenido

Los contenedores en HTML son fundamentales para organizar el contenido en bloques lógicos y semánticos. Cada contenedor tiene un propósito específico y ayuda a mejorar la accesibilidad y la estructura del documento:

• <div>: Contenedor genérico utilizado para agrupar elementos y aplicar estilos CSS.
• <section>: Define una sección temática dentro del contenido, como una sección de un capítulo.
• <article>: Representa una composición independiente y autocontenida, como un artículo de blog o una publicación.
• <aside>: Contenido tangencialmente relacionado con el contenido principal, como barras laterales o notas.
• <header>: Encabezado de una sección o página, generalmente contiene títulos y logotipos.
• <footer>: Pie de página de una sección o página, generalmente contiene información de derechos de autor y enlaces de navegación.
• <nav>: Contiene enlaces de navegación principales.
• <main>: Contenido principal de la página, único en el documento.
• <figure> y <figcaption>: Utilizados para ilustraciones o diagramas con una leyenda.

<div class="contenedor">
   <header>
      <h1>Bienvenido a mi Sitio Web</h1>
      <nav>
         <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#acerca">Acerca</a></li>
            <li><a href="#contacto">Contacto</a></li>
         </ul>
      </nav>
   </header>
   <main>
      <section>
         <h2>Sección de Ejemplo</h2>
         <p>Contenido de la sección.</p>
      </section>
      <article>
         <h2>Artículo de Ejemplo</h2>
         <p>Contenido del artículo.</p>
      </article>
      <aside>
         <p>Información adicional o relacionada.</p>
      </aside>
      <figure>
         <img src="imagen.jpg" alt="Descripción de la imagen"> 
         <figcaption>Leyenda de la imagen.</figcaption>
      </figure>
   </main>
   <footer>
      <p>Derechos reservados © 2025</p>
   </footer>
</div>

Hojas de Estilo en HTML (CSS Interno)

Las hojas de estilo en cascada (CSS) se pueden incluir directamente en un documento HTML utilizando la etiqueta <style>. Esto es útil para aplicar estilos específicos a elementos HTML sin necesidad de un archivo CSS externo. Es ideal para estilos pequeños o específicos de una página, y permite una rápida personalización del diseño.

<head>
   <style>
      body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      line-height: 1.6;
      }
      .destacado {
      color: blue;
      font-weight: bold;
      background-color: #e0e0e0;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 20px;
      }
      header, footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1em;
      }
      nav ul {
      list-style-type: none;
      padding: 0;
      }
      nav ul li {
      display: inline;
      margin-right: 10px;
      }
      nav ul li a {
      color: white;
      text-decoration: none;
      }
   </style>
</head>
<body>
   <header>
      <h1>Título del Sitio Web</h1>
   </header>
   <nav>
      <ul>
         <li><a href="#inicio">Inicio</a></li>
         <li><a href="#acerca">Acerca</a></li>
         <li><a href="#contacto">Contacto</a></li>
      </ul>
   </nav>
   <p class="destacado">Este párrafo está destacado y tiene estilos adicionales.</p>
   <footer>
      <p>Pie de página con estilo.</p>
   </footer>
</body>

Citas y Comentarios

Las citas son una excelente manera de incluir texto de otras fuentes en tu contenido. HTML proporciona dos etiquetas principales para citas:

• <blockquote>: Utilizado para citas largas o bloques de texto citado. Puede incluir un atributo cite para especificar la fuente de la cita.
• <q>: Utilizado para citas cortas en línea.

Los comentarios en HTML se utilizan para dejar notas en el código que no se muestran en el navegador. Son útiles para documentar el código, facilitar el mantenimiento y colaborar con otros desarrolladores.

<blockquote cite="https://www.example.com">
   <p>Esta es una cita larga de una fuente externa. Las citas largas se utilizan para bloques de texto citado.</p>
</blockquote>
<p>Esta es una <q>cita corta</q> en línea, utilizada para texto breve citado.</p>
<!-- Este es un comentario que explica el propósito del siguiente bloque de código -->
<p>Este párrafo sigue al comentario anterior.</p>

Manejo de Colores

HTML permite definir colores utilizando diferentes sistemas de color, cada uno con sus propias ventajas:

• RGB: Combinación de rojo, verde y azul, especificada como rgb(r, g, b), donde cada valor puede ir de 0 a 255. También se puede usar rgba(r, g, b, a) para incluir la transparencia (alpha).
• HEX: Código hexadecimal, especificado como #RRGGBB, donde cada par de dígitos representa un valor de color en hexadecimal. También se puede usar #RGB para colores abreviados.
• HSL: Matiz, saturación y luminosidad, especificada como hsl(h, s, l), donde h es el matiz (0-360), s es la saturación (0-100%) y l es la luminosidad (0-100%). También se puede usar hsla(h, s, l, a) para incluir la transparencia.
• Nombres de Colores: HTML también soporta nombres de colores predefinidos, como red, blue, green, etc.

<p style="color: rgb(255, 0, 0);">Texto en rojo RGB.</p>
<p style="color: rgba(0, 255, 0, 0.5);">Texto en verde RGBA con transparencia.</p>
<p style="color: #0000FF;">Texto en azul HEX.</p>
<p style="color: #0F0;">Texto en verde HEX abreviado.</p>
<p style="color: hsl(240, 100%, 50%);">Texto en azul HSL.</p>
<p style="color: hsla(120, 100%, 50%, 0.5);">Texto en verde HSLA con transparencia.</p>
<p style="color: red;">Texto en rojo utilizando nombre de color.</p>

Inserción de Imágenes

La etiqueta <img> se utiliza para insertar imágenes en una página web. Sus atributos principales incluyen:

• src: Ruta de la imagen. Puede ser una URL relativa o absoluta.
• alt: Texto alternativo que describe la imagen, crucial para la accesibilidad y el SEO.
• width y height: Dimensiones de la imagen, especificadas en píxeles o porcentajes.
• title: Texto que aparece como información sobre herramientas al pasar el ratón sobre la imagen.
• loading: Atributo que puede ser lazy para cargar la imagen solo cuando esté cerca de la vista.

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200" title="Título de la imagen" loading="lazy" />

Mapas de Imagen e Iframes

Los mapas de imagen permiten definir áreas clicables dentro de una imagen utilizando las etiquetas <map> y <area>. Esto es útil para crear interacciones específicas en diferentes partes de una imagen. Los iframes, definidos con <iframe>, permiten insertar contenido externo, como videos, mapas interactivos o incluso otras páginas web.

<img src="mapa.jpg" usemap="#mapa-ejemplo" alt="Mapa de ejemplo" />
<map name="mapa-ejemplo">
   <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example" />
   <area shape="circle" coords="100,100,50" href="https://www.example.org" alt="Example Org" />
   <area shape="poly" coords="10,10,50,50,30,70" href="https://www.example.net" alt="Example Net" />
</map>
<iframe src="https://www.example.com" width="600" height="400" title="Contenido externo" allowfullscreen></iframe>

Elementos de Frase y Metaetiquetas

Los elementos de frase como <span> se utilizan para aplicar estilos a partes específicas del texto sin afectar su estructura. Las metaetiquetas, definidas con <meta>, proporcionan información sobre el documento HTML, como su codificación, descripción y configuración de la vista (viewport).

<img src="mapa.jpg" usemap="#mapa-ejemplo" alt="Mapa de ejemplo" />
<map name="mapa-ejemplo">
<area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example" />
<area shape="circle" coords="100,100,50" href="https://www.example.org" alt="Example Org" />

Clases e Identificadores

Las clases e identificadores (IDs) se utilizan para aplicar estilos CSS a elementos específicos. Las clases se definen con el atributo class y se pueden reutilizar en múltiples elementos. Los IDs, definidos con id, son únicos para cada elemento en una página y se utilizan para estilos o scripts específicos.

<style>
   .destacado {
   color: blue;
   font-weight: bold;
   background-color: #e0e0e0;
   padding: 10px;
   border-radius: 5px;
   margin-bottom: 20px;
   }
   #titulo-principal {
   font-size: 24px;
   text-align: center;
   margin-bottom: 20px;
   text-transform: uppercase;
   }
   .oculto {
   display: none;
   }
</style>
<h1 id="titulo-principal">Título Principal</h1>
<p class="destacado">Este párrafo está destacado y tiene estilos adicionales.</p>
<p class="destacado oculto">Este párrafo está oculto debido a la clase adicional.</p>

Fondo y Estilos de Fondo

Los estilos de fondo se pueden aplicar a elementos HTML utilizando propiedades CSS como background-color, background-image, background-repeat, background-size, background-position, background-attachment, y background-blend-mode. Estos permiten personalizar el aspecto visual de una página web, creando fondos atractivos y dinámicos.

<style>
   body {
   background-color: #f0f0f0;
   background-image: url('fondo.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   background-blend-mode: multiply;
   }
   .contenedor {
   background-color: rgba(255, 255, 255, 0.8);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
</style>
<div class="contenedor">
   <p>Este contenedor tiene un fondo semitransparente, redondeado y con sombra.</p>
</div>

Listas

HTML proporciona varias etiquetas para crear listas, que son esenciales para organizar y presentar información de manera clara y accesible:

• <ul>: Lista desordenada, utilizada para elementos no secuenciales.
• <ol>: Lista ordenada, utilizada para elementos secuenciales.
• <li>: Elemento de lista, utilizado dentro de <ul> o <ol>.
• <dl>: Lista de descripción, utilizada para pares de término-descripción.
• <dt>: Término en una lista de descripción.
• <dd>: Descripción en una lista de descripción.

<ul>
   <li>Elemento de lista desordenada 1</li>
   <li>Elemento de lista desordenada 2</li>
</ul>
<ol>
   <li>Elemento de lista ordenada 1</li>
   <li>Elemento de lista ordenada 2</li>
</ol>
<dl>
   <dt>Término 1</dt>
   <dd>Descripción del término 1</dd>
   <dt>Término 2</dt>
   <dd>Descripción del término 2</dd>
</dl>

Tablas

Las tablas en HTML se utilizan para presentar datos estructurados en filas y columnas. Las etiquetas principales incluyen:

• <table>: Define una tabla.
• <tr>: Define una fila en una tabla.
• <th>: Define una celda de encabezado en una tabla.
• <td>: Define una celda de datos en una tabla.
• <thead>: Agrupa el contenido del encabezado de una tabla.
• <tbody>: Agrupa el contenido del cuerpo de una tabla.
• <tfoot>: Agrupa el contenido del pie de una tabla.
• <caption>: Define un título para una tabla.
• <colgroup> y <col>: Definen grupos y propiedades de columnas.

<table>
   <caption>Tabla de Ejemplo</caption>
   <thead>
      <tr>
         <th>Encabezado 1</th>
         <th>Encabezado 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Dato 1</td>
         <td>Dato 2</td>
      </tr>
      <tr>
         <td>Dato 3</td>
         <td>Dato 4</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>Pie 1</td>
         <td>Pie 2</td>
      </tr>
   </tfoot>
</table>

Formularios

Los formularios en HTML se utilizan para recopilar datos de los usuarios y enviarlos a un servidor para su procesamiento. Las etiquetas principales incluyen:

• <form>: Define un formulario.
• <input>: Campo de entrada para datos del usuario.
• <textarea>: Área de texto para entrada multilínea.
• <button>: Botón clicable.
• <select> y <option>: Lista desplegable de opciones.
• <label>: Etiqueta para un campo de entrada.
• <fieldset> y <legend>: Agrupan campos relacionados y proporcionan un título.

<form action="/submit" method="post">
   <fieldset>
      <legend>Información Personal</legend>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <label for="mensaje">Mensaje:</label>
      <textarea id="mensaje" name="mensaje" rows="4" cols="50"></textarea>
      <label for="opciones">Opciones:</label>
      <select id="opciones" name="opciones">
         <option value="opcion1">Opción 1</option>
         <option value="opcion2">Opción 2</option>
      </select>
      <button type="submit">Enviar</button>
   </fieldset>
</form>

Enlaces

Los enlaces en HTML se definen con la etiqueta <a> y son fundamentales para la navegación entre páginas y recursos. Los atributos principales incluyen:

• href: URL del recurso enlazado.
• target: Contexto de navegación para el enlace (_blank, _self, _parent, _top).
• download: Indica que el recurso enlazado debe descargarse.
• rel: Relación entre el documento actual y el recurso enlazado.
• title: Texto informativo que aparece al pasar el ratón sobre el enlace.

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="Visitar Example">Visitar Example</a>
<a href="descargar.pdf" download>Descargar archivo</a>

Multimedia

HTML soporta la inclusión de multimedia como audio y video utilizando las etiquetas <audio> y <video>. Estas etiquetas permiten incrustar contenido multimedia directamente en la página.

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   Tu navegador no soporta la etiqueta de audio.
</audio>
<video width="320" height="240" controls>
   <source src="video.mp4" type="video/mp4">
   Tu navegador no soporta la etiqueta de video.
</video>

Accesibilidad

La accesibilidad es crucial para garantizar que todos los usuarios, incluidos aquellos con discapacidades, puedan acceder y utilizar el contenido web. Algunas prácticas recomendadas incluyen:

• Utilizar etiquetas semánticas adecuadas (<header>, <nav>, <main>, <footer>, etc.).
• Proporcionar texto alternativo para imágenes con el atributo alt.
• Utilizar etiquetas <label> para campos de formulario.
• Proporcionar transcripciones y subtítulos para contenido multimedia.
• Utilizar atributos ARIA (Accessible Rich Internet Applications) para mejorar la accesibilidad de componentes dinámicos.

<img src="imagen.jpg" alt="Descripción detallada de la imagen">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" aria-required="true">
<button aria-label="Enviar formulario">Enviar</button>

Ejercicios propuestos

• Estructura Básica de HTML:
  • Crea un documento HTML con una estructura completa que incluya <header>, <nav>, <main>, y <footer>.
  • Añade comentarios explicativos en cada sección del código.

• Uso de Encabezados y Párrafos:
  • Escribe un documento HTML que utilice todos los niveles de encabezados (<h1> a <h6>) y varios párrafos (<p>).
  • Aplica estilos CSS internos para cambiar el color y el tamaño de los encabezados.

• Formateo de Texto:
  • Crea un documento HTML que incluya texto en negrita (<strong>), cursiva (<em>), subrayado (<u>), y resaltado (<mark>).
  • Añade una cita larga utilizando <blockquote> y una cita corta con <q>.

• Inserción de Imágenes:
  • Inserta varias imágenes en un documento HTML utilizando la etiqueta <img>.
  • Aplica atributos como alt, width, height, y title.
  • Crea un mapa de imagen con áreas clicables utilizando <map> y <area>.

• Uso de Listas:
  • Crea una lista desordenada (<ul>) y una lista ordenada (<ol>) con al menos cinco elementos cada una.
  • Añade una lista de descripción (<dl>) con términos (<dt>) y descripciones (<dd>).

• Formularios:
  • Diseña un formulario de contacto que incluya campos de texto, correo electrónico, área de texto, y una lista desplegable.
  • Utiliza etiquetas <label> para cada campo y agrupa los campos relacionados con <fieldset> y <legend>.

• Accesibilidad:
  • Revisa un documento HTML existente y añade atributos alt a todas las imágenes.
  • Asegúrate de que todos los campos de formulario tienen etiquetas (<label>) asociadas.
  • Añade atributos ARIA donde sea necesario para mejorar la accesibilidad.

• Estilos de Fondo:
  • Aplica estilos de fondo a diferentes elementos utilizando propiedades CSS como background-color, background-image, y background-size.
  • Experimenta con background-attachment y background-blend-mode para crear efectos visuales.

Módulo 2: Fundamentos de HTML

En este módulo, exploraremos los fundamentos esenciales de HTML, el lenguaje base de la web. Aprenderás cómo estructurar correctamente un documento HTML, entenderás la función de etiquetas clave como <html>, <head> y <body>, y conocerás la importancia de los atributos y comentarios en el código.

Este conocimiento te permitirá construir páginas web bien organizadas, semánticamente correctas y listas para ser estilizadas con CSS o mejoradas con JavaScript. Al finalizar, pondrás en práctica lo aprendido creando tu propio documento HTML completo. ¡Comencemos a construir la web desde sus cimientos!

Estructura de un Documento HTML

Un documento HTML tiene una estructura clara y bien definida:

• <!DOCTYPE html>: Declara el tipo de documento y la versión de HTML (HTML5 en este caso).
• <html>: Es el contenedor principal de todo el contenido.
• <head>: Contiene metadatos como el título, la codificación de caracteres y enlaces a recursos externos.
• <body>: Aquí va el contenido visible de la página, como texto, imágenes y enlaces.

Ejemplo de estructura básica:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Fundamentos de HTML</title>
   </head>
   <body>
      <h1>Título Principal</h1>
      <p>Este es un párrafo de ejemplo.</p>
   </body>
</html>

Etiquetas, Elementos y Atributos

• Etiquetas: Palabras clave rodeadas por corchetes angulares (< >). Por ejemplo, <p> para párrafos y <h1> para títulos.
• Elementos: Compuestos por una etiqueta de apertura, contenido y una etiqueta de cierre. Por ejemplo: <h1>Título</h1>.
• Atributos: Proporcionan información adicional sobre los elementos. Por ejemplo, class, id, src, etc.

Ejemplo con atributos:

<p class="destacado">Este es un párrafo con una clase.</p>
<img src="imagen.jpg" alt="Descripción de la imagen" />

Comentarios en HTML

Los comentarios son útiles para documentar el código y hacer anotaciones que no se muestran en el navegador.

La sintaxis es la siguiente:

<!-- Este es un comentario en HTML -->

Ejemplo práctico:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Comentarios en HTML</title>
   </head>
   <body>
      <!-- Este es un comentario que describe la sección principal --> 
      <h1>Título Principal</h1>
      <p>Este es un párrafo con <span style="color: blue;">texto resaltado</span>.</p>
   </body>
</html>

Ejemplo Práctico: Crear un Documento HTML Completo

Vamos a crear un documento HTML que incluya:

• Una estructura completa.
• Comentarios explicativos.
• Atributos en las etiquetas.

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Fundamentos de HTML</title>
   </head>
   <body>
      <!-- Encabezado de la página --> 
      <header>
         <h1 id="titulo-principal">Bienvenido a mi página</h1>
      </header>
      <!-- Contenido principal --> 
      <main>
         <p class="destacado">Este es un párrafo con una clase.</p>
         <img src="imagen.jpg" alt="Descripción de la imagen" /> 
      </main>
      <!-- Pie de página --> 
      <footer>
         <p>Derechos reservados © 2025</p>
      </footer>
   </body>
</html>

Ejercicios Propuestos

Crear un Documento HTML:

• Escribe un documento HTML con una estructura completa.
• Añade comentarios que expliquen cada sección del código.

Experimentar con Atributos:

• Usa atributos como class, id, y src en diferentes etiquetas.
• Observa cómo afectan al comportamiento o estilo de los elementos.

Práctica de Comentarios:

• Documenta un código HTML existente usando comentarios para explicar su funcionalidad.

Módulo 1: Introducción a HTML

Bienvenido al primer módulo del curso de HTML. En esta sección, descubrirás qué es HTML, cómo ha evolucionado a lo largo del tiempo y por qué es la base fundamental del desarrollo web.

Exploraremos la estructura básica de un documento HTML, aprenderemos sobre etiquetas, elementos y atributos esenciales, y entenderemos cómo HTML interactúa con otras tecnologías como CSS y JavaScript.

A medida que avances, aplicarás estos conceptos en ejercicios prácticos que te ayudarán a construir tus propias páginas web desde cero. ¡Es hora de dar el primer paso en el mundo del desarrollo web!

Definición y Concepto de HTML

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje estándar utilizado para crear y estructurar páginas web.

En esta introducción a HTML, aprenderás los conceptos básicos sobre este lenguaje de marcado utilizado para estructurar páginas web.

Es un lenguaje de marcado, lo que significa que utiliza etiquetas para definir elementos dentro de un documento, como títulos, párrafos, imágenes, enlaces, etc.

• Etiquetas: Las etiquetas son palabras clave rodeadas por corchetes angulares (< >). Por ejemplo, <p> define un párrafo y </p> lo cierra.
• Elementos: Un elemento HTML está compuesto por una etiqueta de apertura, contenido y una etiqueta de cierre. Por ejemplo: <h1>Título</h1>.
• Atributos: Proporcionan información adicional sobre los elementos. Por ejemplo, <img src="imagen.jpg" alt="Descripción">.

Ejemplo básico de un documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primera página web</title>
  </head>
  <body>
    <h1>Bienvenido a mi página</h1>
    <p>Este es un párrafo de ejemplo.</p>
  </body>
</html>

Historia y Evolución de HTML

HTML fue creado por Tim Berners-Lee en 1991 como una forma de compartir documentos científicos en la web. Desde entonces, ha evolucionado significativamente:

• HTML 2.0 (1995): Primera versión estandarizada por el IETF (Internet Engineering Task Force).
• HTML 3.2 (1997): Introdujo mejoras como tablas y applets.
• HTML 4.01 (1999): Añadió soporte para hojas de estilo (CSS) y scripting.
• XHTML (2000): Una versión más estricta y basada en XML.
• HTML5 (2014): La versión más reciente y poderosa, que incluye soporte para multimedia, gráficos y aplicaciones web complejas.

Hitos importantes:

• 1991: Tim Berners-Lee crea HTML.
• 1995: Lanzamiento de HTML 2.0.
• 2014: HTML5 se convierte en un estándar oficial.

Importancia de HTML en el Desarrollo Web

HTML es la base de cualquier sitio web. Sin HTML, no habría estructura para mostrar contenido en la web. Es el primer paso en el desarrollo web y se complementa con:

• CSS (Cascading Style Sheets): Para dar estilo y diseño a las páginas.
• JavaScript: Para agregar interactividad y dinamismo.

Ejemplo de integración:

<!DOCTYPE html>
<html>
  <head>
    <title>Página con CSS y JavaScript</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
    <p>Este es un ejemplo de HTML con CSS.</p>
    <button onclick="alert('Hiciste clic!')">Haz clic aquí</button>
  </body>
</html>

Un documento HTML tiene una estructura jerárquica que incluye:

1. <!DOCTYPE html>: Declara el tipo de documento y la versión de HTML (HTML5 en este caso).
2. <html>: Es el contenedor principal de todo el contenido.
3. <head>: Contiene metadatos como el título, enlaces a CSS y scripts.
4. <body>: Aquí va el contenido visible de la página, como texto, imágenes y enlaces.

Ejemplo detallado:

<!DOCTYPE html> 
<html>
   <head>
      <title>Mi primera página web</title>
      <meta charset="UTF-8">
      <meta name="description" content="Una página de ejemplo">
      <link rel="stylesheet" href="estilos.css">
   </head>
   <body>
      <header>
         <h1>Bienvenido a mi sitio web</h1>
         <nav>
            <ul>
               <li><a href="#">Inicio</a></li>
               <li><a href="#">Acerca de</a></li>
            </ul>
         </nav>
      </header>
      <main>
         <p>Este es un párrafo de ejemplo.</p>
      </main>
      <footer>
         <p>Derechos reservados © 2025</p>
      </footer>
   </body>
</html>

Línea de tiempo de HTML:

• • Investiga en Internet los hitos más importantes en la historia de HTML.
  • Crea una línea de tiempo que incluya las versiones más relevantes (HTML 2.0, HTML 4.01, HTML5, etc.).

Presentación en HTML:

• • Crea una página web que explique qué es HTML, su historia y su importancia.
  • Incluye al menos:
    • Un título principal (<h1>).
    • Dos párrafos (<p>).
    • Una imagen relacionada con HTML.
    • Un enlace a un recurso externo.

Práctica de Estructura:

• • Escribe un documento HTML que incluya:
    • Un encabezado (<header>).
    • Una sección principal (<main>).
    • Un pie de página (<footer>).
    • Usa etiquetas semánticas como <article>, <section>, y <nav>.

Recursos Adicionales

• • Documentación oficial: MDN Web Docs – HTML
  • Herramientas útiles: CodePen

Descubre cómo Acortar y Gestionar tus Enlaces con Tecnops URL Shortener

En el vertiginoso mundo digital, compartir enlaces largos y complejos puede resultar engorroso. Es en este escenario donde Tecnops URL Shortener, una herramienta desarrollada con tecnologías tan conocidas y usadas como Node.js, Express, JavaScript, CSS y HTML, se presenta como la solución ideal para simplificar y optimizar tus enlaces, ofreciéndote una experiencia de navegación más eficiente.

Creando una URL Corta Personalizada

1. Accede a la plataforma Tecnops URL Shortener visitando //tecnops.es:10000 en tu navegador favorito.
2. En el campo URL, introduce la URL que deseas acortar.
3. Asigna un alias único y fácil de recordar en el campo Alias. Por ejemplo, podrías utilizar mi-alias.
4. Haz clic en el botón Acortar para generar tu URL corta personalizada con el alias.

Accediendo a tu URL Acortada

Para acceder a la URL acortada que has creado, sigue estos simples pasos:

1. Utiliza el siguiente formato de URL: //tecnops.es:10000/code/mi-alias.
2. Reemplaza mi-alias con el alias que asignaste al acortar la URL.

Al abrir esta URL en tu navegador, experimentarás una redirección automática hacia la URL original asociada con el alias.

Este proceso, respaldado por las tecnologías líderes de Node.js, Express, JavaScript, CSS y HTML, hace que compartir enlaces sea más sencillo y elegante, permitiéndote mantener el control sobre tus enlaces y mejorar la experiencia de tus usuarios.

Beneficios de Tecnops URL Shortener:

• Personalización: Asigna alias significativos para tus enlaces y crea una identidad única.
• Gestión Sencilla: Accede a una interfaz intuitiva para crear tus enlaces acortados.
• Eficiencia: Comparte enlaces de manera efectiva, ya sea en redes sociales, correos electrónicos o mensajes.

Conclusión: Tecnops URL Shortener, construido con tecnologías avanzadas, redefine la forma en que interactuamos con los enlaces en línea. ¡Simplifica tu experiencia en la web hoy mismo y descubre el poder de tus enlaces acortados con Tecnops!

Javascript y Giphy

Para este artículo he creado una aplicación usando Javascript, CSS y HTML que se conecta con uno de los mayores proveedores de GIF´s.

El proveedor de GIF´s en cuestión es GIPHY y nos ofrece miles de GIF´s animados que son usados por decenas de aplicaciones.

Además nos ofrecen desde esta web acceso a sus servicios, con múltiples ejemplos y con SDK´s para diferentes plataformas.

El funcionamiento de la aplicación es muy sencilla:

1. Buscamos cualquier GIF´s como lo haríamos tanto en su web como en muchas de la aplicaciones que tienen este servicio.
2. Pulsamos sobre el / los GIS´s que quieras descargar y solo faltaría pulsar el botón de descarga.

La ventaja de esta aplicación es que te permite descargarlos para incluirlos donde quieras o no puedas tener soporte para este servicio.

Puedes acceder a la aplicación pulsando aquí, y espero que os guste y la disfrutéis.