HAL y las marcas (HTML - I)

Una vez expuesta la manera general e informal de marcar un texto, convoquemos al primer experto, el menos sofisticado de los que vamos a ver, el propio navegador web, que es primariamente el productor de la versiones finales de los textos que visitamos en la Web.

Todo navegador web entiende, como mínimo, una serie de marcas convencionalmente estipuladas para definir la estructura de nuestro documento. El conjunto de estas convenciones y las prescripciones de su uso se denomina HTML (HyperText Markup Language, lenguaje de marcas de hipertexto). Bajo este amenazador título no hay más que la descripción precisa de las marcas (y del uso de esas marcas) que debo introducir en mi escrito para que un navegador web las presente como una página web. Esta descripción surge del común acuerdo de las partes implicadas (creadores de contenidos web, desarrolladores de navegadores, etc.) y se recogen en las especificaciones del consorcio W3C. Dicho de otra manera, saber HTML es conocer qué marcas debo poner en mi texto para que un navegador las entienda y cómo debo escribirlas.

Como HTML es un sistema de marcas genérico, dispondremos de marcas equivalentes para aquellas que son comunes a todo texto. No podremos contar, sin embargo, con marcas especialmente apropiadas para los elementos característicos y únicos de nuestro texto, ni tampoco con la posibilidad de crear dichas marcas por nosotros mismos. Por tanto, todos los elementos específicos de nuestro texto anterior (nombre de programa, orden y opción) deberán marcarse con alguna clase de marca genérica de HTML.

Veamos, primero, el nombre de los elementos HTML genéricos que constituyen nuestro texto de ejemplo. Se trata de abreviaturas de palabras inglesas que designan el significado estructural del elemento marcado:

DIV

Division = Sección, división

Hn

Header = Cabecera o título (donde n es un número que indica el nivel de título, '1' para el título del nivel más alto y '6' para el de mínimo nivel. Por ejemplo, H1 designaría el título general del texto; H2, el de las secciones principales; etc).

OL

Ordered List = Lista ordenada

LI

List Item = Elemento de lista

P

Paragraph = Párrafo

A ellos habría que añadir los siguientes elementos HTML, que utilizaremos para identificar aquéllos de nuestro texto que son característicos únicamente de él. Los nombres de programa los marcaremos como fragmentos de texto enfatizados y las opciones y las órdenes como fragmentos de código de computador:

EM

Emphasis = Énfasis

CODE

Code = Código

Las marcas HTML de comienzo y fin de elemento para los elementos citados se construyen enmarcando el nombre del elemento en paréntesis angulares, cuando la marca es la de inicio (por ejemplo, <P> sería la marca HTML para indicar el comienzo de un párrafo), y añadiendo una barra ('/') a dicha marca después del primer paréntesis, cuando la marca es la de fin (por ejemplo, </P> sería la marca HTML para señalar el fin de un párrafo).

En consecuencia, las marcas HTML que corresponderán a los elementos de nuestro texto y que equivalen a las marcas informales que aplicamos en el anterior artículo son las siguientes:

INICIO TÍTULO SECCIÓN:

<H2>

FIN TÍTULO SECCIÓN

</H2>

INICIO SECCIÓN

<DIV>

FIN SECCIÓN

</DIV>

INICIO PÁRRAFO

<P>

FIN PÁRRAFO

</P>

INICIO LISTA NUMERADA

<OL>

FIN LISTA NUMERADA

</OL>

INICIO ELEMENTO LISTA

<LI>

FIN ELEMENTO LISTA

</LI>

INICIO NOMBRE PROGRAMA

<EM>

FIN NOMBRE PROGRAMA

</EM>

INICIO OPCIÓN

<CODE>

FIN OPCIÓN

</CODE>

INICIO ORDEN

<CODE>

FIN ORDEN

</CODE>

Procedamos, pues, a sustituir nuestras marcas informales por las marcas HTML convenidas. Para ello, por supuesto, merece la pena recurrir a HAL, concretamente a sed.

Guardemos el texto con nuestras etiquetas iniciales en el fichero texto_etiquetado.txt. [Si el lector utiliza Vim para copiar el texto desde esta web al susodicho fichero, ejecute antes de hacerlo la orden :set wrapmargin=0, ello impedirá que se creen saltos de línea donde no debe haberlos y evitará comportamientos inesperados de sed; en caso de emplear otros editores, asegúrese de que la generación de saltos de línea automáticos no está activada.]

Crearemos también un fichero, que llamaremos txt2html.sed, y escribiremos en él las siguientes órdenes de sed, que son las que realizan una a una la conversión requerida:

