Unidad 2. Avanzado: Enlaces

Enlaces en la misma página:

También podemos enlazar con un elemento concreto de una web, con un determinado párrafo o una imagen. Para ello, primero debemos de identificar el elemento con el atributo id, y darle un valor que debe de ser único en la página. Por ejemplo, para enlazar con el título del apartado 2 de la página pagina1.htm, iríamos a su encabezado y añadiríamos el id de la siguiente forma <h2 id="ap_2">. Para enlazar con este apartado, debemos de escribir la dirección de la página # y el id, por ejemplo <a href="pagina1.htm#ap_2">. Si el elemento se encuentra en la misma página, podemos omitir la dirección de la página y escribir directamente <a href="#ap_2">. Otra opción, en vez de añadir el atributo id a un elemento, es crear un marcador y apuntar a él, con la estructura <a name="nombre" id="nombre"></a>.

Enlaces a otras páginas:

Aunque lo más normal es enlazar con otra página web, también podemos enlazar a otros tipos de archivos como gráficos o archivos zip. Al enlazar con un archivo .zip se abrirá una ventana para que el usuario pueda descargárselo y guardarlo en su ordenador.

Existen otros en formato de enlace, que no enlazan con archivos. Por ejemplo, los enlaces que comienzan por mailto: sirven para enlazar con una dirección de correo, y al pulsarlos, se abre el gestor de correo predeterminado, con un nuevo mensaje para esa dirección. Los enlaces ftp enlazan con cuentas FTP.

Puedes ver todo esto en el siguiente ejemplo:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Imágenes y enlaces</title>
</head>
<body>
  <h1>Im&aacute;genes y enlaces</h1>
  <p id="primero">&Eacute;ste es el primer p&aacute;rrafo. <a href="#ultimo">Ir al &uacute;ltimo</a>.</p>
  <p>Aqu&iacute; tenemos la imagen de un gatito, pon el cursor sobre ella:<br />
   <img src="graficos/gatito.gif" width="199" height="164" alt="gatito" title="¡Qué a gusto duerme!" /></p>
  <p>Aqu&iacute; una imagen que no existe <img src="noimagexxx.png" width="50" height="50" alt="Por eso muestra el ALT" />.</p>
  <p>Aqu&iacute; tenemos un <a href="https://www.aulaclic.es">enlace a aulaClic</a>, con una direcci&oacute;n absoluta.</p>
  <p>Y si pulsas sobre esta imagen <a href="index.htm"><img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41" /></a>
    ir&aacute;s al &iacute;ndice del curso.</p>
  <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
  <p id="ultimo">&Eacute;ste es el &aacute;ltimo p&aacute;rrafo. <a href="#primero">Volver al primero</a>.</p>
</body>
</html>

Prúebalo y edita lo que quieras:

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies