Curso de HTML5 y CSS3: Insertar imágenes y enlaces en HTML

¿Por qué son importantes las imágenes y los enlaces?

Las imágenes y los enlaces son elementos clave en la creación de un sitio web atractivo y funcional. Aquí te presentamos algunas razones de su importancia:

Atractivo visual: Las imágenes añaden color y vida a tu contenido, captando la atención de los visitantes.
Navegación efectiva: Los enlaces facilitan la navegación entre diferentes secciones de un sitio y hacia otros sitios web.
SEO: Usar imágenes y enlaces adecuadamente puede mejorar el posicionamiento en motores de búsqueda.

Usando la etiqueta <img>

La etiqueta <img> se utiliza para insertar imágenes en tu página web. A continuación, se presentan sus atributos más importantes:

src: Especifica la ubicación de la imagen.
alt: Proporciona una descripción de la imagen, importante para el SEO y accesibilidad.
width y height: Establecen las dimensiones de la imagen.

Aquí tienes un ejemplo de cómo utilizar la etiqueta <img>:


<img src="ruta/a/tu/imagen.jpg" alt="Descripción de la imagen" width="600" height="400">

En este ejemplo, asegúrate de reemplazar ruta/a/tu/imagen.jpg por la URL correcta donde se encuentra tu imagen. El atributo alt es esencial para describir la imagen a quienes no pueden verla, mejorando así la accesibilidad de tu sitio.

Usando la etiqueta <a href=>

La etiqueta <a>, comúnmente conocida como enlace, es fundamental para la navegación en internet. Su atributo más importante es:

href: Define la URL a la que el enlace debe dirigir.

Aquí tienes un ejemplo de uso de la etiqueta <a>:


<a href="https://www.ejemplo.com">Visita nuestra página</a>

Este ejemplo creará un enlace que, al ser clicado, llevará al usuario a https://www.ejemplo.com. Puedes también utilizar atributos adicionales, como target="_blank" para que el enlace se abra en una nueva pestaña:


<a href="https://www.ejemplo.com" target="_blank">Visita nuestra página en una nueva pestaña</a>

Consideraciones de estilo con CSS

Una vez que hayas insertado tus imágenes y enlaces, probablemente querrás estilizar tu contenido. CSS puede ayudarte a lograr un diseño más atractivo. Por ejemplo, puedes cambiar el color de los enlaces y ajustar el tamaño de las imágenes:


a {
    color: blue;
    text-decoration: none; /* Elimina el subrayado */
}

img {
    border: 2px solid #000; /* Bordes para las imágenes */
    border-radius: 8px; /* Bordes redondeados */
}

Incluye tus estilos CSS en la sección <head> de tu documento HTML o en un archivo CSS externo.

Práctica recomendada para insertar imágenes y enlaces

Para asegurarte de que tus imágenes y enlaces sean efectivos, considera lo siguiente:

Usa imágenes optimizadas para web para mejorar tiempos de carga.
Siempre proporciona texto alternativo para imágenes.
Utiliza enlaces descriptivos que informen sobre el destino.

Hasta ahora, hemos cubierto la inserción de imágenes y enlaces utilizando las etiquetas <img> y <a> en HTML5. Estas son herramientas esenciales que te ayudarán a construir una estructura web más rica y funcional.

blog.vermiip.es