HIPERVNCULOS

El inicio de la Web, fue el de la creacin de una red de documentos entrelazados, de tal manera que unos hiciesen referencia a otros para recuperarlos y poder leerlos: los hipervnculos. Un hipervnculo es lo que los anglosa ones denominan una !hot area" en un documento, una zona activa que al actuar sobre ella nos llevar# a otro punto del mismo documento, un documento independiente o alg$n otro tipo de recurso. El hipervnculo en s no es visible, pero s el contenido que incluyamos en el elemento que lo define y que, b#sicamente, puede ser cualquier elemento en lnea. Es posible usar como hipervnculo un te%to, pero tambi&n una imagen o un ob eto visual cualquiera. 'uestros hipervnculos ser#n porciones del propio te%to del documento. (osteriormente veremos cmo usar una imagen o distintas partes de una imagen para que act$en como hipervnculos.

)aptulo * + ,ipervnculos

-esumen ,./0

El elemento A
.odo lo que necesitamos para definir hipervnculos en nuestros documentos, ya sea como origen o destino, es conocer el elemento 2. Un hipervnculo de origen es un elemento 2 en el que su contenido, normalmente un te%to, sirve de llave de acceso a otro punto del documento o un documento distinto. Un hipervnculo de destino, por el contrario, es un elemento 2, habitualmente sin contenido, que asigna un nombre a un determinado punto de un documento, haciendo posible el acceso directo a &l mediante un hipervnculo de origen. El elemento 2 es un elemento en lnea, por lo que puede ser utilizado en el interior de un p#rrafo, una lista, un ttulo, etc., sin que ello provoque la creacin de un nuevo bloque en el documento. El contenido de un elemento 2 puede ser un te%to o cualquier otro elemento en lnea e%ceptuando el propio elemento 2. Es decir, no podemos definir un hipervnculo dentro de otro. .ampoco introducir elementos de bloque como parte de un hipervnculo. 0as marcas de apertura y cierre del elemento, 324 y 3524, son obligatorias, con independencia de que se est& definiendo el destino o el origen de un hipervnculo. 0a lista de atributos posibles es la gen&rica lang, dir, class, id, style, title y otro con unto de atributos especficos del elemento como access6ey, charset, coords, href, hreflang, name, rel, rev, shape, tabinde%,type. (or regla general siempre usaremos, como mnimo, o el atributo name para establecer el destino de un hipervnculo o href para el de origen.

)aptulo * + ,ipervnculos

-esumen ,./0

Marcadores y enlaces internos

Una de las primeras aplicaciones que podemos darle al elemento 2, si bien no es precisamente la m#s habitual entre los documentos que encontraremos en la Web, es la de facilitar la navegacin interna en un documento. Esto tiene sentido cuando la p#gina es e%tensa y cuenta con secciones claramente diferenciadas con un ndice de contenidos al inicio.

