Potafolio 2C-2
Programación II
Aprendamos a Programar
HIPERVÍNCULOS O ENLACES EN HTML
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.
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).
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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
<body>
<a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a aprenderaprogramar.com</a>.
</body>
</html>
EJEMPLOS
EJERCICIO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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 <ahref="#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>