Manejo de Enlaces, Imágenes y Tablas en HTML5

---

HTML5 ofrece una variedad de elementos que permiten enriquecer las páginas web con enlaces, imágenes, multimedia y tablas. En esta guía, aprenderás a utilizar estos elementos de manera efectiva.

Enlaces (Links)

Los enlaces son fundamentales para la navegación en la web. Se crean utilizando la etiqueta <a>.

Sintaxis

<a href="URL">Texto del enlace</a>

👉 Ejemplo

<p>Visita <a href="https://www.ejemplo.com" target="_blank">Ejemplo.com</a> para más información.</p>

Imágenes y Multimedia

HTML5 permite la inclusión de imágenes y elementos multimedia como audio y video.

Las imágenes se insertan utilizando la etiqueta <img>.

Sintaxis

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

👉 Ejemplo

<img src="https://www.ejemplo.com/imagen.jpg" alt="Una hermosa imagen">

Multimedia

HTML5 introduce etiquetas para incluir audio y video:

• Audio:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta el audio.
</audio>

• Video:

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta el video.
</video>

Tablas

Las tablas son útiles para organizar datos en filas y columnas.

Sintaxis

<table>
  <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
  </tr>
  <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
  </tr>
</table>

Ejemplo de Tabla en HTML

Las tablas en HTML se utilizan para organizar y presentar datos de forma estructurada. A continuación, se muestra un ejemplo de una tabla simple que incluye dos columnas: “Nombre” y “Edad”. Esta tabla contiene dos filas de datos, cada una representando a una persona con su respectiva edad.

<table border="1">
  <tr>
      <th>Nombre</th>
      <th>Edad</th>
  </tr>
  <tr>
      <td>Ana</td>
      <td>25</td>
  </tr>
  <tr>
      <td>Luis</td>
      <td>30</td>
  </tr>
</table>

Resultado:

| Nombre | Edad  |
|--------|-------|
| Ana    | 25    |
| Luis   | 30    |
- - - - - - - - -