Marcadores de posicin
(ara facilitar la navegacin por nuestro documento, a fin de acceder directamente a cualquiera de las secciones y volver de &stas de nuevo al ndice, lo primero que tendremos que hacer ser# insertar marcadores de posicin en los puntos adecuados. Un marcador de posicin no es m#s que un punto concreto dentro del documento al que se le asigna un nombre o identificador, referencia que se puede utilizar posteriormente para acceder directamente a ese punto. 0a insercin de un marcador de posicin se lleva a cabo disponiendo un elemento 2 en el punto que interese. Este elemento debe contar como mnimo con el atributo name, al que asignaramos el nombre del marcador. (or regla general un elemento 2 que act$a como marcador no tendr# contenido, pero nada nos impide insertar entre la marca de inicio y fin un te%to. El valor asignado al atributo name debe ser $nico en el documento, no deben e%istir dos marcadores con el mismo nombre. 8u sinta%is ser# la siguiente: 32 name9:;nicio: 4 3524 Este elemento lo situaremos delante del punto al que deseamos ir. En el caso de que el marcador de posicin vaya a ir asociado a otro elemento ,./0, como en este caso son los encabezados de seccin, en lugar de a<adir un elemento 2 podemos asignar un identificador al propio elemento de destino mediante el atributo id. (or e emplo: 3,= id9:>uardar7:4 >uardar )omo 35,=4 )aptulo * + ,ipervnculos -esumen ,./0 =

En este caso el propio elemento ,= actuara como marcador de posicin, siendo el nombre asignado a id el equivalente al que habramos dado al atributo name del elemento 2. (uesto que pr#cticamente todos los elementos ,./0, incluyendo encabezados, p#rrafos, listas, im#genes, etc., cuentan con el atributo id, &ste es un m&todo abreviado para establecer marcadores de posicin prescindiendo del elemento 2.

Acceso a los marcadores

0os marcadores de posicin no son $tiles por s mismos, siendo necesario que alg$n hipervnculo, ya sea en el mismo documento o en otro diferente, apunte a ellos, permitiendo que el usuario, al activar el hipervnculo, acceda de forma directa al punto en que se defini el marcador. Un hipervnculo se define con un elemento 2 en el que aparece el atributo href. ?ste debe contener el destino del hipervnculo, acept#ndose como tal distintos tipos de U-0 y nombres de marcadores. ?stos deben ir precedidos de una almohadilla, lo cual permitir# al agente de usuario saber que se trata de un marcador y no de un U-0 en alg$n formato desconocido. (or e emplo: 32 href9:@>uardar7: 4 >uardar )omo 3524 Este elemento define un hipervnculo con el te%to !>uardar )omo", como contenido y el marcador de nombre !>uardar7" como destino. El te%to es el #rea caliente, sobre la que el usuario podr# actuar para activar el hipervnculo y provocar que el agente de usuario le muestre el punto donde est# el marcador. 'ormalmente el contenido de los hipervnculos, cuando es un te%to, aparece en un color diferente, por regla general en azul y con un subrayado, color que cambia dependiendo de que el usuario lo haya activado o no en alg$n momento. Ae esta forma sabra las secciones que ya ha ledo y las que no.

)aptulo * + ,ipervnculos

-esumen ,./0

Formato de los

iper!"nc#los

)omo casi todos los dem#s elementos de ,./0, el elemento 2 contempla la asociacin de informacin de estilo mediante el atributo style. Ae esta forma podemos conseguir f#cilmente que un hipervnculo aparezca con un tipo de letra distinto, diferente tama<o o un estilo que le distinga del te%to que le rodea y que no sea el tpico subrayado. 0gicamente, esa informacin habra que introducirla en cada elemento 2 que e%istiese en el documento, algo que, en la pr#ctica, supone una buena cantidad de traba o cuando hablamos de documentos reales, con decenas o cientos de hipervnculos. Uno de los elementos que puede contener ,E2A tiene como ob eC tivo definir estilos aplicables en general a todos los elementos de un cierto tipo o clase. Este elemento es 8.D0E, siendo sus etiquetas de apertura y cierre obligatorias y pudiendo contar con los atributos lang, dir, title, type, media. El atributo type debe aparecer obligatoriamente, indicando el lengua e en el que se e%presa la informacin de estilo. ,abitualmente siempre ser# te%t5css. (or su parte, el atributo media permite establecer estilos especficos para cada tipo de dispositivo o medio. 2lgunos de sus posibles valores son screen, braille y aural. .ambi&n puede indicarse, mediante el valor all, que los estilos se aplican a todos los dispositivos. 0a inclusin de la informacin de estilo en un elemento 8.D0E, en la cabecera de la p#gina, supone un paso adelante en el uso de )88 y la separacin del contenido y su presentacin. 8u sinta%is ser# la siguiente:
3,E2A4 38.D0E type9:te%t5css: media9:all:4 3ECC ;nformacin de estilo C4 358.D0E4 3 E C C Ftros elementos de ,E2A C C 4 35,E2A4

)aptulo * + ,ipervnculos

-esumen ,./0

Selectores$ propiedades % !alores

El contenido del elemento 8.D0E ser# una ho a de estilo )88, cuya sinta%is general ser# la siguiente: selector H propiedad: valorI propiedad: valor J selector H propiedad: valorI propiedad: valor J Un selector puede ser el nombre de uno o varios elementos, as como nombres de clases. 2 H fontCKeight : !bolder" I color : !blue ! J ,1 H color : ! >reen" J

El caso de los hipervnculos es algo especial, al tratarse de elementos que pueden encontrarse en diferentes estados. ?stos se representan mediante unos selectores conocidos como seudoCclases. 8us nombres y el estado al que se asocian son los siguientes: lin6 )orresponde a hipervnculos que a$n no han sido visitados. visited visitados. )orresponde a hipervnculos que ya han sido

active -epresenta el hipervnculo que est# activ#ndose, es decir aqu&l sobre el que estamos haciendo clic. hover -epresenta el hipervnculo sobre el que se encuentra el puntero del ratn.

)aptulo * + ,ipervnculos

-esumen ,./0

