Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[4]
Enlaces

Publicidad

[4.1] URL

[4.1.1]introducción

Una URL (Uniform Resource Location) es la dirección concreta de un recurso (una página web, una imagen, un vídeo, un directorio,…) en Internet. Cualquier elemento almacenable existente en Internet, posee una URL.

Cada URL es única, con lo que es un identificador absoluto para un determinado recurso. Si la URL es correcta sólo habrá un solo recurso posible al que se puede referir.

[4.1.2]formación de una URL

La sintaxis completa de una URL es la siguiente:

protocolo://usuario:contraseña@dominio:puerto/ruta?busqueda#fragmento

Se detalla el significado de todos los elementos

Ejemplos de URL:

El texto de una URL no puede utilizar cualquier carácter. Tenemos el sempiterno problema de no poder utilizar símbolos más allá de las letras y números de la tabla ASCII original y de no poder utilizar más que un número reducido de caracteres para separar palabras.

Los caracteres permitidos en una URL son:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 0 - _ ~ .

Cualquier otro no es válido. Sí se pueden utilizar una serie de caracteres reservados, que sirven para indicar en una URL situaciones especiales (envío de parámetros al servidor, direcciones de puerto, usuarios, contraseñas,…).

Es decir, no pueden formar parte del nombre de un directorio, servidor o archivo pero sí pueden aparecer en una URL utilizados correctamente en el apartado correspondiente. Estos caracteres son:

! # $ % & ‘ ( ) * + , / : ; = ? @ [ ]

Si necesitamos codificar en la URL símbolos fuera de los caracteres permitidos entonces debemos codificarlos usando una notación que comienza con el símbolo % y le sigue el código hexadecimal correspondiente en el código ASCII extendido europeo (ISO 8859-1). Así, si una URL contiene un código reservado tendríamos que codificarlo mediante:

!

#

$

%

&

(

)

*

%20

%21

%23

%24

%25

%26

%27

%28

%29

%2A

+

,

/

:

;

=

?

@

[

]

%2B

%2C

%2F

%3A

%3B

%3D

%3F

%40

%5B

%5D

La lista completa de símbolos que se pueden codificar es:

espacio

<

>

\

^

