Kodokon kodokon.com

Enlaces e imágenes

Crea enlaces a otras páginas y muestra imágenes con las etiquetas a e img.

7 min · 3 preguntas

Abrir esta lección en Kodokon

El "HyperText" (hipertexto) de HTML es precisamente la capacidad de conectar páginas entre sí mediante enlaces. Un enlace se crea con la etiqueta <a> (abreviatura de anchor, ancla). Su destino lo indica el atributo href (hypertext reference, referencia de hipertexto), que contiene una URL: la dirección de una página web, como https://en.wikipedia.org. El texto colocado entre <a> y </a> se vuelve clicable.

HTML
<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>
Un enlace a otro sitio y luego un enlace a una página de tu propio sitio.

Para mostrar una imagen, usas la etiqueta <img>. Es una etiqueta autocerrada: no tiene contenido ni etiqueta de cierre; todo cabe dentro de la propia etiqueta. Dos atributos son esenciales. src (source, fuente) indica dónde se encuentra el archivo de la imagen. alt (alternative text, texto alternativo) describe la imagen con palabras: este texto se muestra si la imagen no llega a cargarse, y lo leen en voz alta los lectores de pantalla que usan las personas con discapacidad visual.

HTML
<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">
Tres imágenes: src indica el archivo, alt lo describe con palabras.

Puedes combinar ambas: una imagen colocada dentro de un elemento <a> se vuelve clicable. Eso es exactamente lo que hacen los logotipos de los sitios web: te llevan de vuelta a la página de inicio cuando haces clic en ellos.

HTML
<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>
Una imagen clicable: el elemento img se coloca dentro del elemento a.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

  1. ¿Qué atributo contiene la dirección de destino de un enlace?
    • src
    • href
    • alt
    • lang
  2. ¿Para qué sirve el atributo alt de una imagen?
    • Para describir la imagen si no se muestra
    • Para definir el tamaño de la imagen
    • Para indicar la dirección del archivo de la imagen
  3. ¿La etiqueta <img> tiene etiqueta de cierre?
    • Sí, siempre hay que escribir </img>
    • No, es una etiqueta autocerrada
    • Solo si la imagen es grande