© Jordi González Boada
Enlazar páginas
Un enlace básico
Para introducir el tema de los enlaces vamos a empezar definiendo la sintaxis de la etiqueta de enlace que más comúnmente se utiliza:
<a href="">...</a>
En el lugar de "..." se pone el texto de enlace que se verá en la página.
Esta etiqueta -con su atributo- sirve para crear un enlace hacia otra página; por defecto la nueva página se abrirá en la misma página en la que se encontraba la página que contiene el enlace. Veamos un ejemplo:
<a href="fig05_01.html">Primera figura del tema 5</a>
Primera figura del tema 5
La etiqueta es <a>...</a> y contiene el atributo específico href que determina la dirección de la página a la que se accederá (el archivo destino). La dirección puede ser relativa o absoluta:
- Relativa: se hace teniendo como inicio la dirección en la que se encuentra la página donde se encuentra el enlace.
- Absoluta: se incluye la dirección completa de la página. Por ejemplo, la dirección completa de esta página es:
- https://www.jordigonzalezboada.com/w3mentor/tema05.html
Para explicar las direcciones relativas lo haremos con algunos ejemplos. Supongamos el siguiente árbol de directorios y archivos:
- Alojamiento de mi página (carpeta1):
- Página 1 principal (archivo1.html).
- Página 2 principal (archivo2.html).
- Mi afición 1 (carpeta2):
- Página 1 afición 1 (archivo3.html).
- Página 2 afición 1 (archivo4.html).
- Mi afición 2 (carpeta3):
- Página 1 afición 2 (archivo5.html).
- Página 2 afición 2 (archivo6.html).
- Variante 1 afición 2 (carpeta4):
- Página 1 variante 1 afición 2 (archivo7.html).
- Página 2 variante 1 afición 2 (archivo8.html).
- Variante 2 afición 2 (carpeta5):
- Página 1 variante 2 afición 2 (archivo9.html).
Y ahora algunos ejemplos:
Enlace al "archivo 2" en el "archivo 1":
<a href="archivo2.html">Título archivo 2</a>
Enlace al "archivo 9" en el "archivo 2":
<a href="carpeta3/carpeta5/archivo9.html">Título archivo 9</a>
Enlace al "archivo 5" en el "archivo 7":
<a href="../archivo5.html">Título archivo 5</a>
Enlace al "archivo 7" en el "archivo 9":
<a href="../carpeta4/archivo7.html">Título archivo 9</a>
Como se puede ver en los ejemplos, si los archivos se encuentran en el mismo directorio sólo hace falta escribir el nombre del archivo -con su extensión-.
Si el archivo se encuentra en alguna carpeta que se encuentra dentro de la carpeta donde se encuentra el archivo en el que se incluirá el enlace se debe incluir en la dirección la carpeta (y subcarpetas, si las hay) en la que se encuentra el archivo destino antes del nombre del archivo.
Si el archivo destino se encuentra hacia afuera en el árbol de directorios se debe salir hacia fuera hasta la carpeta que contiene el archivo o el directorio (con sus subdirectorios, si los hay) en el que está el archivo. Para poder salir hacia afuera una carpeta se utiliza el siguiente código: "../"; por tanto, si debemos salir dos directorios tendremos de poner "../../", si son tres, "../../../", y así de manera análoga.
Las direcciones absolutas se pueden utilizar tanto para hacer enlaces entre nuestras páginas como hacia páginas externas a la nuestra. Las direcciones relativas se pueden utilizar para hacer enlaces entre nuestras páginas; los enlaces relativos resultan útiles para poder visualizar las páginas en nuestro disco duro (si los enlaces fueran absolutos al pinchar en ellos se cargaría la página que estuviera en esa dirección de internet, si estamos conectados a internet, y no la que estuviese en nuestro disco duro).
El atributo target
En la etiqueta <a>...</a> se puede usar el atributo target (target es un atributo que se puede usar en etiquetas que generan enlaces -a, link-, mapas de imagen -area-, y formas -form-).
El atributo target sirve para especificar la ventana donde se abrirá el enlace. Sus valores pueden ser:
- _blank: abre el enlace en una nueva ventana o pestaña.
- _self: abre el enlace en la ventana actual sin tener en cuenta el valor de target base (útil para sobreescribir un target base).
- _parent: abre el enlace en el frameset inmediatamente superior. Se hablará sobre los frames más adelante.
- _top: abre el enlace en la misma ventana pero sin frames. Se hablará sobre los frames más adelante.
El target base se puede incluir en la cabecera del documento (entre <head> y </head>) y determina la dirección desde la que se inician los enlaces relativos. Si no se especifica el target base los enlaces relativos se hacen desde la página en la que se encuentre el enlace (lo mostrado más arriba). Puede ser útil para aquellos que se hacen un lío saliendo de directorios en los enlaces relativos.
<base href="https://www.jordigonzalezboada.com/w3mentor/index.html">
En este ejemplo todas las direcciones relativas, estuviesen en cualquier subcarpeta o no, empezarían desde la carpeta "w3mentor" del dominio "https://www.jordigonzalezboada.com".
Otra opción del uso del target base es para hacer que todos los enlaces de una página se abran en una nueva ventana sin tener que estar especificándolo en todos los enlaces, la sintaxis es la siguiente:
<base target="_blank">
Esto se suele utilizar en las páginas de enlaces para que los enlaces no se abran en la misma ventana en la que están la página que los contiene (es la mejor opción para enlazar páginas externas si no se quiere perder un visitante cada vez que pinche un enlace). Si se quiere que uno de los enlaces de esa página se abra en la misma ventana se deberá utilizar el atributo target con el valor _self (target="_self") en el enlace.
Marcas y enlaces dirigidos a marcas
Las marcas sirven para dirigir a zonas concretas de una página. En el tema 4 se usó para mostrar la sintaxis de dos códigos utilizados en los temas 2 y 3, y esto mismo es un ejemplo del uso de marcas: el enlace no lleva al principio del tema 4 sino a la zona del tema 4 que interesa visitar.
Las marcas también se pueden utilizar en páginas muy extensas para crear un indice (un ejemplo de esto se puede ver en una de mis páginas de fotografía, hay un submenú que lleva a zonas concretas de esa página).
Para utilizar este tipo de enlaces se debe crear una marca a la que se pueda dirigir un enlace y utilizar una sintaxis específica en el enlace:
Crear una marca:
<a name="NombreDeLaMarca">...</a>.
- "NombreDeLaMarca": será el nombre que tendrá esa marca y se utilizará en el enlace que lleve hasta ella.
- "...": puede contener algún texto (por ejemplo un título al que queremos dirigir a los visitantes) o estar vacio. Se debe tener en cuenta que una marca será interpretada como un enlace y su presentación visual se puede ver influenciada por la presentación visual de los enlaces; así pues, lo más fácil es hacer las marcas sin texto.
Crear un enlace dirigido a una marca:
Si la marca está en la misma página:
<a href="#NombreDeLaMarca">...</a>
Si la marca está en otra página:
<a href="NombreDeLaPagina.html#NombreDeLaMarca">...</a>
- "NombreDeLaPagina": nombre de la página donde se encuentra la marca.
- "NombreDeLaMarca": nombre de la marca a la que debe dirigir el enlace.
- "...": texto del enlace que llevará a la marca de destino. No se debe dejar en blanco puesto que si se hace eso no se verá el enlace.
Un ejemplo:
<a href="fig05_02.html#mimarca">Segunda figura del tema 5</a> es un enlace que nos llevará a la marca <a href="#mimarca"></a> de la página fig05_02.html:
Segunda figura del tema 5
La marca se encuentra en el título "Capítulo II" del archivo fig05_02.html, al principio de cuyo capítulo se sitúa el navegador.
Colores de los enlaces
Los enlaces por defecto tienen unos colores determinados pero estos al igual que el color de fondo y el color del texto general de las páginas se pueden cambiar.
Sin utilizar CSS esto se puede hacer con los atributos correspondientes aplicados, al igual que para el color de fondo de la página y el color del texto general, a la etiqueta body:
- link: color del enlace.
- vlink: color del enlace ya visitado.
- alink: color del enlace activo.
<html>
<head>
<title>
fig05_03
</title>
</head>
<body bgcolor="#ffffcc" text="#9999ff" link="#666600"
vlink="#3333ff" alink="#ff3333">
En este ejemplo se incluye como cambiar el color
del fondo de una página, el color del texto general
de la misma y el color de sus enlaces.<br>
Además de estos atributos la etiqueta body tiene
otro atributo más (también desaprobado en favor
del uso de CSS) que es background y sirve para
especificar una imagen de fondo para la página;
se explicará en el tema 6 del curso.<p>
<a href="">Este enlace sirve de ejemplo</a>,
lleva a otra página desde la cual podréis volver a esta
para comprobar como cambia el color de un enlace ya
visitado (algunos navegadores no soportan esta
opción).<p>
Para ver un enlace activo es suficiente con pinchar
con el botón derecho el enlace anterior (así se
activa pero no se ejecuta).
</body>
</html>
fig05_03 Color de los enlaces de una página, su texto general y el fondo de la misma
Esta manera de cambiar el color de los enlaces de una página ha sido desaprobada en favor del uso de CSS.
Enlaces a direcciones de correo-e
La sintaxis de un enlace que al ser pinchado abre el programa de correo electrónico del usuario es la siguiente:
<a href="mailto:micorreo@dominio.com">TextoDelEnalce</a>
- "mailto:micorreo@dominio.com": es la dirección de correo electrónico a la que se quiere que se envíe el correo.
- "TextoDelEnalce": es el texto que el usuario verá y podrá pinchar para enviar el correo electrónico.
Un ejemplo más complejo:
<a href="mailto:micorreo@dominio.com?
subject=Este%20es%20el%20titulo
&body=Esto%20aparece%20en%20el%20cuerpo%20del%20mensaje
&cc=micorreo2@dominio.com
&bcc=micorreo3@dominio.com">Enviadme un correo</a>
Da como resultado:
Enviadme un correo
Para incluir espacios entre las palabras se ha utilizado "%20" y para separar unos nombres y sus valores de los otros se ha utilizado el símbolo "&".
