Diferencia entre revisiones de «Lenguaje XHTML/Hipervínculos»

De Wikilibros, la colección de libros de texto de contenido libre.
Contenido eliminado Contenido añadido
→‎Elemento a: charset, type, hreflang
Línea 6: Línea 6:
| Elemento = a
| Elemento = a
| Contiene = texto procesable, [[../Imágenes|Imágenes]], [[../Objetos|Objetos]], [[../Elementos en línea|Elementos en línea]], [[../Formato#Formato de fuente|Formato de fuente]], [[../Formularios#Campos de formulario|Campos de formulario]], [[../Contenido dinámico#Elemento script|<tt>script</tt>]]
| Contiene = texto procesable, [[../Imágenes|Imágenes]], [[../Objetos|Objetos]], [[../Elementos en línea|Elementos en línea]], [[../Formato#Formato de fuente|Formato de fuente]], [[../Formularios#Campos de formulario|Campos de formulario]], [[../Contenido dinámico#Elemento script|<tt>script</tt>]]
| Atributos = [[../Atributos#Atributos comunes|Atributos comunes]], [[../Atributos#Atributo charset|<tt>charset</tt>]], [[../Atributos#Atributo type|<tt>type</tt>]], <tt>href</tt>, <tt>hreflang</tt>, <tt>rel</tt>, <tt>rev</tt>, <tt>shape</tt>, <tt>coords</tt>
| Atributos = [[../Atributos#Atributos comunes|Atributos comunes]], <tt>href</tt>, [[../Atributos#Atributo charset|<tt>charset</tt>]], [[../Atributos#Atributo type|<tt>type</tt>]], [[../Atributos#Atributo hreflang|<tt>hreflang</tt>]], <tt>rel</tt>, <tt>rev</tt>, <tt>shape</tt>, <tt>coords</tt>
}}
}}
Por defecto, en la mayoría de navegadores gráficos aparecen azules y subrayados. Cuando se pasa el puntero del ratón sobre un hipervínculo en la mayoría de navegadores el puntero cambia a la forma de una mano con el dedo índice extendido. Este comportamiento se puede cambiar utilizando [[../Formato|estilos]].
Por defecto, en la mayoría de navegadores gráficos aparecen azules y subrayados. Cuando se pasa el puntero del ratón sobre un hipervínculo en la mayoría de navegadores el puntero cambia a la forma de una mano con el dedo índice extendido. Este comportamiento se puede cambiar utilizando [[../Formato|estilos]].
Línea 16: Línea 16:
En cuanto a sus atributos no hay ninguno que sea obligatorio porque puede actuar como origen y/o como destino del hipervínculo. Su atributo más útil y del que casi siempre lo veremos acompañado es el atributo '''<tt>href</tt>'''. Este atributo sirve para indicar el destino del hipervínculo. Su valor es un [[w:URI|URI]] (Uniform Resource Identifier, identificador de recursos uniforme) y que generalmente será un [[w:URL|URL]], un subtipo de URI, es decir, un identificador unívoco a un recurso, ya sea una página web, una parte de un documento o un recurso identificable por el navegador como una función javascript<ref name="uri">[[rfc:3305|RFC 3305]] y [http://www.w3.org/TR/uri-clarification/ W3C Note: URIs, URLs, and URNs: Clarifications and Recommendations 1.0], el mismo contenido pero publicado por diferentes autoridades (en inglés).</ref>.
En cuanto a sus atributos no hay ninguno que sea obligatorio porque puede actuar como origen y/o como destino del hipervínculo. Su atributo más útil y del que casi siempre lo veremos acompañado es el atributo '''<tt>href</tt>'''. Este atributo sirve para indicar el destino del hipervínculo. Su valor es un [[w:URI|URI]] (Uniform Resource Identifier, identificador de recursos uniforme) y que generalmente será un [[w:URL|URL]], un subtipo de URI, es decir, un identificador unívoco a un recurso, ya sea una página web, una parte de un documento o un recurso identificable por el navegador como una función javascript<ref name="uri">[[rfc:3305|RFC 3305]] y [http://www.w3.org/TR/uri-clarification/ W3C Note: URIs, URLs, and URNs: Clarifications and Recommendations 1.0], el mismo contenido pero publicado por diferentes autoridades (en inglés).</ref>.


Los atributos [[../Atributos#Atributo charset|<tt>charset</tt>]], [[../Atributos#Atributo type|<tt>type</tt>]] y <tt>hreflang</tt> sirven para dar detalles al usuario sobre el documento o recurso al que apunta el hipervínculo. El primero indica el tipo de [[../Codificación de caracteres|codificación de caracteres]] que utiliza el documento, <tt>type</tt> indica el tipo de contenido MIME y hreflang el idioma (no confundir con [[../Atributos#Atributo xml:lang|<tt>xml:lang</tt>]], que especificaría el idioma del contenido entre las etiquetas <tt>&lt;a&gt;</tt> y <tt>&lt;/a&gt;</tt>). Puede ser útil utilizarlos cuando el documento de destino tenga esos parámetros diferentes del documento actual. Es posible que algunos navegadores proporcionen esa información al usuario al situar el foco sobre el hipervínculo, quizás mostrando un menú emergente con esa información, o utilizada por un indexador para clasificar oportunamente el contenido. Sin embargo, el navegador no está obligado a utilizar esa información que le ha proporcionado el programador para determinar su comportamiento al acceder al hipervínculo, por lo que ignorará esa información. Solamente está para informar al usuario.
Los atributos [[../Atributos#Atributo charset|<tt>charset</tt>]], [[../Atributos#Atributo type|<tt>type</tt>]] y [[../Atributos#Atributo hreflang|<tt>hreflang</tt>]] sirven para dar detalles al usuario sobre el documento o recurso al que apunta el hipervínculo. El primero indica el tipo de [[../Codificación de caracteres|codificación de caracteres]] que utiliza el documento, <tt>type</tt> indica el tipo de contenido MIME y hreflang el idioma (no confundir con [[../Atributos#Atributo xml:lang|<tt>xml:lang</tt>]], que especificaría sólo el idioma del contenido entre las etiquetas <tt>&lt;a&gt;</tt> y <tt>&lt;/a&gt;</tt>). Puede ser útil utilizarlos cuando el documento de destino tenga esos parámetros diferentes al documento actual. Es posible que algunos navegadores en el futuro proporcionen de alguna forma esa información al usuario, como una imagen identificativa del tipo de archivo o el idioma al lado del hipervínculo o al pasar el ratón por encima. O utilizada por un indexador para clasificar oportunamente el contenido. Sin embargo, el navegador no está obligado a utilizar esa información que le ha proporcionado el programador para determinar su comportamiento al acceder al hipervínculo, por lo que ignorará esa información. Solamente está para informar al usuario.


== Hipervínculo a un recurso ==
== Hipervínculo a un recurso ==

Revisión del 17:00 20 sep 2006

Los hipervículos o enlaces son parte fundamental de la navegación en Internet. Permite al visitante desplazarse por los distintos documentos de un sitio web de forma fácil con tan sólo señalar un elemento. Para muchos lectores esto significa hacer clic con el ratón o mouse, pero la verdad es que también se puede acceder pulsando la tecla Intro cuando el hipervínculo tiene el foco, tanto en navegadores gráficos como en navegadores sólo texto, además de dispositivos móviles. Además, los hipervínculos o enlaces no sólo son elementos situados en el cuerpo del documento donde el usuario puede interactuar, sino que hay una serie de enlaces a otros documentos que pueden no ser accesibles diréctamente por el usuario pero sí por el navegador o agente usuario por tratarse de enlaces a documentos especiales como hojas de estilo, documentos alternativos o código javascript.

Elemento a

Lenguaje XHTML/Plantillas/Elemento Por defecto, en la mayoría de navegadores gráficos aparecen azules y subrayados. Cuando se pasa el puntero del ratón sobre un hipervínculo en la mayoría de navegadores el puntero cambia a la forma de una mano con el dedo índice extendido. Este comportamiento se puede cambiar utilizando estilos.

Es el elemento que permite que una región del documento (el contenido del elemento, no necesariamente texto) se convierta en un hipervínculo. El contenido de este elemento es cualquier elemento que no sea de bloque, es decir, un elemento a nivel de línea. Esto significa que, por ejemplo, no podemos poner dos párrafos seguidos dentro de un único elemento a, sino que deberemos insertar un elemento a en cada párrafo.

El nombre de este elemento, a, viene del inglés anchor, ancla en español. Aunque si bien este elemento puede ser el destino de un hipervínculo, lo más habitual es que sea el origen de éste y, por tanto, se definiría mejor como el lugar desde donde se echa el ancla[1].

En cuanto a sus atributos no hay ninguno que sea obligatorio porque puede actuar como origen y/o como destino del hipervínculo. Su atributo más útil y del que casi siempre lo veremos acompañado es el atributo href. Este atributo sirve para indicar el destino del hipervínculo. Su valor es un URI (Uniform Resource Identifier, identificador de recursos uniforme) y que generalmente será un URL, un subtipo de URI, es decir, un identificador unívoco a un recurso, ya sea una página web, una parte de un documento o un recurso identificable por el navegador como una función javascript[2].

Los atributos charset, type y hreflang sirven para dar detalles al usuario sobre el documento o recurso al que apunta el hipervínculo. El primero indica el tipo de codificación de caracteres que utiliza el documento, type indica el tipo de contenido MIME y hreflang el idioma (no confundir con xml:lang, que especificaría sólo el idioma del contenido entre las etiquetas <a> y </a>). Puede ser útil utilizarlos cuando el documento de destino tenga esos parámetros diferentes al documento actual. Es posible que algunos navegadores en el futuro proporcionen de alguna forma esa información al usuario, como una imagen identificativa del tipo de archivo o el idioma al lado del hipervínculo o al pasar el ratón por encima. O utilizada por un indexador para clasificar oportunamente el contenido. Sin embargo, el navegador no está obligado a utilizar esa información que le ha proporcionado el programador para determinar su comportamiento al acceder al hipervínculo, por lo que ignorará esa información. Solamente está para informar al usuario.

Hipervínculo a un recurso

Ahora ya sabe la teoría sobre los hipervínculos, pero ¿sabe realmente qué debe poner en el atributo href para enlazar el recurso que usted desee? Si la respuesta es no aquí intentaremos arrojar luz sobre esta cuestión.

Para empezar debemos distinguir entre dos tipos de enlaces: absolutos y relativos.

Enlaces absolutos

Los enlaces absolutos identifican el recurso independientemente de desde dónde se haga referencia. Los verá siempre con un prefijo seguido de dos puntos que identifica, por decirlo de algún modo, el protocolo que se utiliza para acceder al recurso. Entre los que la gran mayoría de navegadores reconocen:

http:
Es el identificador del protocolo de transferencia de hipertexto o HTTP, utilizado para las páginas web de internet.
https:
Es como el HTTP pero utilizando SSL para encriptar los datos.
ftp:
Es el protocolo de transferencia de archivos o FTP.
mailto:
Para enviar un correo electrónico al destinatario especificado.
gopher:
Protocolo Gopher.
news:
Servidores de noticias Usenet.
javascript:
Llamada a código JavaScript, sólo para navegadores que lo soporten.

A pesar de que estos prefijos puedan o no pertenecer a estándares, lo cierto es que es el propio agente usuario (el navegador) el que debe implementar la forma de acceder a ese recurso, si es que tiene capacidad para hacerlo, ya sea de forma interna o bien llamando a un programa o al propio sistema operativo para que lo gestione externamente, como puede ser un enlace a un correo electrónico o a un canal de chat.

La estructura de un URI http es tal que así (texto entre corchetes opcional, en cursiva variable):

Nota: Esta sección no es una referencia exacta de los estándares[3] involucrados en la construcción de URIs, aunque se intenta ser lo más preciso posible.

http:// [ usuario [ : contraseña ] @ ] servidor [ : puerto ] [ ruta_absoluta ] [ ? parámetros ] [ # identificador ]

Y es muy similar para https y ftp. Si se requiere autenticación de usuario HTTP se puede hacer anteponiendo el usuario al nombre del servidor separado por el carácter arroba (@), e incluso la contraseña separada por los dos puntos del nombre de usuario, aunque no es recomendable ya que puede quedar en el historial del navegador. Para FTP existe un usuario especial de nombre anonymous que es el usuario con el que se accede a servidores públicos que lo permitan y es el que usará el navegador si no se especifica ninguno. Si se omite y es requerido por el servidor el navegador debería encargarse de ofrecer un método para solicitárselo al usuario. El puerto al que se debe conectar es por defecto el 80 para HTTP, 445 para HTTPS y 20 para FTP y, si no se especifica, se conectará diréctamente a esos puertos. En caso de que el servidor al que queramos acceder se encuentre en otro puerto deberemos especificarlo en la dirección. Después se encuentra la ruta de acceso al recurso, que va separado por el carácter de barra invertida (/) y donde cada carácter de barra invertida indica (no siempre, puesto que los servidores se pueden configurar para crear alias) un nivel de directorio en el sistema de archivos del servidor. Al final de la ruta se suele especificar un nombre de archivo, pero si no se especifica ninguno los servidores acostumbran a estar configurados para servir el archivo index.html del directorio especificado, si existe, acortando un poco la dirección. Si el recurso al que se accede es en realidad un ejecutable de servidor se le pueden pasar parámetros que modifiquen su comportamiento, separando el nombre del valor por el signo igual (=). Si se le pasa más de un parámetro deberán separarse entre sí por el carácter ampersand (&, pero recuerde codificarlo en el código html como &amp;). También se puede especificar un identificador en el documento de destino para que el navegador muestre el contenido del documento empezando a partir del elemento identificado por el mismo (véase Enlazar a parte de un documento).

Algunos ejemplos de recursos HTTP, HTTPS y FTP:

  • http://www.example.com/ accede al servidor www.example.com por HTTP.
  • http://www.example.com/#seccion1 igual que el anterior pero sitúa el documento en el navegador con el elemento identificado como seccion1 al principio del área de visualización del navegador, si es posible y existe tal identificador.
  • http://www.example.com/index.html. En el caso de que el servidor esté configurado para servir el documento index.html si no se especifica el nombre del archivo, esta dirección equivaldría a la primera.
  • https://usuario:password@www.example.com:81/ruta/de/acceso.php?param=hola&action=muestra#zona-n aquí tenemos un ejemplo completito, especificando nombre de usuario, contraseña, puerto de acceso, parámetros, identificador y por HTTPS.
  • ftp://usuario@ftp.example.com/ aquí accedemos por ftp indicando nuestro nombre de usuario. Si se requiere contraseña lo más seguro es que el navegador nos muestre un diálogo en el que introducirla.

Para correos electrónicos (mailto:) se utiliza una sintaxis diferente, definida en la RFC2368[4]: se trata de el prefijo mailto: seguido de ninguno, uno o más destinatarios separados por comas. También se pueden especificar los parámetros de la cabecera del correo, aunque la mayoría de navegadores ignorarán los parámetros no seguros. Entre los parámetros que se acostumbran a aceptar están:

  • to. Especifica los destinatarios y es redundante si se ponen los destinatarios seguidamente del mailto:.
  • subject. Indica el asunto del mensaje.
  • body. Indica el cuerpo del mensaje, el contenido.

Absténgase de utilizar espacios en los URI. Si lo necesita (para el campo body) utilice la codificación hexadecimal ASCII correspondiente (con el signo de porcentage % precediendo cada carácter), en este caso %20. Algunos ejemplos:

  • mailto:usuario1@example.com,usuario2@example.com
  • mailto?to=usuario@example.com&subject=Algo%20interesante
  • mailto?subject=Hola,%20amigo&body=Un%20saludo

El hecho de acceder a un enlace de correo electrónico no implica el envío del correo electrónico. El navegador debería hacer una llamada al programa de correo predeterminado del sistema operativo o el configurado por el navegador y crear un nuevo mensaje de correo rellenando los campos especificados y a la espera de que el usuario lo envíe, guarde, modifique, descarte, etc. El mensaje no es enviado desde el servidor que suministró el documento XHTML.

El URI javascript: es, de hecho, especial, ya que su contenido es procesado tal cual por la consola JavaScript del navegador, si es que tiene soporte para ello.

Parrafos e ids

En XHTML, los títulos están definidos por los tags <h1>, <h2>,..., <h6>. <h1> es el título más grande y <h6> el más pequeño. Los títulos para una sección deberían ser alguno de estos tags. Un párrafo debe ir entre los tags <p>. Un párafo no debería incluir su propio título dento de sí mismo.

Tanto los títulos como los párrafos deben tener el atributo id (pronunciado como la abreviatura de identificación). En HTML, esto se llamaba a veces el atributo name, pero ahora, el atributo name está descontinuado. Vamos a crear ahora un XHTML de ejemplo, pondremos un título que diga "Inicio" y un párrafo que diga "Hola mundo" con el id "contenido":

  <h1>Inicio</h1>
  <p id="contenido">Hola mundo</p>


Todos los tags en XHTML pueden tener un atributo id. Es recomendable añadir dicho atributo a cada tag para asegurarse que los usuarios podrán modificar la estética fácilmente por la que más les guste, por medio de las hojas de estilo. El id de un bloque de texto o de un título no se aprecian en ninguna parte de la página XHTML, pero tiene otros usos. Por ejemplo, si estás vinculando a una página XHTML, es posible hacer abra esa página y luego escrole automáticamente hasta que encuentre el elemento con un cierto id. Para hacer eso, debes usar una ruta relativa como se explicó antes. Si estás vinculando a un id de la página actual, usa la sintaxis #nombre_del_id para el id al que quieras vincular. Por ejemplo, para hacer un vínculo a la sección con el id parrafos_e_id (esta sección), debes usar el código

<a href="#parrafos_e_id">esta sección</a>

para obtener esto: esta sección. Vinculando desde otro sitio web al id de una página es muy simple. Sólo escribe la URL que quieres vincular acompañada por un un singo # (sin espacios) y el id al que quieres referenciar. Entonces, para vincular al id "Sister_Projects" de la página principal de Wikibooks debes escribir:

<a href="http://wikibooks.org/wiki/Main_Page#Wikibooks'_Sister_Projects">
  Wikibook's sister projects
</a>

para obtener esto: Main Page#Wikibooks' Sister Projects.

Hagamos un XHTML más largo para ilustrar mejor este punto.

 <!DOCTYPE html 
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html>
   <head>
     <title>
       Paragraph
     </title>
   </head>
   <body>
     <p id="Wikibooks">
       <h1>Wikibooks</h1>
       Wikibooks is a great website. Click
         <a href="#Books">here</a>
       to see some examples of some textbooks.
     </p>
     <p id="Books">
       <h1>Books</h1>
       Some books at Wikibooks.org include: 
       Algebra, XHTML, and Spanish.
     </p>
   </body>
 </html>

Archivo:XHTML-paragraph-firstloaded.png
Page when first loaded
Archivo:XHTML-paragraph-here.png
Page after "here" is clicked

Download here

Los saltos de línea y los separadores están indicados con un elemento vacío, o uno que se cierra a sí mismo usando un signo '/' al final del tag. Los saltos de línea, que crean una nueva línea sin empezar un nuevo párrafo, están definidas por el elemento <br />. Aunque si seguimos los estándares, es correcto escribirlo como <br /> si no lo escribes como un elemento suelto, algunos navegadores no lo renderizarán de forma correcta. Lo mismo se aplica a los separadores, escritos usando el elemento <hr />. Los separadores se ven como una línea que cruza la pantalla en horizontal, así:


(Nota: Si estas usando el tema Cologne Blue en los Wikibooks, puede que no veas esta línea. Si no la ves, cambia temporalmente a un tema diferente como Standard o Nostalgia)

El espacio entre br y / es necesario para que algunos navegadores viejos lo interpreten correctamente. Los estándares no lo requieren pero tampoco lo prohíben.

Referencias

  1. Apreciación de Chuck Musciano y Bill Kennedy, «HTML y XHTML. La guía definitiva». Editorial O'Reilly (en español por Anaya Multimedia). ISBN 0-596-00382-X
  2. RFC 3305 y W3C Note: URIs, URLs, and URNs: Clarifications and Recommendations 1.0, el mismo contenido pero publicado por diferentes autoridades (en inglés).
  3. RFC 2616, sección 3.2.2: Hypertext Transfer Protocol - HTTP/1.1: http URL (texto plano, en inglés).
  4. RFC 2368: The mailto URL scheme (texto plano, en inglés).