Enlaces en HTML (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.

La etiqueta Anchor- Propiedades (I).-

La base de todo nuestro manual va a ser la etiqueta Anchor, definida en HTML mediante la siguiente sintaxis:

<A propiedad="valor" propiedad="valor"...>hiperenlace</A>

y que posée las siguientes propiedades:

* HREF="ruta"

Que define el nombre del anclaje o la ruta URL ( o la URI) del documento con el que va a conectarnos el hiperenlace.

En el caso de un documento, éste normalmente será otra página web, pero puede ser cualquier otro tipo de documento: imágenes, documentos de texto, de Word, hojas de cálculo, ficheros JavaScript, CSS, etc. Si tenemos nuestro navegador configurado para abrir el tipo de documento solicitado en el hiperenlace, se abrirá en la propia ventana de éste, y si no es así, se nos abrirá un cuadro de dialogo para que permitamos abrirlo con el programa asociado al fichero o guardarlo en nuestro disco duro.

Las únicas restricciones que tenemos respecto a los valores que puede tomar esta propiedad es que la URI o URL del fichero enlazado tenga una sintaxis correcta y que el documento exista en el servidor web. Si no es así, obtendremos el conocido ERROR 404, que corresponde a un documento no encontrado.

Vamos a ver unos ejemplos. Si el documento se abre en ésta misma página, usad el botón Back de la barra de navegación para volver aquí.

Ejemplo de enlace a otar página de éste servidor:

<a href="enlaces_1.html">primera página</a>

que nos da:

primera página

Ejemplo de enlace a un fichero gráfico:

<a href="../../images/logo.gif>logo deHTMLWeb

logo de HTMLWeb

que como véis se abre normalmente en el mismo navegador, al soler estar estos configurados por defecto para abrir los ficheros gráficos aceptados.

Ejemplo de enlace a fichero CSS:

<a href="../../css/general.css">estilos para Intenet Explorer</a>

estilos para Intenet Explorer

NOTA: Si usáis Nestcape Navigator 4x, el enlace al fichero de estilos no se ejecutará, al no reconocerlo el navegador.

En capítulos posteriores iremos viendo las diferentes sintaxis para el valor de esta propiedad.

* TARGET="nombre"

Esta propiedad va a fijar la ventana en la que se va a abrir el documento solicitado en el hiperenlace (siempre que sea un fichero que pueda abrir el propio navegador). Si imaginamos que trabajamos en una página con frames, los posibles valores que puede tomar el atributo nombre son:

1) nombre_ventana: que es el valor del atributo name que le hayamos dado en una página de frameset a un frame o a una ventana flotante en la que queramos que se abra el documento.

2) _self: representa al propio frame o ventana en que se encuentra el enlace, y es el valor por defecto. El documento solicitado se cargará en la página actual, reemplazando a la que lo ha solicitado.

3) _parent: representa al frame padre del que contiene la página con el enlace, es decir, al que se encuentra inmediatamente por encima del actual en la jerarquía de frames de la página.

4) _top: que representa al frame padre de todos los de la ventana del navegador, con lo que el documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior.

5) _blank: que representa a una pantalla en blanco, por lo que el documento se abrirá en una nueva ventana del navegador.

Notad el guión bajo existente en los 4 últimos casos.

En el siguiente ejemplo vamos a cargar en una ventana flotante una página con distribución de frames anidados, para que podamos ver todos los casos anteriores. Recomiendo seguir el orden de enlaces del menú lateral, y accionar el botón atrás del frame superior trás cada ejecución, para regresar al estado inicial.

El código de la página principal de frames va a ser:

<frameset rows="20%,*">
    <frame name="superior" src="superior.html" marginwidth="10" marginheight="10">
    <frame name="inferior" src="inferior.html" marginwidth="10" marginheight="10">
</frameset>

y el de inferior.html:

<frameset  cols="35%,*">
     <frame name="menu" src="menu.html" marginwidth="10" marginheight="10">
     <frame name="principal" src="principal.html" marginwidth="10" marginheight="10">
</frameset>

El resultado lo tenéis aquí.

NOTA: Si usáis Nestcape Navigator 4x el enlace "atrás" no funcionará correctamente. Para volver al estado anterior, pulsar el botón derecho sobre el frame que ha cambiado y pulsar "Back".