Manual breve de HTML para barrapunteros
Tras explicar cómo poner un enlace en Barrapunto, un PH me ha recordado que ya he explicado cosas por el estilo en varias ocasiones, así que para no tener que reescribir la explicación una y otra vez, voy a explicar aquí de un tirón el uso de las etiquetas HTML que acepta Barrapunto. Lo siento por quienes esperabais encontrar un manual completo de HTML. Lo que veis es lo que hay (WYSIWYG, que diría aquél). A quienes no habéis usado nunca código HTML, os recomiendo que invirtáis diez minutos de vuestra vida en leer esto, ya que este código es realmente muy fácil de usar (tanto que hasta yo he aprendido a desenvolverme con él), y el uso de negritas, cursivas, enlaces, listas y sangrados puede hacer mucho más atractiva y eficaz la lectura de vuestros mensajes.
Como podéis ver al pie del cuadro de edición de vuestros mensajes, las etiquetas HTML aceptadas en Barrapunto son las siguientes: <b>, <i>, <p>, <a>, <li>, <ol>, <ul>, <em>, <br>, <tt>, <strong>, <blockquote> y <div>. Todas estas etiquetas (menos <br>) se usan de manera similar: se abre la etiqueta (<b>), se escribe el texto que queremos afectar con la etiqueta, y cerramos la etiqueta (</b>). Lo que diferencia a la apertura de una etiqueta del cierre es el uso de una barra oblícua en la segunda. Dicho esto, vamos a ir describiendo el uso de cada etiqueta una por una. Permitidme que las explique en un orden diferente al utilizado por Barrapunto.
PÁRRAFO (paragraph) <p> </p>
La primera etiqueta que hay que aprender a usar es la de los párrafos. Es muy simple, empezamos un párrafo mediante <p>, lo terminamos mediante </p>, empezamos otro mediante <p>… Aquí tenéis un ejemplo:
<p>Esto es un párrafo en el que podemos meter todo el texto que nos apetezca. En un párrafo podemos explicar muchas cosas, decir muchas tonterías, o contar muchos chistes.</p>
<p>Esto es otro párrafo. Podemos meter tantos párrafos como nos parezca oportuno. Aunque tampoco es conveniente pasarse, hay que usar la cabeza.</p>
La separación entre párrafos no depende del número de saltos de línea que hayamos introducido entre ellos, dicha separación será la misma tanto si separamos los párrafos mediante varios saltos de línea como si no introducimos ninguno. Para el código HTML un salto de línea es lo mismo que un espacio simple realizado con la barra espaciadora. Por lo tanto nuestros párrafos se verán así:
Esto es un párrafo en el que podemos meter todo el texto que nos apetezca. En un párrafo podemos explicar muchas cosas, decir muchas tonterías, o contar muchos chistes.
Esto es otro párrafo. Podemos meter tantos párrafos como nos parezca oportuno. Aunque tampoco es conveniente pasarse, hay que usar la cabeza.
SALTO DE LÍNEA (break) <br>
De todas las etiquetas que se pueden usar en Barrapunto ésta es la única que no necesita cierre. El mecanismo es muy simple: donde queramos introducir un salto de línea escribimos simplemente <br>, y listo. A diferencia de los párrafos, que se separan mediante un doble retorno de carro, esta etiqueta sólo genera un retorno de carro. Echemos un vistazo a su uso:
Imagina que estás escribiendo, y de repente te interesa <br> pasar a la otra línea por algún motivo. A lo mejor no necesitas saltar una línea, sino <br><br> dos líneas, o puede que incluso <br><br><br> tres líneas o más.
El resultado sería éste:
Imagina que estás escribiendo, y de repente te interesa
pasar a la otra línea por algún motivo. A lo mejor no necesitas saltar una línea, sinodos líneas, o puede que incluso
tres líneas o más.
CITA CON SANGRÍA (blockquote) <blockquote></blockquote>
En medio de una conversación suele ser recomendable citar la parte del mensaje al que estamos respondiendo, sobre todo si se trata de un mensaje muy largo del que sólo queremos comentar una parte concreta, o si estamos participando en una conversación anidada en la que es difícil adivinar quién responde a quién. También es útil para citar fuentes externas. El uso es idéntico al de las etiquetas <p> </p>:
<blockquote>La libertad no hace felices a los hombres, los hace, sencillamente, hombres. MANUEL AZAÑA</blockquote>
No sé si notaréis en qué consiste el resultado, ya que precisamente estoy usando la etiqueta <blockquote> para mostraros el uso de las distintas etiquetas:
La libertad no hace felices a los hombres, los hace, sencillamente, hombres. MANUEL AZAÑA
LISTA ORDENADA, LISTA DESORDENADA, ELEMENTO DE LISTA (Ordered List, Unordered List, List Item) <ul> <li></li> </ul> ; <ol> <li></li> </ol>
Esto es algo más complicado de entender, dado que consiste en mezclar distintas etiquetas para mostrar listas. Primero deberemos determinar los elementos de nuestra lista mediante las etiquetas <li> y </li> de la misma manera que utilizaríamos la etiqueta de párrafos. Cada elemento de la lista iría en un párrafo aparte. Por ejemplo, podemos formar una lista de frutas:
<li>Manzana</li>
<li>Pera</li>
<li>Naranja</li>
<li>Mandarina</li>
<li>Plátano</li>
Una vez determinados los elementos de nuestra lista tenemos que elegir cómo presentarlos, como una lista desordenada (Unordered List) cuyos elementos se señalan con puntos mediante la etiqueta <ul></ul>, o como una lista ordenada (Ordered List) cuyos elementos se señalan con números mediante la etiqueta <ol></ol>. Elijamos uno u otro tipo de lista, las etiquetas de apertura y cierre tenemos que situarlas al principio y al final de nuestra lista de elementos, de la siguiente manera:
<ul>
<li>Manzana</li>
<li>Pera</li>
<li>Naranja</li>
<li>Mandarina</li>
<li>Plátano</li>
</ul><ol>
<li>Manzana</li>
<li>Pera</li>
<li>Naranja</li>
<li>Mandarina</li>
<li>Plátano</li>
</ol>
Lo que nos dará las siguientes listas:
- Manzana
- Pera
- Naranja
- Mandarina
- Plátano
- Manzana
- Pera
- Naranja
- Mandarina
- Plátano
CURSIVA Y ÉNFASIS (italic & emphasys) <i></i> <em></em>
A efectos prácticos estas dos etiquetas son iguales, aunque tengo entendido que el W3C recomienda la segunda. El uso es muy sencillo, es similar al uso de la etiqueta de párrafo, pero no tiene por qué envolver un párrafo completo, puede envolver una expresión, una palabra, o incluso una única letra. Un ejemplo:
En un texto puede haber <i>expresiones</i> que nos interesa remarcar o <em>enfatizar</em>.
Resultado:
En un texto puede haber expresiones que nos interesa remarcar o enfatizar.
NEGRITA (bold & strong) <b></b> <strong></strong>
Estas dos etiquetas también son prácticamente iguales, aunque el W3C recomienda (si no me equivoco) la segunda. El uso es idéntico al de la anterior etiqueta:
En un texto puede haber <b>ideas</b> que nos interesa remarcar o <strong>reforzar</strong>.
Resultado:
En un texto puede haber ideas que nos interesa remarcar o reforzar.
TEXTO DE TELETIPO O ANCHO FIJO (Typewriter Text) <tt></tt>
Otra etiqueta de uso sencillo. Se usa de la misma manera que las anteriores, y el resultado es mostrar el texto con una tipografía de ancho fijo. Yo apenas uso esta etiqueta, pero puede resultar interesante usarla para mostrar el uso de la consola de comandos. Por ejemplo:
<tt># apt-get update && apt-get -d dist-upgrade</tt>
Resultado:
# apt-get update && apt-get -d dist-upgrade
ENLACES O “ANCLAS” (anchors) <a> </a>
Ésta quizás sea la etiqueta más interesante y útil de todas, y seguramente también una de las más complicadas. Aún así es bastante sencillo, sólo necesitas decidir dos cosas:
- La URL que quieres enlazar.
- El texto que quieres que muestre el enlace.
Por ejemplo, supongamos que quieres enlazar a “http://www.barrapunto.com“, y quieres que aparezca el texto “Barrapunto ya no es lo que era“.
Tendrías que combinar estos tres elementos:
- Estructura del código HTML: <a href=”"></a>
- URL que quieres enlazar: http://www.barrapunto.com
- Texto que quieres mostrar en el enlace: Barrapunto ya no es lo que era
El código se usaría de la siguiente manera:
<a href=”http://www.barrapunto.com“>Barrapunto ya no es lo que era</a>
Resultado
En realidad en un enlace puedes meter más cosas, como por ejemplo un target=”_blank”, un title=”Texto informativo”, incluso un style=”font-weight: bold” o un class=”enlaceverde”, pero todo esto no funcionará en Barrapunto.
NOTAS FINALES
Todavía nos quedaría explicar el uso de la etiqueta <div></div>, pero lo cierto es que no se me ocurre nada útil que hacer con esa etiqueta en Barrapunto. Se suele utilizar para dividir un documento en capas y luego aplicar a cada una un estilo CSS independiente, pero dado que no tenemos acceso al CSS de Barrapunto, creo que en este contexto es una etiqueta inútil. Salvo que alguien me diga de qué me puede servir en Barrapunto.
Un aspecto a tener en cuenta es el uso de mayúsculas y minúsculas en las etiquetas. En principio el código HTML no encuentra diferencias entre <BLOCKQUOTE> y <blockquote>, podéis usar las etiquetas como os parezca oportuno. En este texto yo las había puesto en mayúsculas para que destacaran en la estructura, pero lo cierto es que prefiero usarlas en minúsculas, y al final las he cambiado. De todas maneras, he de advertiros de que Barrapunto es un poco tiquismiquis a la hora de interpretar el código: si abres una etiqueta en mayúsculas, debes cerrarla también en mayúsculas, y si la abres en minúsculas, debes cerrarla en minúsculas. De lo contrario, Barrapunto interpretará incorrectamente el código HTML. Es decir, nada de abrir con <BLOCKQUOTE> y cerrar con <blockquote>. Y ni se os ocurra utilizar tonterías del tipo de <bLOcqUoTe> en Barrapunto. En vuestra casita, lo que queráis, pero aquí no, que luego sale mal.
Otro asunto importante es el del anidado de etiquetas. Hay que tener en cuenta que a un mismo texto se le pueden aplicar diversas etiquetas. Por ejemplo, un texto puede ser un enlace en negrita y en cursiva. Esto se hace de la siguiente manera:
<a href=”http://www.barrapunto.com”>Barrapunto <b>ya no es <i>lo que era</i></b></a>
Con el siguiente resultado:
Al anidar etiquetas hay que tener cuidado con el orden en que se cierran. Siempre hay que cerrar primero la última en abrirse, de manera similar a como lo haríamos con un ejercicio de matemáticas, en el que no podemos cerrar la llave hasta que no hayamos cerrado el corchete, y no podemos cerrar el corchete hasta que no hayamos cerrado el paréntesis:
2 + { 3 x [ 5 - ( 4 + 6 ) - 2 ] - 2 }
En nuestro ejemplo primero hemos abierto la etiqueta <a>, después la etiqueta <b>, y finalmente la etiqueta <i>. Por lo tanto deberemos empezar por cerrar la etiqueta </i>, que ha sido la última en abrirse, después cerraremos la etiqueta </b>, y finalmente podremos cerrar la etiqueta </a>.
Y eso es todo lo que necesitamos saber para escribir mensajes bien formateados y cómodos de leer en Barrapunto. Como ves, no es tan complicado, sólo es cuestión de fijarse un poco. Y si tienes dudas, pregunta. 
PD. Se me olvidaba:
© 2006 Defero.tk. Se otorga permiso para copiar, distribuir y/o modificar el texto bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.2 o cualquier otra versión posterior publicada por la Free Software Foundation; sin Secciones Invariantes, sin Cubierta Frontal, y sin
Cubierta Posterior. Se puede obtener una copia de la licencia de gnu.org, también traducida al castellano, y comentada en la Wikipedia.