El orden en que se introduzcan los selectores en una ho a de estilo es significativo, ya que las propiedades se heredan entre selectores que corresponden a un mismo elemento.

Cdigo fuente ejemplo hipervnculos

Resultado ejemplo hipervnculos

)aptulo * + ,ipervnculos

-esumen ,./0

Hiper!"nc#los e&ternos
(odremos definir hipervnculos o enlaces a recursos e%ternos como p#ginas de la misma Web u otras direcciones independientes a la p#gina actual. 0a creacin de uno de estos enlaces es muy similar a la creacin de los enlaces locales. El $nico cambio radica en que el valor dado al atributo MhrefM es la direccin completa de ;nternet, sea otra p#gina Web, una imagen o cualquier otro archivo. 32 href9:http:55KKK.terra.es: 4 (ortal .erra 3524 32 href9:http:55KKK.terra.es5correo: 4 )orreo .erra 3524 32 href9:http:551N7.1*O.1.771: 4 8ervidor 2ulaG 3524 32 href9:http:551N7.1*O.1.7715PKeb1*5colores: 4 )olores 3524 32 href9:htmlQ7O: 4 2puntes ,o a de )RaacuteIlculo 3524 (odemos facilitar informacin adicional sobre el recurso al que se accede, esto lo podemos conseguir con los siguientes atributos: charset Este atributo especifica la codificacin caracteres del recurso designado por el elemento. de

hreflang Este atributo especifica el idioma base del recurso designado por href y slo puede utilizarse si se especifica href. type Este atributo da una indicacin sobre el tipo de contenido, de los contenidos disponibles del destino del vnculo. 2dmite cualquier tipo /;/E como te%t5plain Ste%to sin formatoT, te%t5html Sp#gina ,./0T, te%t5css Sho a de estilo )88T, image5 peg Simagen en formato pegT, etc.

'ormalmente no es necesario ninguno de estos atributos, ya que el agente de usuario recibe dicha informacin al acceder al recurso solicitado.

)aptulo * + ,ipervnculos

-esumen ,./0

El uso de U-0 relativas tiene un par de venta as frente a las direcciones absolutas. El primero, es que resulta m#s r#pido y breve no tener que escribir en cada hipervnculo una direccin completa. 0a utilidad real, es la ausencia de dependencias de esos hipervnculos respecto al servidor en que est&n alo adas las p#ginas. ;magine que en la supuesta p#gina principal todos los hipervnculos son absolutos, indicando como siempre el nombre de ordenador, dominio y camino de los documentos. 8i por cualquier circunstancia tiene que cambiar esta Web a otro dominio, otro ordenador o bien situarla en un camino distinto, se vera forzado a editar todos los hipervnculos de esa p#gina, y cualesquiera otras que contuviesen U-0 absolutos, para sustituir la raz por la que corresponda tras el cambio. Utilizando U-0 relativos este inconveniente no e%iste, y el con unto de documentos que componen este sitio puede ser trasladado a cualquier otro punto y seguir# funcionando satisfactoriamente. 8i la direccin base tomada por defecto, que es la del primer docuC mento solicitado por el agente de usuario, no es la apropiada, puede establecer otra e%plcitamente a<adiendo a ,E2A el elemento U28E. En caso de cambio a otro servidor o dominio, $nicamente tendra que modificar el contenido del atributo href de ese elemento, no todos los hipervnculos.

URL % marcadores
0os U-0 pueden combinarse con los marcadores de posicin, que ya sabemos cmo establecer y usar, para facilitar el acceso directo no ya a un documento, sino a un punto concreto de &ste. (ara ello no hay m#s que a<adir el nombre del marcador tras el del documento, separando ambos elementos con el car#cter @. Esta combinacin puede darse tanto en U-0 absolutos como relativos.

32 href9:htmlQ7O@;mprimir: 4 2puntes ,o a de )RaacuteIlculo 3524

)aptulo * + ,ipervnculos

-esumen ,./0

Relaciones entre doc#mentos enla'ados

0os hipervnculos que se utilizan para conectar las distintas p#ginas que componen un sitio Web, guarda una cierta relacin entre s. (ara ello disponemos de dos atributos muy $tiles, que son los siguientes: rel 8irve para indicar la relacin que guarda el documento al que apunta href respecto al documento actual. rev Establecera la relacin inversa del atributo rel, es decir, la que guarda el documento actual respecto a aqu&l al que se hace referencia.

