LOS ENLACES (LINKS) EN EL LENGUAJE HTML
Los enlaces o hipervínculos son justamente la característica más
importante del lenguaje HTML. Un enlace es una conexión directa
entre un elemento del documento web (ya sea hipertexto, imágenes,
botones…) y:
-Otro documento HTML.
-Otro punto del mismo documento HTML (ancla o anchor)
-Otro recurso de Internet (por ejemplo un archivo PDF).
Se basan en la etiqueta <a>, todo aquel elemento de la web encerrado
entre esta etiqueta constituyen un enlace. Para indicar el recurso
enlazado se usa el atributo href="" con la URL del mismo que puede
ser:
Un recurso perteneciente a un dominio diferente que el documento:
Habrá que indicar la URL completa del recurso (incluido
el protocolo):
Pinche en la parte de abajo en "este"
Pinche aqui y veras como te llevara al enlace Ideal en la URL este
enlace para ver el diario Ideal
<a href="http://www.ideal.es">Este</a> enlace para ver
el diario Ideal.
Un recurso perteneciente al mismo dominio que el documento:
Cuando el enlace es a otro documento web dentro de nuestro propio dominio
bastará con indicar el nombre del recurso si ésta en la misma
carpeta:
Al pinchar veras como va al temario que ésta en el misma carpeta
<a href="temaprimero.html"> este
enlace para el tema 1
Pinche aquí y veras como te lleva al temario 1 en una carpeta
diferente este enlace para el tema 1
bastará con indicar el nombre del recurso si ésta en la misma
carpeta:
Al pinchar veras como va al temario que ésta en el misma carpeta
<a href="temaprimero.html"> este
enlace para el tema 1
Pinche aquí y veras como te lleva al temario 1 en una carpeta
diferente este enlace para el tema 1
A otro punto del mismo documento (ancla, anchors o enlace interno):
Para crear un enlace dentro de nuestro mismo documento HTML
primero debemos de definir cada una de las posiciones o anclas
donde queremos enlazar. Los anclas se crean con el atributo name
seguido del nombre que queramos darle. Cuando queramos enlazarlos
basta con poner # seguida del nombre que le dimos al ancla.
Veámoslo en el siguiente ejemplo:
<html>
<body>
<a href="#primera">Pincha aquí para ir al primer párrafo</a>
<a href="#segunda">Pincha aquí para ir a la segundo párrafo</a>
<a href="#tercera">Pincha aquí para ir a la tercer párrafo</a>
<a name="primera"></a>
<h2>Sección primera del párrafo</h2>
<a name="segunda"></a>
<h2>Sección segunda del párrafo</h2>
<a name="tercera"></a>
<h2>Sección tercera del párrafo</h2>
</body>
</html>
Está etiquetas y atributos se muestra como aquí abajo.
Pinche aquí para ir a la primera sección
Pinche aquí para ir a la segunda sección
Pinche aquí para ir a la tercera sección
Sección primera
Contenido de la sección 1
Contenido de la sección 2
Sección segunda
Contenido de la sección 3
Sección tercera
También podemos acceder a las anclas de un documento desde otro,
por ejemplo si quisiéramos acceder desde otro documento a la
sección segunda del ejemplo anterior (supongamos que se guardó en
un fichero llamado "libro.html"):
Pinche aquí para ver <a href="libros.htm#segunda"> aquí para ver
la sección 2 de la otra web
Pinche aquí para ver aquí para ver
la sección 2 de la otra web.
Para cambiar la ventana donde se abrirá el enlace utilizaremos el atributo target="" que puede tomar los siguientes valores:
- "_self" : Abrirá el enlace en el mismo frame o marco que lo
contenía (es el valor por defecto).
- "_blank": Fuerza al enlace a abrirse en una nueva ventana
(o pestaña) del navegador.
- "_parent": Abre el enlace en el conjunto de marcos (frameset)
padre del marco actual.
- "_top": Fuerza al enlace a abrirse en el 100% de la ventana del
navegador.
- "nombre_del_marco": Abre el enlace en el marco indicado.
Podemos crear imágenes que a la vez sean enlaces para ello bastará
con anidar la etiqueta <img> dentro de la etiqueta <a>:
Como veremos con este enlace <a href="http://www.google.es">
<img src="logo_google.jpg"/></a>
Para facilitar agilizar la carga de páginas en Internet se suelen
usar los thumbnails o miniaturas que son versiones reducidas de
ellas que permiten previsualizarlas y descargar la imagen entera
sólo en caso de estar interesados. Para crear este tipo de imágenes
existen multitud de programas, un ejemplo de ellos es "eXcale".
