Objetivos de aprendizaje

Al terminar esta lección, podrás:

Insertar imágenes en tu página web y manejar sus atributos básicos.
Construir tablas para mostrar datos organizados en filas y columnas.
Crear formularios para que los usuarios puedan ingresar datos.

Contenidos teóricos con ejemplos claros y explicativos

🖼️ Imágenes

Para agregar una imagen usamos la etiqueta <img>. Es una etiqueta vacía (no tiene cierre) y requiere al menos el atributo src (ruta de la imagen) y es recomendable agregar alt (texto alternativo para accesibilidad).

<img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen" width="300">

src: ruta o URL de la imagen.
alt: texto que describe la imagen, útil para lectores de pantalla o si la imagen no carga.
width y height: ancho y alto en píxeles o porcentaje para controlar tamaño.

📊 Tablas

Las tablas se crean con la etiqueta <table>. Dentro van filas <tr> que contienen celdas de encabezado <th> o celdas de datos <td>.

<table border="1">
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>32</td>
  </tr>
</table>

border="1" agrega un borde simple a la tabla para visualizarla (en producción se usa CSS para estilo).

📝 Formularios

Los formularios permiten capturar información del usuario. Usamos la etiqueta <form>, que contiene controles como:

<input>: para campos de texto, botones, checkbox, etc.
<textarea>: para textos largos.
<select>: lista desplegable.
<button>: para enviar el formulario.

Ejemplo básico:

<form action="procesar.php" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>

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

  <button type="submit">Enviar</button>
</form>

action: URL o archivo que procesará el formulario.
method: método HTTP, generalmente "post" o "get".
for en <label> conecta la etiqueta con el input mediante el id.

Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Imágenes, Tablas y Formularios</title>
</head>
<body>

  <h1>Galería de Fotos</h1>
  <img src="https://via.placeholder.com/200" alt="Imagen de ejemplo" width="200">
  <!-- Imagen con fuente externa -->

  <h2>Lista de usuarios</h2>
  <table border="1">
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Email</th>
    </tr>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>ana@email.com</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>32</td>
      <td>carlos@email.com</td>
    </tr>
  </table>

  <h2>Formulario de contacto</h2>
  <form action="#" method="post">
    <label for="nombre">Nombre:</label><br>
    <input type="text" id="nombre" name="nombre" required><br><br>

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

    <label for="mensaje">Mensaje:</label><br>
    <textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea><br><br>

    <button type="submit">Enviar</button>
  </form>

</body>
</html>

Resumen de los conceptos aprendidos

<img> inserta imágenes, debe tener src y alt.
Las tablas se organizan con <table>, <tr>, <th> y <td>.
Los formularios capturan datos con <form> y controles como <input>, <textarea>, y <button>.
El atributo required en inputs obliga a completar el campo antes de enviar.

Ejercicio práctico final basado en lo aprendido

Crea un archivo contacto.html que incluya:

Un encabezado con el título “Contáctanos”.
Una imagen de un logo o icono (puede ser una URL externa).
Una tabla que liste 3 productos o servicios con columnas para nombre, descripción y precio.
Un formulario con los siguientes campos: nombre, correo, teléfono (opcional), mensaje.
Un botón para enviar el formulario.

Abre el archivo en tu navegador y prueba llenar el formulario (aunque no se enviará a un servidor, verifica que los campos requeridos funcionen).

Recomendaciones o tips adicionales

Usa siempre texto alternativo (alt) en imágenes para mejorar la accesibilidad.
Evita usar tablas para diseño; solo úsalas para mostrar datos tabulares.
Los formularios pueden tener muchos tipos de controles, investiga más sobre input y sus tipos (checkbox, radio, password, number, etc.).
Para la validación avanzada de formularios, se suele usar JavaScript, pero HTML5 ya ofrece validaciones básicas.

6 - HTML: Imágenes, tablas y formularios en HTML