Tablas  

Las tablas HTML son una forma de organizar y presentar datos en filas y columnas. Se utilizan para mostrar información tabular, como horarios, precios, datos estadísticos y mucho más.

Etiquetas básicas de tablas

• <table>: Define una tabla HTML.
• <tr>: Define una fila de la tabla (table row).
• <td>: Define una celda de datos de la tabla (table data).
• <th>: Define una celda de encabezado de la tabla (table header).

Estructura básica de una tabla

Explicación del código:

• La etiqueta <table> inicia la tabla.
• Cada fila se define con la etiqueta <tr>.
• Las celdas de encabezado se definen con la etiqueta <th>.
• Las celdas de datos se definen con la etiqueta <td>.

Atributos útiles

• border: Define el ancho del borde de la tabla.
• colspan: Combina varias celdas en una sola columna.
• rowspan: Combina varias celdas en una sola fila.
• align: Define la alineación del contenido de la celda (obsoleto en HTML5, se recomienda usar CSS).

Ejemplo con atributos

Etiquetas adicionales

• <caption>: Define un título para la tabla.
• <thead>: Agrupa el contenido del encabezado de la tabla.
• <tbody>: Agrupa el contenido del cuerpo de la tabla.
• <tfoot>: Agrupa el contenido del pie de la tabla.

Ejemplo con etiquetas adicionales

Enlaces y Recursos URL

Los enlaces en HTML permiten crear conexiones a otras páginas web, archivos, secciones internas o recursos externos. Se definen mediante el elemento (anchor) y el atributo ‘href’ que indica la URL o el identificador del destino.

Enlaces a Páginas Externas

Para crear un enlace a una página externa, utiliza una URL completa.

Ejemplo:

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

Enlaces Internos (Misma Página)

Los enlaces internos permiten moverse dentro de una misma página utilizando identificadores.

Ejemplo:

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

<strong><h2 id="seccion2">Sección 2</h2></strong>

Enlaces a Archivos o Recursos

También es posible enlazar documentos, imágenes o cualquier recurso alojado en el servidor.

Ejemplo:

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

Abrir Enlaces en una Nueva Pestaña

Para abrir el enlace en una nueva pestaña, se utiliza el atributo target.

Ejemplo:

<strong><a href="https://www.ejemplo.com" target="_blank">Abrir en nueva pestaña</a></strong>

Anchor text

El “anchor text” o texto de anclaje es el texto visible y clicable de un hipervínculo en una página web. En otras palabras, son las palabras o frases que los usuarios ven y en las que hacen clic para acceder a otra página web o a otra sección de la misma página.

Importancia:

• SEO (Optimización para motores de búsqueda):
  • Los motores de búsqueda, como Google, utilizan el anchor text para comprender de qué trata la página enlazada.
  • Un anchor text relevante y descriptivo puede ayudar a mejorar el posicionamiento de una página web en los resultados de búsqueda.
• Experiencia del usuario:
  • Un anchor text claro y conciso ayuda a los usuarios a entender a dónde serán dirigidos al hacer clic en el enlace.
  • Esto mejora la navegación y la usabilidad de un sitio web.

Tipos de anchor text:

• De coincidencia exacta:
  • Contiene la palabra clave exacta para la que se desea posicionar la página enlazada.
  • Ejemplo: “comprar zapatos deportivos”.
• De coincidencia parcial:
  • Contiene una variación de la palabra clave o palabras clave relacionadas.
  • Ejemplo: “zapatos deportivos para correr”.
• De marca:
  • Utiliza el nombre de la marca o empresa.
  • Ejemplo: “Nike”.
• Genérico:
  • Utiliza palabras o frases comunes como “clic aquí”, “leer más” o “visitar sitio web”.
• URL desnuda:
  • Muestra la dirección URL completa del enlace.
  • Ejemplo: “www.ejemplo.com”.
• De imagen:
  • Cuando una imagen funciona como un enlace, el texto alternativo (“alt text”) de la imagen se considera el texto de anclaje.

Buenas prácticas en el uso de enlaces:

• Utiliza anchor text relevante y descriptivo que refleje el contenido de la página enlazada.
• Evita el uso excesivo de anchor text de coincidencia exacta, ya que puede considerarse una práctica de spam.
• Varía el tipo de anchor text para crear un perfil de enlaces natural.
• Asegúrate de que el anchor text sea claro y conciso.

Imágenes

Las imágenes son un elemento esencial de cualquier página web. Elegir el formato de imagen adecuado es crucial para optimizar el rendimiento de tu sitio, la calidad visual y la accesibilidad.

Formatos de imágenes en mapa de bits

Estos formatos almacenan imágenes como una cuadrícula de píxeles. Son los más comunes en la web.

• JPEG (o JPG):
  • Ideal para: Fotografías y imágenes con muchos colores.
  • Compresión: Con pérdida (reduce el tamaño del archivo, pero puede afectar la calidad).
  • Ventajas: Tamaño de archivo pequeño, ampliamente compatible.
  • Desventajas: No admite transparencia, la compresión excesiva puede degradar la calidad.
• PNG:
  • Ideal para: Gráficos con texto, logotipos, imágenes con transparencia.
  • Compresión: Sin pérdida (mantiene la calidad original).
  • Ventajas: Admite transparencia, buena calidad de imagen.
  • Desventajas: Tamaños de archivo más grandes que JPEG.
• GIF:
  • Ideal para: Animaciones sencillas, gráficos con pocos colores.
  • Compresión: Sin pérdida (limitada a 256 colores).
  • Ventajas: Admite animaciones, buena para gráficos simples.
  • Desventajas: Limitado a 256 colores, no es ideal para fotografías.
• WebP:
  • Ideal para: Sustituir a JPEG y PNG, ya que ofrece una compresión superior.
  • Compresión: Con y sin pérdida.
  • Ventajas: Tamaño de archivo muy pequeño, admite transparencia y animaciones, excelente calidad.
  • Desventajas: No es compatible con navegadores muy antiguos.

Formatos de imagen vectoriales

Estos formatos almacenan imágenes como fórmulas matemáticas, lo que permite escalarlas sin perder calidad.

• SVG:
  • Ideal para: Logotipos, iconos, gráficos escalables.
  • Compresión: Sin pérdida.
  • Ventajas: Escalable sin pérdida de calidad, tamaño de archivo pequeño para gráficos simples, admite interactividad.
  • Desventajas: No es ideal para fotografías.

Consideraciones para elegir el formato adecuado

• Tipo de imagen:
  • Fotografías: JPEG o WebP.
  • Gráficos con transparencia: PNG o WebP.
  • Animaciones: GIF o WebP.
  • Logotipos e iconos: SVG o PNG.
• Tamaño del archivo:
  • Prioriza tamaños de archivo pequeños para mejorar la velocidad de carga de la página.
  • Utiliza herramientas de compresión de imágenes.
• Calidad de la imagen:
  • Considera el equilibrio entre tamaño del archivo y calidad visual.
  • Elige compresión sin pérdida cuando la calidad es primordial.
• Compatibilidad:
  • Asegúrate de que el formato sea compatible con los navegadores y dispositivos de tus usuarios.
  • WebP tiene una gran compatibilidad actual.

Buenas practicas en el uso de imágenes

• Optimiza tus imágenes para la web antes de subirlas.
• Utiliza el atributo “alt” en las etiquetas <img> para mejorar la accesibilidad y el SEO.
• Utiliza la etiqueta <picture> para servir diferentes versiones de una imagen según el dispositivo y el navegador.