3.5. Enlaces
El atributo utilizado es href. La sintaxis general de un enlace es:
<a href="destino">contenido</a>.
Siendo el contenido un texto o una imagen. Es la parte de la página que se colocará activa y donde deberemos pulsar para acceder al enlace. Por su parte, destino será una página, un correo electrónico o un archivo.
En función del destino los enlaces son clásicamente agrupados del siguiente modo:
Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una dirección.
Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.
Está delimitado por las etiquetas:
<a></a>
Ejemplo:
<a href="enlaces.html">3.5. Enlaces</a>
Resultado:
3.5.1. Enlaces internos
Los que se dirigen a otras partes dentro de la misma página. Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen. (ATENCIÓN CON #).
<a href="#abajo">Ir abajo</a>
En segundo lugar, hay que generar un enlace en el destino. Este enlace llevará por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma página. En este caso, la etiqueta que escribiremos será esta:
<a name="abajo"></a>
Está delimitado por las etiquetas:
<a href="#nombre"></a>
<a name="nombre"></a>
<a name="nombre"></a>
Ejemplo:
<a href="#abajo">Ir abajo</a><br><br>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.<br><br>
<a name="abajo"><i>Aquí se moverá cuando se pulse el enlace.</i></a>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.<br><br>
<a name="abajo"><i>Aquí se moverá cuando se pulse el enlace.</i></a>
Resultado:
Ir abajo
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
Aquí se moverá cuando se pulse el enlace.
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
Aquí se moverá cuando se pulse el enlace.
3.5.2. Enlaces locales
Los que se dirigen a otras páginas del mismo sitio web. Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma:
<a href="archivo.html">contenido</a>
Los enlaces locales pueden a su vez apuntar ya no a la página en general sino más precisamente a una sección concreta. Este tipo de enlaces resultan ser un híbrido de interno y local. La sintaxis es de este tipo:
<a href="archivo.html#seccion">contenido</a>
Como para los enlaces internos, en este caso hemos de marcar la sección con otro enlace del tipo:
<a name="seccion"></a>
Ejemplo:
<a href="seccion1/paginas/yyy.html">yyy.html </a>
Para hacer un enlace desde xxx.html hacia yyy.html:
<a href="../seccion1/paginas/yyy.html">yyy.html </a>
Para hacer un enlace desde yyy.html hacia xxx.html:
<a href="../../seccion2/xxx.html">xxx.html </a>
Está delimitado por las etiquetas:
<a href="archivo.html"></a>
<a href="archivo.html#nombre"></a>
<a name="nombre"></a>
<a href="archivo.html#nombre"></a>
<a name="nombre"></a>
Ejemplo:
<a href="caracteres_especiales.php">Ir a 5. Caracteres especiales</a>
<a href="caracteres_especiales.php#53">Ir a 5.3. Caracteres especiales del HTML 3.2</a>
(En la página caracteres_especiales.php en la posición 5.3. Caracteres especiales del HTML 3.2 hay una etiqueta como <a name="53"></a>)
<a href="caracteres_especiales.php#53">Ir a 5.3. Caracteres especiales del HTML 3.2</a>
(En la página caracteres_especiales.php en la posición 5.3. Caracteres especiales del HTML 3.2 hay una etiqueta como <a name="53"></a>)
Resultado:
3.5.3. Enlaces remotos
Los dirigidos hacia páginas de otros sitios web. Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio.
<a href="http://www.paginaweb.com">Ir a paginaweb.com</a>
<a href="ftp://www.paginaweb.com">Ir a paginaweb.com</a>
<a href="ftp://www.paginaweb.com">Ir a paginaweb.com</a>
Está delimitado por las etiquetas:
<a href=""></a>
Ejemplo:
<a href="http://www.google.es">Ir a google.es</a>
<a href="ftp://ftp.rediris.es/">Ir a rediris.es</a>
<a href="ftp://ftp.rediris.es/">Ir a rediris.es</a>
Resultado:
3.5.4. Enlaces con direcciones de correo
Para crear un mensaje de correo dirigido a una dirección. Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace.
<a href="mailto:nombre@pagweb.com">nombre@pagweb.com</a>
Además de la dirección de correo del destinatario, también podemos colocar en el enlace el asunto del mensaje. Esto se consigue colocando después de la dirección de correo un interrogante (?), la palabra subject, un signo igual (=) y el asunto en concreto.
<a href="mailto:nombre@pagweb.com?subject=contacto a través de la página">nombre@pagweb.com</a>
Podemos colocar otros atributos del mensaje con una sintaxis parecida. En este caso indicamos también que el correo debe ir con copia a colabora@pagweb.com.
<a href="mailto:nombre@pagweb.com?subject=contacto a través de la página&cc=colabora@pagweb.com">nombre@pagweb.com</a>
Nota: El visitante de la página necesitará tener configurada una cuenta de correo electrónico en su sistema para enviar los mensajes. Lógicamente, si no tiene servicio de correo en el ordenador no se podrán enviar los mensajes y este sistema de contacto con el visitante no funcionará.
Está delimitado por las etiquetas:
<a href=""></a>
Ejemplo:
<a href="mailto:candilejas74@yahoo.es">Contacta</a>
<a href="mailto:candilejas74@yahoo.es?subject=contacto a través de la página">Correo 2</a>
<a href="mailto:candilejas74@yahoo.es?subject=contacto a través de la página&cc=colabora@pagweb.com">Correo 3</a>
<a href="mailto:candilejas74@yahoo.es?subject=contacto a través de la página">Correo 2</a>
<a href="mailto:candilejas74@yahoo.es?subject=contacto a través de la página&cc=colabora@pagweb.com">Correo 3</a>
Resultado:
3.5.5. Enlaces con archivos
Para que los usuarios puedan hacer download de ficheros. Este no es un tipo de enlace propiamente dicho, pero lo señalamos aquí porque son un tipo de enlaces muy habitual y que presenta alguna complicación para el usuario novato. El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos.
<a href="mi_fichero.zip">Descarga mi_fichero.zip
</a>
<a href="mi_documento.pdf">Descarga el PDF </a>
<a href="mi_documento.pdf">Descarga el PDF </a>
Está delimitado por las etiquetas:
<a href=""></a>
Ejemplo:
<a href="image/onu.png">Descarga la imagen de la ONU
</a>
<a href="pdf/manual.pdf">Descarga el manual de HTML en PDF</a>
<a href="pdf/manual.pdf">Descarga el manual de HTML en PDF</a>
Resultado:
3.5.6. Atributos
3.5.6.1. target
Especifica donde deberá abrirse el documento. Especifica el nombre del marco donde el documento de destino debería ser cargado. Los nombres de marcos deben comenzar con una letra ([A-Z] ó [a-z]). Los nombres especificados a continuación son reservados y tienen significados especiales.- _blank: Abre el documento en una nueva ventana.
- _parent: Abre el documento en el marco padre del marco actual. Si no hay un marco padre funciona igual que _self.
- _self: Abre el documento en el mismo marco que el elemento referente.
- _top: Abre el documento en la ventana del elemento referente, rompiendo la estructura de marcos actual. Si no hay estructura de marcos funciona igual que _self.
Ejemplo:
<html>
<head>
<title>HTML Básico</title>
</head>
<body>
<a href="http://www.google.es target="_blank">Ir a google.es</a>
<a href="ftp://ftp.rediris.es/ target="_blank">Ir a rediris.es</a>
</body>
</html>
<head>
<title>HTML Básico</title>
</head>
<body>
<a href="http://www.google.es target="_blank">Ir a google.es</a>
<a href="ftp://ftp.rediris.es/ target="_blank">Ir a rediris.es</a>
</body>
</html>
Temas :
- 0. Introducción
- 1. Documento HTML
- 2. Cabecera <head>
- 2.2. Título <title>
- 2.3. Metadatos <meta>
- 2.4. Enlaces <link>
- 2.5. Base <base>
- 2.6. Script <script>
- 2.7. Estilos <style>
- 3. Cuerpo <body>.
- 3.2. Caracteres especiales
- 3.3. Texto
- 3.4. Listas
- 3.5. Enlaces
- 3.6. Imágenes
- 3.7. Tablas
- 3.8. Formularios
- Apéndice A