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
Trasladado desde Lenguaje XHTML
 
Trasladado desde Lenguaje XHTML
Línea 27: Línea 27:
</body>
</body>
</html>
</html>

==Parrafos e <code>id</code>s==
En XHTML, los títulos están definidos por los tags &lt;h1&gt;, &lt;h2&gt;,..., &lt;h6&gt;. &lt;h1&gt; es el título más grande y &lt;h6&gt; 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 &lt;p&gt;. 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 <code>id</code> (pronunciado como la abreviatura de ''identificación''). En HTML, esto se llamaba a veces el atributo <code>name</code>, pero ahora, el atributo <code>name</code> 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":

&lt;h1&gt;Inicio&lt;/h1&gt;
&lt;p id="contenido"&gt;Hola mundo&lt;/p&gt;


Todos los tags en XHTML pueden tener un atributo <code>id</code>. 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 <code>id</code> 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 <code>id</code> de la página actual, usa la sintaxis ''#nombre_del_id'' para el <code>id</code> al que quieras vincular. Por ejemplo, para hacer un vínculo a la sección con el <code>id</code> parrafos_e_id (esta sección), debes usar el código

&lt;a href="#parrafos_e_id"&gt;esta sección&lt;/a&gt;

para obtener esto: [[#parrafos_e_id|esta sección]]. Vinculando desde otro sitio web al <code>id</code> 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 <code>id</code> al que quieres referenciar. Entonces, para vincular al <code>id</code> "Sister_Projects" de la página principal de Wikibooks debes escribir:

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

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

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

<table>
<tr><td>
<pre>
&lt;!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<nowiki>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</nowiki>

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;
Paragraph
&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id="Wikibooks"&gt;
&lt;h1&gt;Wikibooks&lt;/h1&gt;
Wikibooks is a great website. Click
&lt;a href="#Books"&gt;here&lt;/a&gt;
to see some examples of some textbooks.
&lt;/p&gt;
&lt;p id="Books"&gt;
&lt;h1&gt;Books&lt;/h1&gt;
Some books at Wikibooks.org include:
Algebra, XHTML, and Spanish.
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</td>
<td>
[[Image:XHTML-paragraph-firstloaded.png]]
<br/>
<small>Page when first loaded</small>
<br/>
[[Image:XHTML-paragraph-here.png]]
<br/>
<small>Page after "here" is clicked</small>

<center>[[Media:Wikibooks-paragraph.html|Download here]]</center></td></tr></table>

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 &lt;br /&gt;. Aunque si seguimos los estándares, es correcto escribirlo como &lt;br /&gt; 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 &lt;hr /&gt;. Los separadores se ven como una línea que cruza la pantalla en horizontal, así:
<hr />

(''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 <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.



[[Categoría:Lenguaje XHTML]]
[[Categoría:Lenguaje XHTML]]

Revisión del 19:20 15 ene 2006

Vínculos

Los hipervículos, generalmente abreviados como vínculos, son parte fundamental del Internet. Un vínculo te traslada de un documento a otro solo haciendo click 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.

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>
      Link
    </title>
  </head>
  <body>
    Click 
      <a href="http://www.wikibooks.org/">here</a>
    to go to 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.