s/INICIO TÍTULO SECCIÓN/<H2>/g
s/FIN TÍTULO SECCIÓN/<\/H2>/g
s/INICIO SECCIÓN/<DIV>/g
s/FIN SECCIÓN/<\/DIV>/g
s/INICIO PÁRRAFO/<P>/g
s/FIN PÁRRAFO/<\/P>/g
s/INICIO LISTA NUMERADA/<OL>/g
s/FIN LISTA NUMERADA/<\/OL>/g
s/INICIO ELEMENTO LISTA/<LI>/g
s/FIN ELEMENTO LISTA/<\/LI>/g
s/INICIO NOMBRE PROGRAMA/<EM>/g
s/FIN NOMBRE PROGRAMA/<\/EM>/g
s/INICIO ORDEN/<CODE>/g
s/FIN ORDEN/<\/CODE>/g
s/INICIO OPCIÓN/<CODE>/g
s/FIN OPCIÓN/<\/CODE>/g

Ahora podemos pedir a sed que realice la sustitución de marcas y guarde el resultado en el fichero texto_etiquetado.html. (Nótese que al fichero le añadimos la extensión html puesto que el fichero resultante contendrá marcas html).

Pero vamos a poner a trabajar a sed de una manera diferente a como lo hemos hecho habitualmente. Se recordará que la orden para sed se le daba como su primer argumento:

sed ORDEN_SED FICHERO

Cuando había varias órdenes ---no lo explicamos expresamente, pero sí lo utilizamos, por ejemplo, aquí--- se recurría la opción -e ORDEN, que se podía repetir cuantas veces quisiéramos:

sed -e ORDEN1 -e ORDEN2 ... FICHERO

Ahora bien, cuando el número de órdenes para sed es grande, como en nuestro presente caso, es preferible guardarlas en un fichero en lugar de escribirlas directamente en la línea de órdenes y utilizar la opción -f para que sed lea sus órdenes de ese fichero:

sed -f FICHERO_ORDENES FICHERO

Por tanto, la orden que en esta ocasión enviaremos a HAL para que sed nos libere del pesadísimo trabajo de realizar a mano la conversión es la siguiente:

sed -f txt2html.sed texto_etiquetado.txt >texto_etiquetado.html

Y el resultado será éste:

<H2>
Navegación gráfica
</H2>

<DIV>
<P>
Si hubiésemos estado visitando la página con un buen navegador gráfico que disponga de la opción de guardar las páginas web como texto, tendríamos que realizar al menos dos acciones, ambas independientes:
</P>

<OL>
<LI>
Ir al menú "Archivo" del navegador y guardar como texto la página web. (Lo que además implica seleccionar un nombre de fichero y un directorio).
</LI>

<LI>
Crear en <EM>Vim</EM> una nueva ventana para editar en ella el documento que acabamos de guardar, mediante la orden <CODE>:new ruta_fichero</CODE>.
</LI>
</OL>
</DIV>

<H2>
Navegación desde consola
</H2>

<DIV>
<P>
Si navegamos con <EM>w3m</EM>, y gracias a la interacción entre las aplicaciones de consola, bastaría ejecutar una única acción desde el propio <EM>Vim</EM>, que, además, podríamos abreviar para reproducirla en situaciones semejantes. Veamos cómo.
</P>

<P>
Con <EM>w3m</EM> el proceso de convertir una página web en texto es absolutamente elemental: añadir la opción <CODE>-dump</CODE>. Por ejemplo:
</P>

<P>
<CODE>w3m -dump http://www.w3.org/TR/html401/struct/lists.html</CODE>
</P>

<P>
nos devuelve la página dada como argumento, tal cual se presenta en el navegador, pero como puro texto.
</P>
</DIV>



Resumen

• HTML es un lenguaje de marcas. El navegador web procesa un texto marcado con marcas HTML para su visualización adecuada como página web.


• HTML utiliza nombres especiales para designar los elementos estructurales y genéricos de todo texto (sección, título, párrafo, lista, etc.). Por ejemplo, DIV es la forma de llamar en HTML a una sección: P, a un párrafo, etc.


• Las marcas HTML se construyen a partir del nombre del elemento que se ha de marcar, englobándolo en paréntesis angulares y distinguiendo la marca de inicio de la marca de cierre. Por ejemplo, <P> es la marca de inicio de un párrafo y </P> es la de cierre.


• La opción -f de la orden sed permite agrupar varias órdenes de sed en un mismo fichero y pasárselas a sed sin que sea necesario escribirlas directamente en la línea de órdenes. Por ejemplo, sed -f mis_ordenes mi_fichero ejecutará las órdenes de sed que constan en el fichero mis_ordenes para procesar el fichero mi_fichero.