| NOTA : Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación del W3C "HTML 4.01 Specification" que están en la Sección HTML/CSS de esta web. |
| En este tutorial voy a explicar las sentencias HTML que permiten crear enleces o hipervínculos a otras páginas webs, o a otros recursos. No voy a explicar la totalidad de las posibilidades de dichas sentencias, porque no quiero extenderme en propiedades de uso menor. Voy a explicar en detalle lo más utilizado, para intentar que no haya dudas, pues estas sentencias son el alma de Internet y de su vertiginosa expansion. |
| Tambien comentaré aquellas sentencias CSS que permiten formatear visualmente estos enlaces. |
| Antes de entrar en definiciones, vamos a dejar claro por qué es tan importante el enlace o hipervínculo. |
| Una web no puede estar contenida totalmente en un solo fichero HTML. Si es así es que contiene muy poca información. Lo normal es que una web tenga una pagina principal, y a partir de ella podamos acceder a otras páginas que contengan nuevos datos, nuevos hipervínculos a paginas internas o externas, o hipervínculos a páginas ya vistas antes. |
| Esta forma de acceder a los datos es la esencia de Internet y se caracteriza por su NO SECUENCIALIDAD, es decir, por su capacidad de acceder a los datos 'saltando' de unos a otros en el orden que deseemos. |
| El ejemplo típico de acceso secuencial es el de un libro. Empezamos a leer por la primera página y debemos leer una página tras otra, en el orden establecido (orden secuencial) para entender el mensaje del libro. En las webs no es necesario esto. Podemos saltar a donde queramos, sin limitaciones. |
| Para crear enlaces o hipervínculos se utiliza la etiqueta HTML < A > texto o imagen del hipervinculo< / A > |
| |
 < A > texto o imagen del hipervinculo < / A > :
|
| Elemento para crear vinculos. Se declara siempre dentro de BODY. El contenido del elemento < A > determina la posicion de origen o de destino del vínculo. Esto ahora parece lioso, pero solo viene a decir que con la etiqueta < A > podemos representar un vinculo de salida (de origen) o un punto de entrada (destino). Se explica con mas detalle un poco más abajo. Entre los atributos disponibles, los más utilizados son: |
|
 HREF = "uri" |
|
Con este atributo declaramos el lugar donde se encuentra ubicado un recurso en la web. Es la forma más utilizada y permite enlazar el elemento actual con el que está definido en el URI (uniform resource identifier). Ese URI puede indicar una direccion externa, o una direccion interna (de nuestra misma web). Es la foma de utilizar esta etiqueta como creador de un hipervínculo de origen o salida. Tambien es posible escribir el URI con el formato mailto:direcciondecorreo y esto abrirá el programa cliente de correo electrónico del Pc que pulse ese enlace y le escribirá en el campo "TO" (Para) esa direccion de correo, para asi enviarle un correo electronico. |
|
NAME = "nombrecadena" |
|
Con este atributo asignamos un nombre al elemento actual para que pueda servir de destino para otros vinculos del tipo HREF. Este nombre debe ser único y está al mismo nivel que los nombres de tipo Identificador (los que llamamos con la forma ID="nombreidentificador"), por lo que no puede haber un identificador y un NAME con el mismo valor. Se utiliza cuando queremos acceder con un hipervínculo a una zona concreta de la misma pagina web en la que nos encontramos, o en otra pero no en el principio, sino a una altura concreta del contenido. Asi utilizamos la etiqueta < A > para crear un lugar de destino de otros hipervínculos. Entonces, para definir el punto de destino lo escribiriamos como < A NAME="nombredepuntodedestino" > y en la otra parte del documento, en el enlace que deseamos que vaya a la posición anterior pondremos < A HREF="#nombredepuntodedestino" >texto del enlace< /A >. |
|
No nos olvidemos de la # antes del nombre del identificador, que es lo que indica que se trata de un documento interno. Si el documento se encontrara ubicado en otra página distinta de la que tiene la llamada al enlace, pondriamos el nombre del documento antes de la #, como se muestra aquí:
< A HREF= "documento.html#nombredepuntodedestino" > texto del enlace< /A >
Abajo se muestra un ejemplo detallado. |
| |
| Aparte de atributos que se utilizan con otros elementos y que ya he mencionado en otros tutoriales, tales como ID, CLASS o STYLE, hay dos que se utilizan mucho: |
|
TITLE = "nombretitulo" |
|
Con este atributo ofrecemos más informacion sobre el contenido del vínculo. Esta información se hace visible al tener cierto tiempo el cursor sobre el hipervinculo. |
|
TARGET = "nombremarco" |
|
Con este atributo especificamos donde deseamos que se abra el contenido del vinculo que pulsamos. Puede tener varios valores de los que cito los mas importantes: |
|
 nombreframe: |
