Enlaces

Captulo 4. Enlaces
El lenguaje de marcado HTML se defini teniendo en cuenta algunas de las
caractersticas que existan en ese momento para la publicacin digital de contenidos.
Entre los conceptos utilizados en su creacin, se encuentra el mecanismo de
"hipertexto".
e !ec!o, las letras "HT" de la sigla HTML significan "hipertexto" #hypertext en
ingl$s%, por lo que el significado completo de HTML podra traducirse como "lenguaje
de marcado para !ipertexto".
La incorporacin del hipertexto fue una de las cla&es del $xito del lenguaje HTML, 'a
que permiti crear documentos interacti&os que proporcionan informacin adicional
cuando se solicita. El elemento principal del !ipertexto es el "hiperenlace", tambi$n
llamado "enlace (eb" o simplemente "enlace".
Los enlaces se utilizan para establecer relaciones entre dos recursos. )unque la ma'ora
de enlaces relacionan p*ginas (eb, tambi$n es posible enlazar otros recursos como
im*genes, documentos ' arc!i&os.
+na caracterstica que no se suele tener en cuenta en los enlaces es que est*n formados
por dos extremos ' un sentido. En otras palabras, el enlace comienza en un recurso '
apunta !acia otro recurso. ,ada uno de los dos extremos se llaman "anchors" en ingl$s,
que se puede traducir literalmente como "anclas".
4.1. URL
)ntes de empezar a crear enlaces, es necesario comprender ' dominar el concepto de
+-L. El acrnimo +-L #del ingl$s Uniform Resource Locator% !ace referencia al
identificador .nico de cada recurso disponible en /nternet. Las +-L son esenciales para
crear los enlaces, pero tambi$n se utilizan en otros elementos HTML como las im*genes
' los formularios.
La +-L de un recurso tiene dos objeti&os principales0
/dentificar de forma .nica a ese recurso
1ermitir localizar de forma eficiente ese recurso
En primer lugar, las +-L permiten que cada p*gina HTML publicada en /nternet tenga
un nombre .nico que permita diferenciarla de las dem*s. e esta forma es posible crear
enlaces que apunten de forma inequ&oca a una determinada p*gina.
2i se accede a la p*gina principal de 3oogle, la direccin que muestra el na&egador es0
http://www.google.com
Pgina 1
Enlaces
La cadena de texto http://www.google.com es la +-L completa de la p*gina principal
de 3oogle. La +-L de las p*ginas es imprescindible para crear los enlaces, 'a que
permite distinguir una p*gina de otra.
El segundo objeti&o de las +-L es el de permitir la localizacin eficiente de cada
recurso de /nternet. 1ara ello es necesario comprender las diferentes partes que forman
las +-L. +na +-L sencilla siempre est* formada por las mismas tres partes. 2i por
ejemplo se considera la siguiente +-L0
http://www.librosweb.es/xhtml/capitulo4.html
Las partes que componen la +-L anterior son0
1rotocolo #http://%0 el mecanismo que debe utilizar el na&egador para acceder
a ese recurso. Todas las p*ginas (eb utilizan http://. Las p*ginas (eb seguras
#por ejemplo las de los bancos ' las de los ser&icios de email% utilizan https://
#se a4ade una letra s%.
2er&idor #www.librosweb.es%0 simplificando muc!o su explicacin, se trata del
ordenador en el que se encuentra guardada la p*gina que se quiere acceder. Los
na&egadores son capaces de obtener la direccin de cada ser&idor a partir de su
nombre.
-uta #/xhtml/capitulo4.html%0 camino que se debe seguir, una &ez que se !a
llegado al ser&idor, para localizar el recurso especfico que se quiere acceder.
1or tanto, las +-L no slo identifican de forma .nica a cada recurso de /nternet, sino
que tambi$n proporcionan a los na&egadores la informacin necesaria para poder llegar
!asta ese recurso.
La ma'ora de +-L son tan sencillas como la +-L mostrada anteriormente. 5o
obstante, existen +-L complejas formadas por m*s partes.
http://www.alistapart.com/comments/webstandards2008?page=5#42
Las cinco partes que forman la +-L anterior son0
1rotocolo #http://%
2er&idor #www.alistapart.com%
-uta #/comments/webstandards2008%
,onsulta #?page=5%0 informacin adicional necesaria para que el ser&idor
localice correctamente el recurso que se quiere acceder. 2iempre comienza con
el car*cter ? ' contiene una sucesin de palabras separadas por = ' &
2eccin ##42%0 permite que el na&egador se posicione autom*ticamente en una
seccin de la p*gina (eb. 2iempre comienza con el caracter #
,omo las +-L utilizan los caracteres :, =, & ' / para separar sus partes, estos caracteres
est*n reser&ados ' no se pueden utilizar libremente. )dem*s, algunos caracteres no
est*n reser&ados pero pueden ser problem*ticos si se utilizan en la propia +-L.
Pgina 2
Enlaces
2i es necesario incluir estos caracteres reser&ados ' especiales en una +-L, se
sustitu'en por combinaciones de caracteres seguros. Esta sustitucin se denomina
codificacin de caracteres ' el ser&idor realiza el proceso in&erso #decodificacin%
cuando le llega una +-L con los caracteres codificados.
) continuacin se muestra la tabla para codificar los caracteres m*s comunes0
Carcter original Carcter codificado Carcter original Carcter codificado
/ %2F ? %3F
: %3A @ %40
= %3D & %26
" %22 \ %5C
' %60 ~ %7E
#espacio en blanco%
%20 # %23
1or otra parte, aunque desde !ace tiempo 'a es posible incluir en las +-L caracteres de
otros idiomas que no sean el ingl$s, a.n no es completamente seguro utilizar estos
caracteres en las +-L. 2i se utilizan letras como , , o , es posible que algunos
na&egadores no las interpreten de forma correcta.
La solucin consiste en codificar todos los caracteres que no existen en ingl$s. La
siguiente tabla muestra la codificacin de los caracteres m*s utilizados0
Carcter original Carcter codificado Carcter original Carcter codificado
%F1 %D1
%E1 %C1
%E9 %C9
%ED I %CD
%F3 %D3
%FA %DA
%E7 %C7
Teniendo en cuenta las dos tablas anteriores de codificacin de caracteres, es f*cil crear
las +-L correctas sin caracteres problem*ticos0
<!-- URL problemtica -->
http://www.ejemplo.com/estaciones/otoo.html

<!-- URL correcta -->
http://www.ejemplo.com/estaciones/oto%F1o.html

<!-- URL problemtica -->
http://www.ejemplo.com/ruta/nombre pgina.html

<!-- URL correcta -->
http://www.ejemplo.com/ruta/nombre%20p%E1gina.html
Pgina 3
Enlaces
4.2. Enlaces relativos y absolutos
Las p*ginas (eb !abituales suelen contener decenas de enlaces de diferentes tipos. La
siguiente imagen muestra algunos de los tipos de enlaces de la p*gina principal del sitio
(eb (((.t!in6&itamin.com0
Figura 4.1 Ejemplo de diferentes tipos de enlaces en la p*gina 789:erea2treet.com
En esa p*gina, cuando se pinc!a sobre algunos enlaces, el na&egador abandona el sitio
(eb para acceder a p*ginas que se encuentran en otros sitios. Estos enlaces se conocen
como "enlaces externos". 2in embargo, la ma'ora de enlaces de un sitio (eb apuntan a
p*ginas del propio sitio (eb, por lo que se denominan "enlaces internos".
)dem*s de internos;externos, la otra caracterstica que diferencia a los enlaces #' por
tanto, tambi$n a las +-L% es si el enlace es absoluto o relati&o. Las URL absolutas
inclu'en todas las partes de la +-L #protocolo, ser&idor ' ruta% por lo que no se necesita
m*s informacin para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las +-L para !acerlas m*s bre&es.
,omo se trata de +-L incompletas, es necesario disponer de informacin adicional para
obtener el recurso enlazado. En concreto, para que una +-L relati&a sea .til es
imprescindible conocer la +-L del origen del enlace.
Las +-L relati&as se constru'en a partir de las +-L absolutas ' prescinden de la parte
del protocolo, del nombre del ser&idor e incluso de parte o toda la ruta del recurso
enlazado. )unque las +-L relati&as pueden ser difciles de entender para los que
comienzan con HTML, son tan .tiles que todos los sitios (eb las utilizan.
Pgina 4
Enlaces
/magina que dispones de una p*gina publicada en
!ttp0;;(((.ejemplo.com;ruta<;ruta=;pagina<.!tml ' quieres incluir en ella un enlace a
otra p*gina que se encuentra en !ttp0;;(((.ejemplo.com;ruta<;ruta=;pagina=.!tml.
,omo las +-L identifican de forma .nica a los recursos de /nternet ' proporcionan la
informacin necesaria para llegar !asta ellos, el enlace debera utilizar la +-L completa
de la segunda p*gina.
Las +-L completas tambi$n se llaman +-L absolutas, 'a que el na&egador no necesita
disponer de informacin adicional para localizar el recurso enlazado. 2i se utilizan
siempre las +-L absolutas, los enlaces est*n completamente definidos.
2in embargo, escribir siempre las +-L completas es bastante aburrido, cuesta muc!o
tiempo ' !ace imposible cambiar la ubicacin de los contenidos de un sitio (eb. 1or ese
moti&o, casi todos los sitios (eb de /nternet utilizan +-L relati&as siempre que es
posible.
+na +-L relati&a es una &ersin abre&iada de una +-L absoluta. 2u objeti&o es
eliminar todas las partes de la +-L absoluta que se pueden adivinar a partir de la
informacin de contexto de la p*gina (eb. En otras palabras, las +-L relati&as
apro&ec!an la inteligencia de los na&egadores para crear +-L incompletas que los
na&egadores pueden completar deduciendo la informacin que falta.
,onsiderando de nue&o el ejemplo anterior, la +-L a la que se quiere enlazar utiliza el
mismo protocolo ' se encuentra en el mismo ser&idor que la p*gina origen, por lo que la
+-L relati&a puede prescindir de esas partes0
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html
En el ejemplo anterior, las dos +-L son equi&alentes porque cuando no se indica el
protocolo ' el ser&idor de una +-L, los na&egadores suponen que son los mismos que
los de la p*gina origen. 1or lo tanto, cuando el na&egador encuentra la +-L
/ruta1/ruta2/pagina2.html, realiza el siguiente proceso0
1. La URL no es absoluta, por lo que se debe determinar la URL absoluta
a partir de la URL relativa para poder cargar el recurso enlaado.
2. ! la URL relativa le "alta el protocolo # el servidor, por lo que se
supone que son los mismos que los de la pgina origen $http:// #
www.ejemplo.com%.
3. &e a'aden las partes que "altan a la URL relativa para obtener la URL
absoluta( http:// ) www.ejemplo.com ) /ruta1/ruta2/pagina2.html *
+ttp(,,---.e.emplo.com,ruta1,ruta2,pagina2.+tml.
)unque el ejemplo mostrado es el caso m*s sencillo de +-L relati&a, existen otros
casos m*s a&anzados en los que se prescinde de parte o toda la ruta del recurso que se
enlaza. ) continuacin se muestran los cuatro tipos diferentes de +-L relati&as0
<% El origen y el destino del enlace se encuentran en el iso directorio
Pgina /
Enlaces
2i desde una p*gina (eb se quiere enlazar un recurso que se encuentra en el mismo
directorio del ser&idor, la +-L relati&a puede prescindir de todas las partes de la +-L
absoluta sal&o el nombre del recurso enlazado.
Elemento Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaada
Pgina -eb llamada pagina2.html # que se encuentra en el
mismo directorio
URL
absoluta
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html
URL relativa
pagina2.html
,uando el na&egador encuentra una +-L relati&a que slo consiste en el nombre de un
recurso, supone que el protocolo, ser&idor ' directorio del recurso enlazado son los
mismos que los del origen del enlace.
=% El destino del enlace se encuentra cerca de su origen y en un nivel superior
En este caso, el recurso que se enlaza no est* en el mismo directorio que el origen del
enlace pero s que est* cerca ' en alg.n directorio superior. La +-L relati&a debe
indicar de alguna manera que es necesario subir un ni&el en la jerarqua de directorios
para llegar !asta el recurso.
1ara indicar al na&egador que debe subir un ni&el, se inclu'en dos puntos ' una barra
#../% en la ruta del recurso enlazado. e esta forma, cada &ez que aparece ../ en una
+-L relati&a, significa que se debe subir un ni&el.
Element
o
Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaada
Pgina -eb llamada pagina2.html # que se encuentra en el
directorio superior llamado ruta2
URL
absoluta
http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL
relativa
../pagina2.html
,uando el na&egador encuentra la +-L relati&a ../pagina2.html, sabe que para
encontrar el recurso enlazado #pagina2.html% tiene que subir un ni&el desde el lugar en
el que se encuentra esa +-L relati&a. La p*gina que inclu'e esa +-L se encuentra en el
Pgina 0
Enlaces
directorio ruta1/ruta2/ruta3, por lo que subir un ni&el equi&ale entrar en el
directorio ruta1/ruta2.
e la misma forma, si el destino se encuentra un par de ni&eles por encima, se debe
incluir ../ dos &eces seguidas0
Element
o
Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaada
Pgina -eb llamada pagina2.html # que se encuentra en el
directorio superior llamado ruta1
URL
absoluta
http://www.ejemplo.com/ruta1/pagina2.html
URL
relativa
../../pagina2.html
)dem*s de subir ni&eles, tambi$n se puede entrar en otros directorios para obtener los
recursos0
Element
o
Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaada
Pgina -eb llamada pagina2.html # que se encuentra en un
directorio llamado ruta4 que se encuentra en la ra1 del servidor
URL
absoluta
http://www.ejemplo.com/ruta4/pagina2.html
URL
relativa
../../../ruta4/pagina2.html
2i se intentan subir m*s ni&eles de los que es posible, el na&egador ignora todos los ../
sobrantes. 2i la p*gina que tiene el enlace es
!ttp0;;(((.ejemplo.com;ruta<;ruta=;ruta>;pagina<.!tml ' la +-L relati&a que se
inclu'e es ../../../../../pagina2.html, el na&egador realmente la interpreta como
../../../pagina2.html.
,omo el objeti&o de las +-L relati&as es crear +-L m*s cortas ' sencillas que las +-L
absolutas, este m$todo slo se puede utilizar cuando el origen ' el destino se encuentran
cerca, porque de otro modo la +-L relati&a se complica demasiado.
>% El destino del enlace se encuentra cerca de su origen y en un nivel inferior
Pgina 2
Enlaces
Este caso es mu' similar al anterior, pero m*s sencillo. 2i el recurso enlazado se
encuentra en alg.n directorio inferior al que se encuentra el origen, slo es necesario
indicar el nombre de los directorios a los que debe entrar el na&egador.
Element
o
Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaada
Pgina -eb llamada pagina2.html # que se encuentra en un
directorio in"erior llamado ruta4
URL
absoluta
http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/pagina2.html
URL
relativa
ruta4/pagina2.html
e la misma forma, se pueden indicar &arios directorios seguidos para que el na&egador
descienda jer*rquicamente por la estructura de directorios0
Eleme
nto
Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaa
da
Pgina -eb llamada pagina2.html # que se encuentra en un
directorio in"erior llamado ruta6 que est dentro del directorio ruta5
# que a su ve est dentro del directorio ruta4
URL
absolut
a
http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/ruta5/ruta6/pagin
a2.html
URL
relativ
a
ruta4/ruta5/ruta6/pagina2.html
7% El origen y el destino del enlace se encuentran uy ale!ados
,uando el origen ' el destino de un enlace se encuentran mu' alejados #pero en el
mismo ser&idor% las +-L relati&as se pueden complicar en exceso. )unque es posible
utilizar ../ para subir por la jerarqua de directorios ' se puede entrar en cualquier
directorio indicando su nombre, las +-L relati&as que se obtienen son demasiado largas
' complicadas.
Pgina 3
Enlaces
En estos casos, lo m*s sencillo es indicar la ruta completa !asta el recurso enlazado
comenzando desde la raz del ser&idor (eb. 1or lo tanto, estas +-L relati&as slo
omiten el protocolo ' el nombre del ser&idor.
Element
o
Valor
Pgina
origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Pgina
enlaada
Pgina -eb llamada pagina2.html # que se guarda en un directorio
llamado ruta7 que se encuentra en la ra1 del servidor
URL
absoluta
http://www.ejemplo.com/ruta7/pagina2.html
URL
relativa
/ruta7/pagina2.html
,uando la +-L relati&a comienza por /, el na&egador considera que es la ruta completa
comenzando desde la raz del ser&idor, por lo que slo le a4ade el protocolo ' el nombre
del ser&idor origen.
) continuacin se resumen los cuatro posibles casos de +-L relati&as ' el
procedimiento que sigue el na&egador para con&ertirlas en +-L absolutas0
Si la URL
relativa...
El navegador la transforma en URL absoluta...
...s4lo consiste en
el nombre de un
recurso
...a'adiendo el protocolo, servidor # ruta completa del
origen del enlace
...comiena por ../
...a'adiendo el protocolo # servidor del origen del enlace,
subiendo un nivel en la .erarqu1a de directorios #
a'adiendo el resto de la ruta incluida en la URL relativa
...comiena por / ...a'adiendo el protocolo # servidor del origen del enlace
En cualquier otro
caso
...a'adiendo el protocolo, servidor # ruta completa del
origen del enlace, a la que se a'ade la ruta incluida en la
URL relativa
4.". Enlaces bsicos
Los enlaces en HTML se crean mediante la etiqueta <a> #su nombre &iene del ingl$s
"anchor", literalmente traducido como "ancla"%. ) continuacin se muestra la definicin
simplificada de <a> ' m*s adelante se muestra su definicin completa0
Pgina 5
Enlaces
Eti#ueta $a%
&tributos
counes
b*sicos, internacionalizacin, e&entos ' foco
&tributos
propios
name = "texto" ? 1ermite nombrar al enlace para que se
pueda acceder desde otros enlaces
href = "url" ? /ndica la +-L del recurso que se quiere
enlazar
'ipo de
eleento
En lnea
(escripci)n 2e emplea para enlazar todo tipo de recursos
El atributo m*s importante de la etiqueta <a> es href, que se utiliza para indicar la +-L
a la que apunta el enlace. ,uando el usuario pinc!a sobre un enlace, el na&egador se
dirige a la +-L del recurso indicado mediante href. Las +-L de los enlaces pueden ser
absolutas, relati&as, internas ' externas.
,on la definicin anterior, para crear un enlace que apunte a la p*gina principal de
3oogle solamente !abra que incluir lo siguiente en un documento HTML0
<a href="http://www.google.com">Pgina principal de Google</a>
,omo el atributo href indica una +-L, un enlace puede apuntar a cualquier tipo de
recurso al que pueda acceder el na&egador. El siguiente enlace apunta a una imagen, que
se mostrar* en el na&egador cuando el usuario pinc!e sobre el enlace0
<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen
interesante para un fondo de escritorio</a>
e la misma forma, los enlaces pueden apuntar directamente a documentos 1@, Aord,
etc.
<a href="http://www.ejemplo.com/informe.pdf">Descargar informe
completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc">Descargar informe
completo [DOC]</a>
+n truco mu' .til con los enlaces es el uso de +-L relati&as para poder &ol&er al inicio
del sitio (eb desde cualquier p*gina (eb interior0
<a href="/">Volver al inicio</a>
El enlace anterior utiliza una +-L relati&a con una ruta que apunta directamente a la
raz del ser&idor. 1ara obtener la +-L absoluta, el na&egador a4ade el mismo protocolo
' el mismo nombre de ser&idor de la p*gina en la que se encuentra el enlace. El
resultado es que cuando se pinc!a ese enlace, siempre se &uel&e al inicio del sitio (eb,
independientemende de la p*gina en la que se inclu'a el enlace.
El otro atributo b*sico de la etiqueta <a> es name, que permite definir enlaces dentro de
una misma p*gina (eb. 2i una p*gina es mu' larga, puede ser .til mostrar enlaces de
Pgina 16
Enlaces
tipo "Saltar hasta la segunda seccin", "Volver al principio de la
pgina", etc.
Este tipo de enlaces son especiales, 'a que la +-L de la p*gina siempre es la misma
para todas las secciones ' por tanto, debe a4adirse otra parte a las +-L para identificar
cada seccin.
<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id
ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus.
Praesent condimentum mattis ligula.</p>

...

<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia
a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id,
placerat varius, facilisis eget, dolor.</p>

...
El atributo name permite crear "enlaces &acos" que !acen referencia a secciones dentro
de una misma p*gina. +na &ez definidos los "enlaces &acos", es posible crear un enlace
que apunte directamente a una seccin concreta de una p*gina0
<!-- Enlace normal a la pgina -->
<a href="http://www.ejemplo.com/pagina1.html">Enlace a la pgina 1</a>

<!-- Enlace directo a la segunda seccin de la pgina -->
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a
la seccin 2 de la pgina 1</a>
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales,
sal&o que se a4ade el smbolo # seguido del nombre de la seccin a la que se apunta.
,uando el usuario pinc!a sobre uno de estos enlaces, el na&egador accede a la p*gina
apuntada por la +-L ' baja directamente a la seccin cu'o nombre se indica despu$s
del smbolo #.
Tambi$n es posible utilizar este tipo de enlaces con +-L relati&as en una misma p*gina.
El siguiente ejemplo a4ade enlaces de tipo "Volver al inicio de la pgina" en
&arias secciones0
<a name="inicio"></a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id
ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus.
Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia
a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id,
placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...
Pgina 11
Enlaces
Los enlaces directos a secciones tambi$n funcionan con el atributo id de cualquier
elemento. El siguiente ejemplo es equi&alente al ejemplo anterior0
<h1 id="inicio">Ttulo de la pgina</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id
ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus.
Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia
a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id,
placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...
El nombre de la seccin que se indica despu$s del smbolo # puede utilizar el &alor de
los atributos id de cualquier elemento. e !ec!o, se recomienda utilizar los atributos id
de los elementos 'a existentes en la p*gina en &ez de crear "enlaces &acos" de tipo <a
name="nombre_seccion"></a>.
Ejercicio 9
) partir de la estructura de directorios ' arc!i&os indicada en la siguiente imagen0
Figura 4.2 Estructura de arc!i&os ' directorios de un sitio (eb de ejemplo
<% ,rear la siguiente p*gina llamada indice.html que sir&a como p*gina principal del
sitio0
Pgina 12
Enlaces
Figura 4." 1*gina principal del sitio (eb de ejemplo
=% ,rear la p*gina de ndice del portfolio0
Figura 4.4 1*gina con la informacin sobre los pro'ectos realizados
Pgina 13
Enlaces
/magen <
/magen =
*oluci)n 1+.,. E!ercicio ,
1*gina principal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mi Sitio</title>
</head>

<body>

<h1>Mi Sitio</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis posuere justo. Nam vel neque. Proin sagittis mauris sit amet
nisl. Sed ipsum. Aliquam vitae justo.</p>

<h2>Ultimos proyectos</h2>
Pgina 14
Enlaces

<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis
dignissim justo, et euismod enim odio sit amet erat. Aliquam dui
ligula, porttitor eu, facilisis vitae, ornare sed, tortor.</p>

<p><a href="portfolio/indice.html" title="Ultimos proyectos realizados
por Mi Sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>


</body>

</html>
1*gina principal del portfolio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mi Sitio</title>
</head>

<body>

<p><a href="../indice.html" title="Pgina principal de Mi
Sitio">Volver a la pagina principal</a></p>

<h1>Ultimos proyectos</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis posuere justo. Nam vel neque.</p>

<h3>Proyecto 1</h3>

<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis
dignissim justo, et euismod enim odio sit amet erat.</p>

<p><a href="../imagenes/proyecto1.png" title="Imagen del Proyecto
1">Ver imagen del Proyecto 1</a></p>

<h3>Proyecto 2</h3>

<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis
dignissim justo, et euismod enim odio sit amet erat.</p>

<p><a href="../imagenes/proyecto2.png" title="Imagen del Proyecto
2">Ver imagen del Proyecto 2</a></p>

</body>

</html>
Pgina 1/
Enlaces
4.4. Enlaces avan-ados
/ncluir enlaces b*sicos mediante la etiqueta <a> es mu' sencillo. 2in embargo, la
definicin completa de <a> es mu' compleja, 'a que dispone de &arios atributos
especficos importantes. ) continuacin se muestra la definicin completa de <a>0
Etiqueta <a>
Atributos
comunes
bsicos, internacionaliaci4n, eventos # "oco
Atributos
propios
name = "texto" ? 1ermite nombrar al enlace para que se pueda
acceder desde otros enlaces
href = "url" ? /ndica la +-L del recurso que se quiere enlazar
hreflang = "codigo_idioma" ? /dioma del recurso enlazado
type = "tipo_de_contenido" ? 1ermite "a&isar" al na&egador
sobre el tipo de contenido que se enlaza #im*genes, arc!i&os, etc.%
para que pueda preparase en caso de que no entienda ese contenido
rel = "tipo_de_relacion" ? escribe la relacin del documento
actual con el recurso enlazado
rev = "tipo_de_relacion" ? escribe la relacin del recurso
enlazado con el documento actual
charset = "tipo_de_charset" ? escribe la codificacin del
recurso enlazado
Tipo de
elemento
En l1nea
escripci
!n
&e emplea para enlaar todo tipo de recursos
".".#. $dioma del enlace %&reflang'
El enlace puede indicar al na&egador el idioma del recurso que se enlaza. 1ara
establecer el &alor del idioma, se utiliza un cdigo estandarizado de dos letras. )dem*s
del idioma gen$rico, tambi$n se puede indicar una &ariacin idiom*tica. Ejemplo de
cdigos de idioma m*s utilizados0
(!di
go
$diom
a
Variaci!n
idiom)tica
en
7ngl8s 9
Pgina 10
Enlaces
(!di
go
$diom
a
Variaci!n
idiom)tica
en-AU
7ngl8s !ustralia
en-US
7ngl8s Estados Unidos
es
Espa'
ol
9
es-AR
Espa'
ol
!rgentina
es-ES
Espa'
ol
Espa'a
es-MX
Espa'
ol
:8;ico
Btros cdigos utilizados son0 fr #franc$s%, de #alem*n%, it #italiano%, nl #!oland$s%, el
#griego%, pt #portugu$s%, ar #*rabe%, he #!ebreo%, ru #ruso%, zh #c!ino%, ja #japon$s%.
La lista completa de cdigos de idioma est* definida en el est*ndar /2B 9>C.
".".*. Tipo de contenido %t+pe'
2e utiliza para notificar al na&egador sobre el tipo de contenido que se enlaza. 2e indica
mediante una cadena de texto cu'os posibles &alores tambi$n est*n estandarizados. Los
&alores de los contenidos m*s utilizados son los siguientes0 "text/html" #p*ginas
HTML%, "image/png" #im*genes con formato 153%, "image/gif" #im*genes con
formato 3/@%, "text/css" #!ojas de estilo ,22%, "application/rss+xml" #arc!i&os
-22%.
La lista completa de tipos de contenido se define en los est*ndares -@, =D78 ' -@,
=D79.
".".,. Tipo de relaci!n %rel + rev'
Los enlaces pueden proporcionar informacin adicional mu' .til para los na&egadores '
para los motores de b.squeda como 3oogle. Los atributos rel ' rev permiten indicar la
relacin que la p*gina actual tiene con la p*gina a la que se enlaza #atributo rel% ' la
relacin que tiene la p*gina enlazada con la p*gina actual #atributo rev%.
Los tipos de relacin definidos son los siguientes0
alternate < 7ndica que es una versi4n alternativa al documento actual
$puede ser una versi4n en otro idioma o una versi4n preparada para
otro medio, como una impresora o un dispositivo m4vil%
stylesheet < 7ndica que se +a enlaado una +o.a de estilos
Pgina 12
Enlaces
start < 7ndica que se trata del primer documento de una colecci4n de
documentos $por e.emplo el primer cap1tulo de un libro%
next < 7ndica que es el documento que sigue al actual dentro de una
secuencia l4gica de documentos $por e.emplo, los cap1tulos de un
libro%
prev 9 7ndica que es el documento que precede al actual dentro de
una secuencia l4gica de documentos $por e.emplo, los cap1tulos de un
libro%
contents < 7ndica que el recurso enlaado es el documento que
contiene la tabla de contenidos de la colecci4n de documentos $por
e.emplo, el 1ndice de un libro%.
bookmark < Establece el enlace actual como un =marcador= o
="avorito=. Un marcador es un enlace que constitu#e un punto de
entrada mu# importante dentro del documento.
La especificacin oficial de HTML define la lista completa de tipos de relaciones que se
pueden utilizar.
".".". (odificaci!n de caracteres %c&arset'
)dem*s del idioma, tipo de contenido ' relacin del recurso que se enlaza, los enlaces
tambi$n pueden indicar la codificacin de caracteres que utiliza la p*gina (eb enlazada.
Los &alores que se pueden utilizar tambi$n est*n estandarizados ' las codificaciones
m*s utilizadas son UTF-8 ' ISO-8859-1, aunque existen decenas de cdigos definidos
#ISO-10646-UCS-2, IBM852, Big5-HKSCS, windows-1252, HZ-GB-2312%.
El organismo /)5) publica la lista completa de codificaciones de caracteres
disponibles.
Los ejemplos anteriores de enlaces b*sicos se pueden re!acer utilizando algunos de los
atributos definidos por la etiqueta <a>0
<a href="http://www.google.com" hreflang="en" type="text/html"
charset="UTF-8">Pgina principal de Google</a>
<a href="http://www.ejemplo.com/fondo_escritorio.jpg"
type="image/jpg">Imagen interesante para un fondo de escritorio</a>
4.+. .tros tipos de enlaces
Los enlaces mostrados en las secciones anteriores son los m*s utilizados por las p*ginas
(eb. Los enlaces creados con la etiqueta <a> permiten enlazar cualquier tipo de recurso
desde cualquier p*gina. La caracterstica m*s importante de estos enlaces es que el
usuario debe acti&ar la carga de los recursos. En otras palabras, el na&egador no carga
ning.n recurso enlazado con la etiqueta <a> a menos que el usuario pinc!e sobre el
enlace.
Pgina 13
Enlaces
)dem*s de estos enlaces, las p*ginas HTML pueden incluir otro tipo de enlaces que
cargan los recursos autom*ticamente. 2i una p*gina HTML utiliza arc!i&os ,22 para
aplicar estilos a sus contenidos, no es lgico que los enlace con la etiqueta <a> ' espere
a que el usuario pinc!e sobre el enlace para as cargar los arc!i&os ,22. e la misma
forma, muc!as p*ginas (eb din*micas necesitan que el na&egador cargue &arios
arc!i&os Ea&a2cript para funcionar correctamente.
HTML define las etiquetas <script> ' <link> para enlazar recursos que se deben
cargar autom*ticamente. ,uando el na&egador encuentra alguna de estas dos etiquetas,
descarga los recursos enlazados ' los aplica a la p*gina (eb.
La etiqueta <script> tiene dos modos de funcionamiento, 'a que se emplea tanto para
insertar un bloque de cdigo Ea&a2cript en la p*gina como para enlazar un arc!i&o
Ea&a2cript externo.
Eti#ueta $script%
&tributos
counes
?
&tributos
propios
src = "url" ? /ndica la direccin del arc!i&o que contiene el
cdigo
type = "tipo_de_contenido" ? 1ermite "a&isar" al na&egador
sobre el tipo de cdigo que se inclu'e #normalmente Ea&a2cript%
defer = "defer" ? El cdigo no &a a modificar el contenido de
la p*gina (eb
charset = "tipo_de_charset" ? escribe la codificacin del
cdigo enlazado
'ipo de
eleento
:loque ' en lnea #tambi$n puede ser una etiqueta &aca%
(escripci)n
2e emplea para enlazar o definir un bloque de cdigo #normalmente
Ea&a2cript%
)unque la etiqueta <script> permite enlazar cdigo de &arios lenguajes de
programacin, el uso !abitual de <script> consiste en enlazar un arc!i&o Ea&a2cript
externo0
<head>
<script type="text/javascript"
src="http://www.ejemplo.com/js/inicializar.js"></script>
</head>
El atributo type utilizado !abitualmente para los arc!i&os Ea&a2cript es
"text/javascript". El atributo src es equi&alente al atributo href de los enlaces
creados con la etiqueta <a>. La +-L indicada en el atributo src puede ser absoluta o
relati&a ' externa o interna.
)dem*s de enlazar un arc!i&o Ea&a2cript externo, la misma etiqueta <script> tambi$n
permite incluir en la p*gina (eb un bloque de cdigo Ea&a2cript0
Pgina 15
Enlaces
<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() { alert("La pgina se ha cargado
completamente"); }
//]]>
</script>
</head>
<body>
...
</body>
</html>
,uando se inclu'e cdigo Ea&a2cript en la propia p*gina FHTML, se debe insertar
dentro de una seccin especial llamada CDATA. 1ara ello, el cdigo Ea&a2cript se debe
encerrar entre <![CDATA[ ' ]]>. ,uando el na&egador encuentra una seccin de este
tipo, no procesa su contenido como si fuera FHTML ' por tanto no tiene en cuenta los
posibles errores de &alidacin de FHTML.
e esta forma, se pueden construir p*ginas FHTML &*lidas ' cdigo Ea&a2cript
correcto. En los captulos posteriores se profundiza en el concepto de &alidacin de
p*ginas FHTML. Los caracteres // al comienzo ' al final de la seccin CDATA son
necesarios para los na&egadores que no son capaces de procesar correctamente estas
secciones.
La etiqueta <script> #tanto cuando enlaza, como cuando inclu'e directamente el
cdigo% puede aparecer en cualquier parte del documento HTML, aunque normalmente
se inclu'e dentro de la cabecera de la p*gina #<head>...</head>%.
La segunda etiqueta de FHTML para enlazar recursos es <link>, que permite enlazar '
relacionar la p*gina con otros recursos externos.
Eti#ueta $lin/%
&tributos
counes
b*sicos, internacionalizacin ' e&entos
&tributos
propios
Los siguientes con el mismo significado que para la etiqueta
"a"0 c!arset, !ref, !reflang, t'pe, rel ' re&
media = "tipo_de_medio" ? /ndica el medio para el que debe
aplicarse la relacin
'ipo de
eleento
Etiqueta &aca
(escripci)n
2e emplea para enlazar ' establecer relaciones entre el documento '
otros recursos
)l contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la
cabecera del documento. 2e pueden a4adir tantas etiquetas <link> como sean
necesarias, pero siempre dentro de <head>...</head>.
El atributo media !ace referencia al medio para el que es &*lida la relacin con el
recurso enlazado. Los medios disponibles tambi$n est*n estandarizados, siendo los m*s
Pgina 26
Enlaces
comunes screen para los contenidos mostrados en pantalla, print para las impresoras
' handheld para los dispositi&os m&iles.
El uso !abitual de la etiqueta <link> es el de enlazar las !ojas de estilos ,22 utilizadas
por las p*ginas (eb0
<head>
...
<link rel="stylesheet" type="text/css" href="/css/comun.css" />
</head>
En este caso, es !abitual establecer los atributos rel ' type para indicar el tipo de
recurso enlazado ' su relacin con la p*gina (eb. La +-L del recurso enlazado se
indica en el atributo href, que admite tanto +-L absolutas como relati&as.
4.,. E!eplos de enlaces 0abituales
".-.#. Enlace al inicio del sitio .eb
<a href="/">Inicio</a>
)l pulsar el enlace anterior desde cualquier p*gina (eb, se &uel&e directamente a la
p*gina de inicio, home o p*gina principal del sitio (eb.
".-.*. Enlace a un email
<a href="mailto:[email protected]" title="Direccin de email para
solicitar ms informacin">
Solicita ms informacin
</a>
)l pinc!ar sobre el enlace anterior, se abre autom*ticamente el programa de correo
electrnico del ordenador del usuario ' se establece la direccin de en&o al &alor
indicado despu$s de mailto: La sintaxis es la misma que la de un enlace normal, sal&o
que se cambia el prefijo http:// por mailto:
La sintaxis de mailto: permite utilizarlo para otros ejemplos m*s complejos0
<!-- Envo del correo electrnico a varias direcciones a la vez -->
<a
href="mailto:[email protected],[email protected]">Solicita
ms informacin</a>

<!-- Aadir un "asunto" inicial al correo electrnico -->
<a href="mailto:[email protected]?subject=Solicitud de ms
informacin">Solicita ms informacin</a>

<!-- Aadir un texto inicial en el cuerpo del correo electrnico -->
<a href="mailto:[email protected]?body=Estara interesado en
solicitar ms informacin sobre sus productos">Solicita ms
informacin</a>
Todas las opciones anteriores se pueden combinar entre s para realizar ejemplos m*s
a&anzados. )unque el uso de mailto: puede parecer una &entaja, su uso est*
Pgina 21
Enlaces
desaconsejado. 2i se inclu'e una direccin de correo electrnico directamente en una
p*gina (eb, es mu' probable que en poco tiempo esa direccin de email se encuentre
llena de correo electrnico basura o "spam", 'a que existen programas autom*ticos
encargados de rastrear sistem*ticamente todas las p*ginas (eb de /nternet para
encontrar direcciones de correo electrnico &*lidas.
La forma de mostrar las direcciones de correo electrnico en las p*ginas (eb consiste
en incluir la direccin en una imagen o indicarla de forma que solamente los usuarios
puedan entenderlo0
<p>La direccin de correo es <strong>nombre (arroba)
direccion.com</strong></p>
<p>La direccin de correo es
<strong>nombre_arroba_direccion.com</strong></p>
<p>La direccin de correo es
<strong>[email protected]</strong></p>
<p>La direccin de correo es
<strong>nombre(ARROBA)direccion.com</strong></p>
<p>La direccin de correo es <strong>nombre @ direccion .
com</strong></p>
".-.,. Enlace a un arc&ivo /T0
1ara enlazar un arc!i&o almacenado en un ser&idor @T1, la parte del protocolo de la
+-L debe cambiar de http:// a ftp://0
<a href="ftp://ftp.ejemplo.com/ruta/archivo.zip" title="Archivo
comprimido de los contenidos">
Descarga un ZIP con todos los contenidos
</a>
".-.". Enla1ar varias &o2as de estilos (SS
<link rel="stylesheet" type="text/css" href="/css/comun.css" />
<link rel="stylesheet" type="text/css" href="/css/secciones.css" />
".-.3. Enla1ar &o2as de estilos (SS para diferentes
medios
<link rel="stylesheet" type="text/css" href="/css/comun.css"
media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/css/impresora.css"
media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css"
media="handheld" />
".-.-. Enla1ar el favicon
El favicon o icono para fa&oritos es el peque4o icono que muestran las p*ginas en &arias
partes del na&egador. ependiendo del na&egador que se utilice, este icono se muestra
en la barra de direcciones, en la barra de ttulo del na&egador ';o en el men. de
fa&oritos;marcadores.
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
Pgina 22
Enlaces
)unque en principio la imagen debera ser de tipo .ICO #formato gr*fico de los iconos%,
algunos na&egadores soportan fa&icons en otros formatos gr*ficos m*s !abituales #como
por ejemplo .PNG%.
".-.4. Enla1ar un arc&ivo RSS
<link rel="alternate" type="application/rss+xml" title="Resumen de
todos los artculos del blog" href="/feed.xml" />
".-.5. Enla1ar &o2as de estilos6 favicon + RSS
En una misma p*gina se pueden incluir &arias etiquetas <link>, por lo que es !abitual
que las p*ginas enlacen !ojas de estilos, fa&icon ' arc!i&os -22 de forma conjunta0
<head>
...
<link rel="stylesheet" type="text/css" href="/css/impresora.css"
media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css"
media="handheld" />
<style type="text/css" media="screen,projection">
@import '/css/main.css';
</style>
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link rel="alternate" type="application/rss+xml" title="Resumen de
todos los artculos del blog" href="/feed.xml" />
...
</head>
".-.7. $ndicar que e8iste una versi!n de la p)gina en otro
idioma
<head>
<title>English tutorial</title>
<link lang="es" xml:lang="es" title="El tutorial en espaol"
type="text/html" rel="alternate" hreflang="es"
href="http://www.ejemplo.com/tutorial/espanol.html" />
</head>
".-.#9. $ndicar que e8iste una versi!n de la p)gina
preparada para imprimir
<head>
<link media="print" title="El tutorial en PDF" type="application/pdf"
rel="alternate" href="http://www.ejemplo.com/tutorial/documento.pdf"
/>
</head>
".-.##. $ndicar que e8iste una p)gina que es :ndice de la
p)gina actual
<head>
<title>Tutorial - Captulo 5</title>
<link rel="start" title="El ndice del tutorial" type="text/html"
href="http://www.ejemplo.com/tutorial/indice.html" />
</head>
Pgina 23
Enlaces
Ejercicio G
Enlazar el fa&icon en todas las p*ginas del ejercicio 9 ' a4adir todos los atributos
posibles a los enlaces.
*oluci)n 1+.1. E!ercicio 1
1*gina principal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Mi Sitio</title>
</head>

<body>

<h1>Mi Sitio</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis posuere justo. Nam vel neque. Proin sagittis mauris sit amet
nisl. Sed ipsum. Aliquam vitae justo.</p>

<h2>Ultimos proyectos</h2>

<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis
dignissim justo, et euismod enim odio sit amet erat. Aliquam dui
ligula, porttitor eu, facilisis vitae, ornare sed, tortor.</p>

<p><a href="portfolio/indice.html" title="Ultimos proyectos realizados
por Mi Sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>


</body>

</html>
Pgina 24