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
reestructuro poco a poco
a y href
Línea 8: Línea 8:
| Atributos = [[../Atributos#Atributos comunes|Atributos comunes]], <tt>charset</tt>, <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>charset</tt>, <tt>type</tt>, <tt>href</tt>, <tt>hreflang</tt>, <tt>rel</tt>, <tt>rev</tt>, <tt>shape</tt>, <tt>coords</tt>
}}
}}
Es el elemento que permite que una región del documento se convierta en un hipervínculo. Es una región y no necesariamente de texto.
Es el elemento que permite que una región del documento (no necesariamente de 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 <tt>a</tt>, sino que deberemos insertar un elemento <tt>a</tt> en cada párrafo.


El nombre de este elemento, <tt>a</tt>, viene del inglés ''anchor'', [[w:Ancla|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 ''orígen'' de éste y, por tanto, se definiría mejor como ''el lugar desde donde se echa el ancla''<ref name="libro_HTM-y-XHTML">Apreciación de Chuck Musciano y Bill Kennedy, «[http://www.oreilly.com/catalog/html5/ HTML y XHTML. La guía definitiva]». Editorial O'Reilly (en español por Anaya Multimedia). ISBN 0-596-00382-X</ref>.
Un hipervínculo te traslada de un documento a otro sólo haciendo clic sobre él. Por defecto, en la mayoría de navegadores aparecen azules y con subrayado. Cuando se pasa el puntero del ratón sobre un vínculo, en la mayoría de navegadores, el puntero cambia a la forma de una mano con el dedo índice extendido.

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">[http://tools.ietf.org/html/rfc3305 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.</ref>.

Por defecto, en la mayoría de navegadores aparecen azules y con subrayado. Cuando se pasa el puntero del ratón sobre un vínculo, en la mayoría de navegadores, el puntero cambia a la forma de una mano con el dedo índice extendido.


Como fue explicado anteriormente, para crear un vínculo, se usa la etiqueta &lt;a&gt;, y se usa el atributo <code>href</code> para definir a donde se desea ir. El texto que el vínculo mostrará debería estar dentro del elemento &lt;a&gt;. Por lo tanto, si se desea escribir "[http://www.wikibooks.org/ Click aquí] para ir a Wikibooks.org." Se debería escribir:
Como fue explicado anteriormente, para crear un vínculo, se usa la etiqueta &lt;a&gt;, y se usa el atributo <code>href</code> para definir a donde se desea ir. El texto que el vínculo mostrará debería estar dentro del elemento &lt;a&gt;. Por lo tanto, si se desea escribir "[http://www.wikibooks.org/ Click aquí] para ir a Wikibooks.org." Se debería escribir:
Línea 107: Línea 111:


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

== Referencias ==

<references />
[[Categoría:Lenguaje XHTML|Hipervínculos]]
[[Categoría:Lenguaje XHTML|Hipervínculos]]
</noinclude>

Revisión del 08:54 1 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 Es el elemento que permite que una región del documento (no necesariamente de 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 orígen 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].

Por defecto, en la mayoría de navegadores aparecen azules y con subrayado. Cuando se pasa el puntero del ratón sobre un vínculo, en la mayoría de navegadores, el puntero cambia a la forma de una mano con el dedo índice extendido.

Como fue explicado anteriormente, para crear un vínculo, se usa la etiqueta <a>, y se usa el atributo href para definir a donde se desea ir. El texto que el vínculo mostrará debería estar dentro del elemento <a>. Por lo tanto, si se desea escribir "Click aquí para ir a Wikibooks.org." Se debería escribir:

<a href="http://www.wikibooks.org/">Click aquí</a>
para ir a Wikibooks.org.

La forma de escribir esto en un documento XHTML sería:

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

<html>
  <head>
    <title>
      Enlace
    </title>
  </head>
  <body> 
      <a href="http://www.wikibooks.org/">Click aquí</a>
    para ir a Wikibooks.org.
  </body>
</html>

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.