|
Es el nombre del marco donde se va a colocar el contenido. No me voy a extender ahora en explicar el termino FRAME. Solo diré que, aunque ha sido muy utilizado, hoy dia está desaconsejado su uso. Se basa en dividir la página web en marcos (FRAMES) independientes, de forma que se pueden cargar nuevos marcos en una parte de la página sin que los otros se vean afectados. |
|
_blank: |
|
Abre el contenido del vinculo en una nueva ventana. |
|
_self: |
|
Abre el contenido en la misma ventana/marco donde se encuentra el vinculo de llamada (si no se pone nada es el comportamiento por defecto) |
|
_top: |
|
Cancela todos los marcos y abre el contenido del vinculo en la ventana principal completa. |
| |
|
| NOTA: La propiedad TARGET tambien está desaconsejada para su uso. Si entrar en los motivos (en Internet hay conversaciones y discusiones sobre este tema para todos los gustos) si me gustaria añadir que hoy dia casi la totalidad de las webs la utilizan (sobre todo el TARGET=_blank) y se me antoja dificil que muchos desarrolladores dejen de utilizarla. De hecho, yo soy el primero que reconozco que la he utilizado y la utilizo con frecuencia y soy consciente de que debo dejar de utilizarla, cosa que voy intentando hacer poco a poco. |
| NOTA2: Aunque hayamos definido nuestra pagina con un DTD strict, la propiedad TARGET funcionará correctamente, pero el validador de HTML será el que nos la rechace. |
| Este EJEMPLO muestra todas las propiedades de la etiqueta < A > .El codigo es extenso y en vez de representarlo aqui, es preferible que, una vez cargada la pagina del ejemplo,visualice el codigo fuente de la pagina mediante "VER/CODIGO FUENTE" en IExplorer o "VER/CODIGO FUENTE DE LA PAGINA" en Firefox. |
| Puede hacer lo mismo con el documento local al que se llama desde el quinto enlace. |
| Los ejemplos que hemos visto estan todos representados sobre textos, pero como dice en la descripcion de la etiqueta < A >, tambien se pueden utilizar imagenes como hipervínculos. Para ello lo primero que vamos a hacer es definir la etiqueta HTML que se utiliza para representar imágenes y despues pasaremos a utilizarla para crear algun enlace o hipervínculo. |
| |
< IMG > : |
| Esta etiqueta HTML se utiliza para añadir a nuestra web elementos gráficos (imagenes). Ya hemos visto como hacer eso colocando las imagenes como fondos de nuestra web (BACKGROUND-IMAGE), pero ahora lo utilizaremos para colocarlas como contenidos e incluso como hipervínculos. Tambien se puede utilizar la etiqueta OBJECT para este propósito, pero ahora no hablaré de ella. Posiblemente en un tutorial posterior la explicaré con detalle. |
| IMG consta solo de la etiqueta de apertura, no siendo posible (porque no existe) colocar una etiqueta de cierre. Todas las propiedades que le añadamos irán dentro de la misma etiqueta. Las propiedades más representativas son: |
|
SRC= "url" |
|
Con esta propiedad indicamos la ruta a la imagen que desemos ubicar en nuestra web. Los formatos de imagen más utilizados son el JPG, el GIF y el PNG. |
|
ALT= "texto alternativo" |
|
Esta propiedad nos permite escribir un texto que se visualizará en el caso de que el navegador no sea capaz de visualizar la imagen, ya sea por sus propias limitaciones o porque nu encuentre la imagen especificada en la URL. |
|
HEIGHT y WIDTH medida |
|
Estas dos propiedades nos van a permitir eludir las dimensiones que la imagen tenga y especificar las que nosotros deseemos. Personalmente intento que las imagenes ya vengan con el tamaño adecuado, pues poner una imagen a un tamaño menor que el original solo hace que se vea mas pequeña pero ocupando el 'peso' de una grande y si lo hago al revés, mostraré una imagen de mala calidad (tamaño pequeño en ubicación grande).
Si no ponemos ni HEIGHT ni WIDTH la imagen se representará con su tamaño original. En caso de poner solo uno de ellos, la imagen mantendrá la proporcionalidad y ajustará el otro valor para que se vea en la misma relacion alto/ancho. Si especificamos las dos propiedades, la imagen se ceñirá a estos valores, deformándose según sea necesario.
Las unidades de medida son del mismo tipo que las utilizadas en otras propiedades (px, pt, ...). |
| |
|
| NOTA: A esta etiqueta tambien se le puede añadir la propiedad TITLE para que salga una breve descripcion si mantenemos el cursor del raton unos segundos sobre ella. |
| NOTA2: Mediante CSS podemos cambiar ciertos rasgos de esta etiqueta. Algunos de los que más se usan son los relativos a los bordes, para quitarlos, o cambiarles el aspecto, grosor o color (mira la etiqueta CSS BORDER). |
| NOTA3: Si queremos utilizar una imagen como hipervínculo, tan solo tenemos que sustituir el texto que suele ir incluido entre las etiquetas < A > y < /A > por la sentencia IMG completa. |
| El siguiente código muestra varios ejemplos con IMG. El primero con una imagen tal cual, el segundo con la misma imagen redimensionada en altura (fijate que la anchura tambien se reescala) y con ALT y TITLE, y el tercero cambiando el borde y utilizándola como hipervínculo. |
 |
