Imágenes y enlaces
Imágenes y enlaces
Ahora veremos la primera forma de cargar contenido externo en nuestra web, con la etiqueta de imagen. Además, gracias a la etiqueta de enlace, podremos vincular a otras páginas o crear una navegación.
Cargar Contenido Externo en Nuestra Web con Etiquetas HTML
Una de las principales funcionalidades de HTML es la capacidad de integrar contenido externo en nuestras páginas web. A continuación, exploraremos dos formas comunes de hacerlo utilizando las etiquetas y .
1. Cargar Imágenes con la Etiqueta <img>
La etiqueta <img> se utiliza para mostrar imágenes en una página web. Es una etiqueta autocontenida, lo que significa que no necesita una etiqueta de cierre.
Sintaxis:
<img src="URL_de_la_imagen" alt="Texto alternativo">
Atributos Principales:
src: Especifica la ubicación de la imagen (puede ser una URL o una ruta local).alt: Proporciona un texto alternativo que se muestra si la imagen no se carga.
Ejemplo:
<img src="https://www.ejemplo.com/imagen.jpg" alt="Una descripción de la imagen">
En este ejemplo:
- La imagen será cargada desde la URL proporcionada en el atributo
src. - Si la imagen no se puede cargar, el navegador mostrará el texto alternativo «Una descripción de la imagen».
2. Crear Vínculos con la Etiqueta <a>
La etiqueta <a> se utiliza para crear enlaces que permiten a los usuarios navegar hacia otras páginas, recursos o ubicaciones dentro de la misma página.
Sintaxis:
<a href="URL_destino">Texto o contenido del enlace</a>
Atributos Principales:
href: Especifica la URL o el destino del enlace.target: Define dónde se abrirá el enlace (por ejemplo,_selfpara la misma pestaña,_blankpara una nueva pestaña).
Ejemplo:
<a href="https://www.google.com" target="_blank">Ir a Google</a>
En este ejemplo:
- El texto «Ir a Google» aparecerá como un enlace.
- Al hacer clic, el navegador abrirá el enlace en una nueva pestaña gracias al atributo
target="_blank".
Combinación de <img> y <a>
Es común combinar estas dos etiquetas para crear enlaces que incluyan imágenes.
Ejemplo:
<a href="https://www.ejemplo.com" target="_blank">
<img src="https://www.ejemplo.com/logo.jpg" alt="Logo del sitio">
</a>
En este caso:
- La imagen actuará como un enlace.
- Al hacer clic en la imagen, el usuario será redirigido al sitio especificado en el atributo
href.
Práctica Recomendada
- Intenta cargar una imagen de tu computadora usando una ruta relativa:
<img src="imagenes/foto.jpg" alt="Foto de ejemplo"> - Crea un enlace de navegación a otra página de tu sitio:
<a href="contacto.html">Ir a la página de contacto</a> - Combina ambas etiquetas para hacer clic en una imagen que redirija a otra página:
<a href="index.html"> <img src="imagenes/logo.png" alt="Logo principal"> </a>
Estas dos etiquetas son fundamentales para enriquecer la experiencia del usuario, permitiendo cargar contenido visual y crear una navegación intuitiva en tu web. Con práctica, podrás usarlas de manera efectiva para diseñar páginas más completas y funcionales.