`

{

|

}

%20

%22

%3C

%3E

%5C

%5E

%60

%7B

%7C

%7D

Š

Œ

Ž

%8A

%8B

%8C

%8E

%91

%92

%93

%94

%95

%96

¢

£

¥

|

§

¨

©

ª

«

¬

%A2

%A3

%A5

%A6

%A7

%A8

%A9

%AA

%AB

%AC

·

¸

¹

º

»

¼

½

¾

¿

%B6

%B7

%B8

%B9

%BA

%BB

%BC

%BD

%BE

%BF

É

Ê

Ë

Ì

Í

Î

Ï

Ð

Ñ

Ò

%C9

%CA

%CB

%CC

%CD

%CE

%CF

%D0

%D1

%D2

Ý

Þ

ß

à

á

â

ã

ä

å

æ

%DD

%DE

%DF

%E0

%E1

%E2

%E3

%E4

%E5

%E6

ð

ñ

ò

ó

ô

õ

ö

÷

ø

ù

%F0

%F1

%F2

%F3

%F4

%F5

%F6

%F7

%F8

%F9

ƒ

ˆ

%80

%82

%83

%84

%85

%86

%87

%88

%89

˜

š

œ

ž

Ÿ

¡

%97

%98

%99

%9A

%9B

%9C

%9E

%9F

%A1

¯

®

¯

°

±

²

³

´

µ

%AD

%AE

%AF

%B0

%B1

%B2

%B3

%B4

%B5

À

Á

Â

Ã

Ä

Å

Æ

Ç

È

%C0

%C1

%C2

%C3

%C4

%C5

%C6

%C7

%C8

Ó

Ô

Õ

Ö

Ø

Ù

Ú

Û

Ü

%D3

%D4

%D5

%D6

%D8

%D9

%DA

%DB

%DC

ç

è

é

ê

ë

ì

í

î

ï

%E7

%E8

%E9

%EA

%EB

%EC

%ED

%EE

%EF

ú

û

ü

ý

þ

ÿ

Salto de línea

%FA

%FB

%FC

%FD

%FE

%FF

%0A ó 

%0D ó 

%0D%0A

Por aclarar mejor la cuestión, vamos a explicar una situación. Supongamos que tenemos a nuestra disposición un servidor accesible mediante la URL http://www.miservidor.com, y en él creamos una página accesible desde Internet llamada mi pagina.html, esta página web la hemos alojado en el directorio pruebas que cuelga de la raíz del servidor. Entonces un usuario que quiera acceder a esa página en teoría lo intentaría hacer mediante la URL:

http://www.miservidor.com/pruebas/mi pagina.html

Pero, el nombre de la página web tiene un espacio en blanco y eso no es válido. La URL correcta sería (%20 es el código hexadecimal ASCII del espacio en blanco):

http://www.miservidor.com/pruebas/mi%20pagina.html

[4.2] crear enlaces en las páginas web

[4.2.1]enlaces globales

Los enlaces permiten colocar un texto (u otro elemento, como una imagen o un botón) resaltado de forma especial, de modo que cuando se le hace clic, el navegador web nos llevará al destino de la URL (si está disponible).

La etiqueta que permite realizar enlaces es la etiqueta a. El atributo href permite indicar la URL a la que se realiza el salto. Ejemplo:

A Augusto le sucedió el emperador
<a href=”http://es.wikipedia.org/wiki/Tiberio”>Tiberio
</a>

La palabra Tiberio estará remarcada de modo que al hacer clic en ella saltaremos a la URL http://es.wikipedia.org/wiki/Tiberio.

Ese ejemplo muestra un salto absoluto, es decir el enlace nos lleva a una dirección URL global usando la notación explicada en el punto anterior.

[4.2.2]enlaces locales relativos

La mayor parte de enlaces de un sitio web en Internet no saltan a otros sitios, sino que son saltos a recursos del mismo servicio web. Es decir se salta muy a menudo a recursos del mismo servidor web.

En ese caso no se indica una URL global tal cual se explicó anteriormente, sino que se indica un salto local. Es decir, un salto a un recurso en nuestro propio servidor web que toma como punto de partida el directorio en el que se encuentra la página web que realiza el salto.

Por ejemplo imaginemos que estamos creando una página web relacionada con la URL http://www.miservidor.com/noticias/n1.html y queremos en esa página hacer un enlace a la URL indicada mediante
http://www.miservidor.com/noticias/n2.html Podríamos hacerlo con el código:

<a href=”http://www.miservidor.com/noticias/n2.html”>
Ver segunda noticia</a>

El enlace funcionaría perfectamente. Pero hay que tener en cuenta que la página a la que saltamos está en el mismo directorio. Si algún día movemos todo nuestro sitio web al dominio nuevodominio.com resulta que tendremos que cambiar todo el código para hacer frente a la nueva situación. Por ello lo lógico es usar rutas locales.

El enlace usando una ruta local sería:

<a href=”n2.html”>Ver segunda noticia</a>

Hay que observar que no se ha indicado protocolo ni ruta (tampoco se indicaría puerto), simplemente se empieza indicando la ruta. Se asume que la ruta

Ejemplos de enlaces con URL local son:

<!-- Salto a la página tiberio.html que estará en el mismo directorio
que la actual -->
<a href=”tiberio.html”>Tiberio</a>
<!-- Salto a la página tiberio.html que estará dentro del directorio emperadores que estará, a su vez, dentro del directorio actual -->
<a href=”emperadores/tiberio.html”>Tiberio</a>
<!-- Salto a la página tiberio.html que estará en el directorio padre, es decir el directorio que contiene al actual -->
<a href=”../tiberio.html”>Tiberio</a>
<!-- Salto a la página tiberio.html que estará en el directorio emperadores, dentro del directorio padre del actual-->
<a href=”../emperadores/tiberio.html”>Tiberio</a>

[4.2.3]enlaces locales absolutos

Hay otra posibilidad de enlace local. Por ejemplo:

<a href=”/tiberio.html”>Tiberio</a>

Ese enlace (/tiberio.html) buscaría la página tiberio.html en el directorio raíz del servidor ya que la ruta comienza con el símbolo /.

Permiten ahorrar mucho texto y son más fáciles de usar que los enlaces relativos, pero en la práctica no se usan mucho, ya que, si movemos de sitio nuestro sitio web, por ejemplo a un directorio interno del servidor, la raíz ya no sería la misma y el enlace no funcionaría.

[4.3] enlaces internos

[4.3.1]enlaces a una posición interna dentro del propio documento

Hay un tipo de enlace que permite posicionarnos en un punto concreto del documento. Este tipo de enlace se denomina interno, ya que salta dentro del propio documento.

Este salto requiere primero marcar la posición a la que deseamos saltar. Antes de HTML 5 se hacía usando el atributo name del propio elemento a. Pero con HTML 5 se prohíbe el uso de este atributo con este fin y, en su lugar, se utiliza el atributo id.

id es un atributo presente en cualquier elemento de la página web. Sirve para identificar a dicho elemento dentro de la página, por ello no podemos repetir valor para ese atributo en ningún otro elemento.

Supongamos que tenemos este código:

<h1 id=”tituloPrincipal”>Curso de HTML</h1>
<p>
	Este es un curso que versa sobre cómo escribir páginas web mediante…
</p>

El párrafo de tipo h1 está identificado con el identificador tituloPrincipal. Gracias a ello si en otra parte de la página tenemos el código:

<p><a href=”#tituloPrincipal”>
Volver al título principal</a></p>

Al hacer clic en ese enlace, se usa el identificador como un marcador de posición y así nos colocaremos en dicho párrafo.

[4.3.2]enlaces a una posición interna dentro de otro documento

También podemos realizar un salto a una posición interna a otro documento. Por ejemplo si este enlace:

<a href=”manual.html”>Abrir manual</a>

Nos permite abrir una página web llamada manual.html (que estará en el mismo directorio que la página actual). Siempre que se abre un documento se muestra el inicio del mismo. Sin embargo este otro enlace:

<a href=”manual.html#comentarios”>
Abrir manual por la zona de comentarios</a>

Abre el mismo documento, pero se intenta colocar en la zona marcada por el identificador comentarios. Lógicamente para que esto sea posible, debe existir un elemento marcado con ese identificador en el documento.

Es posible indicar una posición interna en una URL absoluta. Por ejemplo este enlace permite abrir la página dedicada a la ciudad de Palencia de la Wikipedia y colocarse en la zona dedicada a la historia:

<a 
href=”http://es.wikipedia.org/wiki/Palencia#Historia”>
Historia de Palencia</a>

[4.4] atributos del elemento a

Realmente el único de obligado uso es href para indicar el destino del enlace, pero el elemento a dispone de unos cuantos atributos (además de los comunes a cualquier elemento HTML) que hacen tareas muy interesantes.

atributo

significado

hreflang

Permite indicar un código de lenguaje (es, fr, en,…) indicando el lenguaje en el que está escrito el destino del enlace. Ejemplo:

<a hreflang=”en” 
href=”http://en.wikipedia.org/wiki/London”>
Información sobre Londres</a>

media

Sólo válido en HTML5, permite indicar el medio idóneo para mostrar el contenido del enlace. Ejemplo:

<a href=”documentos/manualImpr.pdf” 
media=”print and(resolution:300dpi)”>
Descargar manual</a>

target

Permite indicar cómo se muestra la página de destino. Posibilidades:

  • _blank. Abre el enlace en una nueva página. Es una opción muy utilizada al crear enlaces.
  • _parent. Abre el enlace en el marco de la página padre de ella.
  • _top. Abre la página en el marco superior
  • _self. Abre la página en el marco actual
  • nombre. EL nombre indicado será el del marco en el que se abrirá la página

    Salvo el primero, el resto no se usan por referirse a marcos.

type

Atributo añadido en HTML 5, soportado por la mayoría de navegadores. Permite indicar el tipo de contenido (según la normativa oficial de tipos de la IANA, véase:

http://www.iana.org/assignments/media-types/media-types.xhtml

Ejemplo:

<a href=”obtenerimagen.php?id=98” type=”image/png”>Abrir imagen nº 98</a>

En el ejemplo se indicaría que el enlace hace referencia a una imagen de tipo PNG

rel

Informa sobre la función del enlace. Puede ser:

  • alternate. Enlace alternativo
  • author.
  • bookmark. Página de marcadores
  • help. Página de ayuda
  • license. Información sobre la licencia
  • next. Si nuestra página pertenece a una serie ordenada, el enlace nos lleva al siguiente elemento dentro de la serie.
  • nofollow. Marca que los robots de búsqueda de empresas como Google no tengan en cuenta los enlaces externos y así evitar que dichos enlaces en las páginas se utilicen para subir su calificación en los buscadores. Así se ignoran por los robots los enlaces marcados de esta forma.
  • noreferrer. Un referrer es la información relativa a la página desde la que procede el visitante a un sitio. Con este valor en los enlaces, no se indicará al destino URL la página desde la que procedía el usuario.
  • prefetch. Permite descargar el enlace antes de que el usuario haga clic en él y así acelerar su carga. Se usa (aunque pocos navegadores soportan este valor) en enlaces de uso habitual.
  • prev. Si nuestra página pertenece a una serie ordenada, el enlace nos lleva al elemento anterior dentro de la serie.
  • search. Página de búsqueda dentro de nuestro sitio web.
  • tag. Página con etiquetas de temas (tags) de nuestro sitio web.

download

Nuevo atributo de HTML 5 (no funciona ni en Internet Explorer ni en Safari, ni en cualquier versión de navegador que no sea bastante moderna) que permite indicar que al hacer clic en el enlace, no se abrirá en el navegador, sino que se descargará en nuestro directorio predeterminado de descargas. Ejemplo:

<a href=”documentos/manual.pdf” download>
Descargar manual</a>

Se puede indicar un valor para el atributo que se tomará como el nuevo nombre del archivo descargado:

<a href=”documentos/manual3232001.pdf” download=”manual”>Descargar manual</a>

Aunque el nombre original del archivo que se descarga en el servidor es manual3232001.pdf, al descargar el nombre del archivo será manual.pdf