Sesión 3 – Enlaces e imágenes

TeoríaHipervínculos e imágenes

Enlaces (hipervínculos)

La etiqueta <a> (anchor) crea un enlace clicable. El atributo href indica el destino del enlace.

Enlace externo — A otra web: <a href="https://...">
Enlace interno — A otra página del mismo sitio: <a href="contacto.html">
Nueva pestaña — Con target="_blank"
Ancla — A una sección de la misma página: <a href="#seccion">
Correo — <a href="mailto:info@ejemplo.com">

Buena práctica: Usa textos de enlace descriptivos. Evita «haz clic aquí»; es mejor «consulta la documentación oficial» porque los lectores de pantalla leen los textos de enlace fuera de contexto.

Imágenes

La etiqueta <img> inserta una imagen. Es una etiqueta vacía (no tiene etiqueta de cierre).

Atributos importantes:

src — Ruta o URL de la imagen (obligatorio).
alt — Texto alternativo que se muestra si la imagen no carga y que leen los lectores de pantalla (obligatorio para accesibilidad).
width / height — Dimensiones en píxeles. Se recomienda especificar al menos uno para evitar saltos de diseño al cargar la página.

Formatos de imagen

Formato	Extensión	Uso recomendado
JPEG	.jpg / .jpeg	Fotografías, imágenes con muchos colores
PNG	.png	Imágenes con transparencia, logotipos, capturas
GIF	.gif	Animaciones sencillas, iconos simples
SVG	.svg	Gráficos vectoriales, iconos (escalan sin perder calidad)
WebP	.webp	Formato moderno con buena compresión

Organización de archivos

Es importante mantener los archivos organizados. Una estructura recomendada:

mi-sitio-web/
    index.html
    contacto.html
    css/
        styles.css
    img/
        logo.png
        foto1.jpg
        foto2.jpg

Imagen como enlace

Se puede convertir una imagen en un enlace anidando <img> dentro de <a>.

<a>

Enlace

Crea un hipervínculo a otra página, sección o recurso.

img

Imagen

Inserta una imagen con src y texto alternativo alt.

href

Atributo href

Define el destino del enlace: URL, ruta relativa o ancla.

Ejemplos de códigoEnlaces e imágenes en HTML

Tipos de enlaces

<!-- Enlace externo (a otra web) -->
<a href="https://www.wikipedia.org">Visitar Wikipedia</a>

<!-- Enlace interno (a otra página del mismo sitio) -->
<a href="contacto.html">Ir a Contacto</a>

<!-- Enlace que abre en una nueva pestaña -->
<a href="https://www.wikipedia.org" target="_blank">Wikipedia (nueva pestaña)</a>

<!-- Enlace a una sección de la misma página (ancla) -->
<a href="#seccion-2">Ir a la sección 2</a>
<h2 id="seccion-2">Sección 2</h2>

<!-- Enlace de correo electrónico -->
<a href="mailto:info@ejemplo.com">Enviar correo</a>

Imágenes

<!-- Imagen básica -->
<img src="foto.jpg" alt="Descripción de la foto">

<!-- Imagen con ancho fijo -->
<img src="logo.png" alt="Logo de la empresa" width="200">

<!-- Imagen desde una URL externa -->
<img src="https://ejemplo.com/imagen.jpg" alt="Paisaje de montaña">

Imagen como enlace

<a href="https://www.ejemplo.com">
    <img src="img/banner.jpg" alt="Visitar ejemplo.com">
</a>

PruébaloVe cómo se ven los enlaces

Código HTML

<p>Visita
  <a href="#">Wikipedia</a>
</p>

<p>Contacta:
  <a href="mailto:info@ej.com">
    info@ej.com</a>
</p>

<img src="foto.jpg"
     alt="Paisaje"
     width="200">

Resultado en el navegador

Visita Wikipedia

Contacta: info@ej.com

[Imagen: Paisaje]

Ejercicio prácticoPon en práctica lo aprendido

Añade enlaces e imágenes a tu web

Descarga o busca 2-3 imágenes libres de derechos (por ejemplo, de Unsplash o Pixabay).
Crea una carpeta img/ dentro de tu proyecto y guarda las imágenes allí.
Inserta las imágenes en tu página usando <img> con atributos src y alt descriptivos.
Añade un enlace externo a un sitio web que te guste, y otro enlace a una dirección de correo electrónico.
Crea una segunda página contacto.html con su propia estructura HTML completa y un enlace de vuelta a index.html.
Añade un enlace en index.html que lleve a contacto.html.
Convierte una de las imágenes en un enlace clicable.