| Este EJEMPLO muestra su ejecución. El ultimo hipervínculo del ejemplo anterior lo he puesto para que veas el borde que le sale a la imagen, que despues de pulsar el enlace, se convertirá en morado cuando retornemos a la página. Ese borde que coincide en color con el que toma el texto de los hipervínculos del primer ejemplo, me va a servir para el siguiente apartado. |
| |
| Dentro ya de CSS, creo que todos entendereis que puedo crear una clase y asignarsela a una imagen o a un texto, de manera que formateemos visualmente su aspecto. Pero el caso de los hipervínculos es algo distinto, y para formatearlos visualmente, aparte de las propiedades que ya conocemos, podemos usar unas pseudo-clases especificas para ellos. |
| |
:link :visited :hover :active |
| Estas pseudo-clases especifican los posibles estados en los que se puede encontrar un hipervínculo. |
|
:link (o a:link) |
|
Es para especificar las propiedades de los hipervínculos en estado de reposo, es decir, tal y como se encuentran antes de hacerles nada. |
|
:visited (o a:visited) |
|
Nos permitirá especificarle los cambios que deseamos que se produzcan cuando esos hipervínculo ya hayan sido visitados antes. Es excluyente con :link. |
|
:hover (o a:hover) |
|
Aqui podremos cambiar visualmente el hipervínculo cuando el cursor del raton pase sobre él. |
|
:active (o a:active) |
|
Para el momento en el que estemos pulsando sobre el enlace (justo mientras el boton del raton esté pulsado). |
| |
|
| Antes de que veais los ejemplos, he de advertiros que no todos los navegadores se comportan igual ante estas pseudo-clases, sobre todo con hover y con active. Tambien sucede que depende del navegador el tiempo que transcurre para que un hipervínculo ya visitado pase de nuevo a estado normal. |
| Con estas premisas, el código siguiente funciona perfectamente en Firefox 3.0 (que es el que yo estoy usando) y tiene un comportamiento diferente (no es el adecuado) sobre IExplorer 7. |
 |
| En este código he especificado tres clases distintas para tres tipos de hipervinculos. Lo he hecho asi para que veais que el orden en el que se coloquen estas pseudo-clases es importante. Ya os digo que :link y :visited deben estar en primer lugar, que :hover irá despues (si la ponemos antes no le hace caso) y que :active debe ir detras de :hover poque si no tampoco la considererá. |
| El EJEMPLO creo que lo muestra muy claramente, pero ejecutadlo preferiblemente en Firefox 3.0 o superior. En otros navegadores o versiones desconozco el comportamiento que pueden tener las dos primeras clases, aunque si que deberia funcionar bien la ultima, que es la correcta. |
NOTA: Estos ejemplo son con textos, pero tambien se pueden utilizar estas pseudo-clases con hipervinculos de tipo imagen, aunque no será el color del texto lo que cambiemos, sino por ejemplo, los bordes, o incluso la imagen representada. |
| |
| Hemos hablado durante todo el tutorial de los elementos URI o URL refiriendonos a ellos como direcciones completas o relativas para llegar a los recursos a los que deseamos acceder. Estos recursos pueden ser paginas web externas o internas, u otro tipo de documentos como imagenes o documento de texto ... |
Cuando el elemento buscado es externo (no está en nuestro servidor), la cosa es bien facil, colocamos la direccion completa y ya está. Pero si los documentos o paginas webs a los que accedemos son parte de nuestra propia web, trabajamos con direcciones relativas (es mucho más comodo) y para ello, debemos especificar en algun sitio la ruta absoluta de la que partimos, para que los navegadores puedan completar las rutas relativas con esa información.
Para eso utilizamos la etiqueta BASE. |
| |
< BASE > |
| No tiene etiqueta final. Se utiliza con HREF y se declara en el < HEAD >. La uri que se le pone al HREF especifica la direccion base a partir de la cual los vinculos relativos calcularán la direccion completa de cada ruta. |
| |
|
| Por ejemplo, Si declaramos BASE y utilizamos la direccion relativa de < A > como en el ejemplo siguiente: |
 |
La direccion relativa "../ejemplos/ejemplo5.html" se completaría con la absoluta especificada en BASE a:
http://www.wmasterfacil.com/ejemplos/ejemplo5.html |
Los .. retrocederian un directorio y se colocaria en 'www.wmasterfacil.com' y a partir de ahi añadiria el directorio 'ejemplos' y dentro de éste el fichero 'ejemplo5.html'.
|
| Y hasta aqui este tutorial. si teneis dudas, el banner de abajo os llevará a donde podeis exponerlas. Os contestaré lo antes posible. |
| |
Español
English