.anto rel como rev pueden tomar cualquiera de los valores siguientes: 2lternate Una versin posiblemente en otro idioma. 2ppendi% 8tart 'e%t (rev )ontents inde% )hapter 8ection Un ap&ndice. 0a primera en una coleccin de p#ginas. 0a siguiente. 0a anterior. Una tabla de contenidos. Un ndice del documento. Un captulo. Una seccin. alternativa de la misma p#gina,

8tylesheet Una ho a de estilo. )aptulo * + ,ipervnculos

-esumen ,./0

1Q

(ipos de URL
,asta ahora hemos venido utilizando en los hipervnculos U-0 cuyo esquema siempre es ,..( , es decir, que apuntan a documentos Web. ?ste, sin embargo, no es el $nico tipo de U-0 disponible, y un hipervnculo puede utilizar otros para facilitar el acceso a un archivo en un servidor V.( , un determinado mensa e de un grupo de conversacin, el envo de un mensa e de correo electrnico, etc. 2lgunos de esos tipos son: ftp:55servidor5camino5archivo

2punta a un recurso alo ado en un cierto camino de un servidor, como en el caso de las p#ginas, pero en este caso ese servidor utiliza el protocolo V.( para comunicarse en lugar de ,..( . Aicho protocolo es m#s antiguo y est# dise<ado especficamente para la transferencia de archivos. neKs:55grupo5mensa e

2bre el lector de noticias que tenga configurado el usuario y le lleva directamente al grupo indicado y, dentro de &ste, al mensa e si es que se ha facilitado esta informacin. mailto:usuarioWservidor.dominio

2bre el cliente de correo que tenga configurado el usuario e introduce como direccin de destino la indicada en el U-0, facilitando as el envo de un mensa e. file:55camino5archivo

2punta a un archivo alo ado en el ordenador donde est# vi&ndose la p#gina.

)aptulo * + ,ipervnculos

-esumen ,./0

11

Acti!acin mediante el teclado

0os navegadores, tipo de agente de usuario m#s habitual para el acceso a la Web, activan los hipervnculos cuando el usuario hace clic sobre ellos con el puntero del ratn. 8eguramente sea &ste el mecanismo m#s utilizado, pero no es el $nico. 8e pueden activar los hipervnculos de dos maneras distintas: seleccion#ndolo con el tabulador y activ#ndolo con ;ntro o usando un ata o de teclado. )uando est# seleccionado un determinado ob eto de la p#gina, en este caso el hipervnculo, se dice que dicho ob eto tiene el foco de entrada del teclado. Esto significa que cualquier accin de teclado que efectuemos ir# dirigida a &l, por e emplo la pulsacin de la tecla ;ntro para activar el enlace. El orden por defecto para el acceso mediante el tabulador se puede fi ar e%plcitamente mediante el atributo tabinde%, al que asignaramos un n$mero comprendido entre F y =7L*L. 0os n$meros no tienen necesariamente que ser consecutivos, pudiendo usar 1, 1Q, 1G y 7G, por poner un e emplo, para establecer el orden de cuatro hipervnculos. 8e elegir# primero el que tenga el menor valor, al pulsar el tabulador el inmediato siguiente y as de forma sucesiva. Ftra alternativa consiste en asociar a los hipervnculos un ata o de teclado, m&todo abreviado. )on este fin utilizaremos el atributo access6ey. El valor a asignar al atributo es un car#cter que, dependiendo del sistema, habra que combinarlo con la tecla 2lt. Este hecho podra indicarse mediante el atributo title. 0a sinta%is a utilizar ser# la siguiente: 32 href9:htmlQ7O@;mprimir: access6ey9:;: tabinde%9:G:

ttle9:2lt5)trlC' 8ecciRoacuten ;mprimir :4 2puntes ,o a de )RaacuteIlculo 3524

0a utilizacin de tabinde% y access6ey no es e%cluyente, por lo que el mismo hipervnculo puede ser activado mediante un clic de ratn, el acceso a trav&s del tabulador o el ata o de teclado que se hubiese asignado. )aptulo * + ,ipervnculos -esumen ,./0 17

Otros atri)#tos del elemento A

0os atributos shape y coords los veremos con posterioridad al utilizar hipervnculos sobre ob etos como las im#genes. En estos casos, el ob eto completo puede ser un hipervnculo $nico, pero tambi&n cabe la posibilidad de dividir su #rea en varias zonas y asociar un U-0 a cada una. 0os atributos shape y coords sirven para definir la forma de cada una de esas zonas y sus coordenadas.

)aptulo * + ,ipervnculos

-esumen ,./0

1=