Codificación aprenderaprogramar.com: CU00717B
HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.
Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones.
Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de correo electrónico o un programa.
Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a ellos.
Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.
HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.
Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.
Esta técnica hace que los usuarios accedan de una manera más rápida a la información.
Para crear este tipo de enlaces hay que hacer dos operaciones:
-
Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los enlaces).
-
Poner enlaces que salten a los marcadores.
El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):
<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las nuevas versiones de HTML, aunque se usó bastante en el pasado).
<a id="nombre_del_marcador">Texto asociado al marcador</a>
El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el mismo dentro de un documento HTML.
Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>
Por otro lado, el código de un enlace para que salte a un marcador.
Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>
Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en el siguiente código.
EJERCICIO
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title> </head> <body> <a name="arriba"></a> En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>. <a name="primero"><h1>Primer apartado</h1></a> Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. <a name="segundo"><h1>Segundo apartado</h1></a> Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. <a name="tercero"><h1>Tercer apartado</h1></a> Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. Volver <a href="#arriba">arriba</a>. </body> </html> |
Escribe el código anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre ejemplo.html. A continuación, haz doble clic en él y prueba a jugar con el archivo haciendo zoom en él o añadiendo más texto para comprobar cómo funcionan los marcadores. El resultado debe ser similar al que se muestra en la siguiente imagen.
Ahora crea otro archivo donde reemplaces los atributos name por id, guarda el archivo como ejemplo2.html. Visualiza los resultados en tu navegador y comprueba si el efecto es el mismo. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.
Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web aprenderaprogramar.com</a>
En el hipervínculo distinguimos las siguientes partes:
- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>
- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro de las comillas.
- Un texto que es el que ve el usuario como link.
Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos visto. El resultado debe ser algo así.
DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET
Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por ejemplo si queremos abrir una página externa a nuestro sitio pero sin que el visitante pierda la nuestra. Para ello utilizaremos el atributo target con alguna de las siguientes opciones.
Valores de target más habituales:
• _blank: Abre el documento vinculado en una ventana nueva del navegador.
• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
Ejemplo:
<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una nueva ventana</a>
EL ATRIBUTO TITLE PARA HIPERVÍNCULOS
Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que hayamos puesto en el atributo ‘title’.
EJEMPLO
|
<!DOCTYPE html> <a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a aprenderaprogramar.com</a>.
</body> |
Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y comprueba los resultados que se obtienen.
Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:
IMÁGENES COMO ENLACES
Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto, una imagen. Veamos un ejemplo:
<ahref="http://aprenderaprogramar.com"><img src="http://i.imgur.com/SpZyc.png"alt="Curso de HTML desde cero"></a>
EJERCICIO
Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales de Africa” como texto a mostrar.
Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia: http://es.wikipedia.org/wiki/Panthera_leo
Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección web http://es.wikipedia.org/wiki/Panthera_tigris
En la parte inferior incluiremos tres links internos (para lo que tendremos que haber definido las anclas correspondientes) que indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
