Introducción

Hace unos días que comenzamos con la serie de artículos dedicados a la informática para estudiantes de filología, historia y otras humanidades. Y empezamos con la introducción a LaTeX.

Vamos ahora con HTML.

HTML es un lenguaje de marcado, y como tal es texto plano en el que se intercalan una serie de marcas (de ahí su nombre) que indican al programa que lea ese fichero cómo debe mostrar el texto. Se usa, principalmente, para hacer páginas web, sobre todo en combinación con CSS y JavaScript, y tiene unas posibilidades fantásticas. Al ser el más usado en la web están, en mi opinión, un poco dejadas de lado las otras posibilidades que ofrece, que son las que buscamos: un formateado de textos lo más sencillo posible y multidispositivo.

Las ventajas que tiene usar HTML para manejar textos es la total interoperabilidad que ofrece manteniendo una ventajosa capacidad de formatear el texto. Existen muchas opciones para tener un texto con formato, pero la interoperabilidad siempre es un problema. Por ejemplo, la manera más sencilla de tratar un texto es como texto plano, el famoso fichero de extensión .txt, pero no permite ningún formato, por lo que no se puede incluir cursiva o un tamaño de letra mayor en los títulos de los capítulos. Otros sí permiten estas funcionalidades, pero no son multiplataforma. ¿Solución? Un estándar. Con HTML es posible editar el fichero en cualquier plataforma que permita manejar texto plano, y visualizarlo en cualquier sistema operativo, con o sin sistema gráfico, móviles, tabletas y lectores de libros electrónicos, sin más necesidades que un navegador de internet (aunque no haga falta conexión a internet, obviamente).

Insisto, el objetivo es un texto fácil de leer y editar en cualquier dispositivo, con posibilidades de ampliación muy grandes (como añadir audio y vídeo, por ejemplo). Pero no es algo apto para un trabajo que haya que presentar impreso, para eso, \LaTeX.

Otra apreciación: esto no es para hacer páginas web, sino, como dije al principio, para utilizar HTML en el tratamiento sencillo de textos, por eso nos saltamos un montón de pasos obligatorios como la declaración inicial y muchas otras cosas.

Pues nada, al lío. Lo necesario para empezar a aprender algo de HTML (orientado al tratamiento de textos) es un editor de texto plano (cualquiera sirve, aunque un editor dedicado puede simplificar aún más el trabajo) y un navegador para ver el resultado (nuevamente sirve cualquiera).

Materia

Un archivo HTML es, como decíamos, texto plano legible y editable con cualquier editor. ¿Dónde está la diferencia? En una serie de marcas que se pueden insertar en el texto para darle un sencillo formato. Además, el fichero debe reunir una serie de condiciones:

  • Se divide en varias partes fijas que deben indicarse.
  • No distingue entre un espacio y más de uno. Cualquier grupo de espacios entre palabras será mostrado como un solo espacio.
  • No distingue entre espacios y saltos de línea. Un salto de línea es interpretado como un espacio. Para indicar un nuevo párrafo o una nueva línea en el párrafo hay que insertar una marca.
    Esto en realidad es una ventaja a la hora de escribir el texto y que resulte legible incluso sin usar el visualizador.

Las marcas que se utilizan, llamadas etiquetas, empiezan y terminan con los caracteres “menor que” y “mayor que”. Entre ellos se escriben los códigos necesarios para que el programa visualizador (el navegador del ordenador o el móvil, el lector de libros electrónicos, etc.) entienda cómo debe mostrar el texto. Estas etiquetas, normalmente, porque hay excepciones, se insertan en parejas, una de apertura y otra de cierre. La de apertura lleva el código necesario y la de cierre incluye, además del código de la etiqueta, una barra, así:

<p>Texto</p>

Estas son las marcas de párrafo. Todo lo que haya en el medio es un solo párrafo, independientemente, como dijimos antes, de los saltos de línea.

Todos los ficheros HTML empiezan y terminan igual, con una etiqueta para abrir y otra para cerrar. El contenido que se mostrará debe estar entre estas etiquetas, lo que quede fuera, antes o después, no existe a los ojos del visualizador.

Abre un editor y escribe

<html>

deja unas líneas en blanco y escribe

<html>

En el medio de ambas etiquetas escribe (o copia y pega) lo que te plazca, el nombre del gato, unos apuntes de Historia o el Quijote. Ahora guarda el fichero con el nombre que quieras y la extensión html. Por ejemplo, prueba.html. Ábrelo a continuación con el navegador, ya tienes un texto en la pantalla, ¿no?

Lo malo es que está todo en la misma línea porque no hemos insertado marcas de párrafo. Y aún faltan más cosas. Sin prisa. Además, es probable que los acentos y otros signos se vean mal. Si sucede, cambia la codificación de caracteres en el navegador a Unicode UTF-8 (normalmente en el menú Ver – Codificación; más adelante veremos cómo hacer que esto no suceda).

Ahora bien, verás que en la pestaña o en la barra de título del navegador no aparece nada sino el nombre del fichero, en este caso prueba.html. Eso es porque no hemos definido algunos parámetros que necesitamos definir. Los parámetros relativos al documento en sí y no al texto que contiene se agrupan en una sección especial denominada «encabezado», que se enmarca con las etiquetas head y /head y va siempre antes del texto.

Vuelve al fichero de texto y escribe, bajo la etiqueta html, otra con el texto head, y justo sobre el texto que has escrito (el nombre del gato, el Quijote o los apuntes de Historia) otra con el texto /head. Ya tenemos un fichero HTML con un encabezado (vacío) y un texto.

<html>
  <head>
  </head>
    <p>En un lugar de la Mancha...</p>
</html>

¿Qué hay que incluir en el encabezado? Se pueden incluir infinidad de cosas, esto está pensado, entre otras cosas, para páginas web que pueden ser muy, muy complejas. Pero a nosotros no nos interesa más que el título del documento. Por lo tanto, entre las etiquetas del encabezado escribe

<title>Título del documento</title>

Debajo de esta marca de título vamos a dejar una órden que indique al navegador la codificación que debe utilizar para visualizar el documento. Normalmente no es necesario, pero algunos muy simples, como el visor de HTML de Android, no tienen opción de cambiar manualmente este parámetro. Lo que hay que escribir es lo siguiente (prometido que es la única cosa “técnica” que aprenderemos que no tiene que ver directamente con el texto escrito):

<meta charset="UTF-8">

Ahora guarda el fichero de nuevo, refresca la página en el navegador (Ctrl R, F5, etc.) y comprueba lo que sucede en la barra de título de la ventana o en la pestaña (y con los acentos y las eñes si es que no se veían).

Seguimos.

Aunque así funciona bastante bien, para evitar quebraderos de cabeza en el futuro, seguiremos las recomendaciones en la estructura del documento. Tenemos un documento que empieza y termina con html y /html, dentro del cual hay una sección, el encabezado, delimitada por head y /head. Ahora nos hace falta otra sección, la que engloba todo lo que se muestra en la ventana del navegador. Nuevamente, todo lo que quede fuera, no se verá. Como esta sección es la que abarca todo el cuerpo del documento, se llama (y se etiqueta como) body.

Bajo la etiqueta de cierre del encabezado y sobre el texto, es decir, entre ambos, escribe

<body>

y tras el texto que hayas introducido, la obligatoria etiqueta de final:

</body>

Ya está lista la estructura de un documento completo, solo falta darle un poco de buen aspecto. Incluiremos un título general, unos títulos para los capítulos (si quieres) y separaremos los párrafos.

<h1>Título del documento de prueba</h1>

para incluir un título en letras grandes. Las etiquetas como esta se pueden numerar para hacer un esquema del documento. H1 es la mayor, el título principal, H2 es algo menor, valdría para el título de la primera parte, H3 es menor y valdría para el título del primer capítulo de la primera parte… etc. Así hasta H6. H4 es del mismo tamaño que el texto pero en negrita, por lo que H5 y H6 son de menor tamaño, para poder distinguir los distintos niveles en la estructura lógica del documento.

Ahora, en cada párrafo del texto incluye una etiqueta p al comienzo y otra /p al final.

Ya está. Guarda de nuevo y refresca el navegador.

Ya tienes tu primer documento HTML funcionando. La estructura es muy básica todavía, pero es visible en cualquier navegador de cualquier ordenador, puedes ampliar y reducir el tamaño de la letra como en cualquier página web, llevártelo para leerlo en el móvil o en la tableta, o transferirlo al libro electrónico (respecto a estos últimos, suelen incorporar visualizadores extremadamente sencillos, y complicar mucho el documento añadiendo etiquetas más allá de enlaces, párrafos y título principal es poco recomendable). Poco a poco iremos ampliando conocimientos y haciéndolo más complejo, con listas numeradas, enlaces, notas al pie, índices, etc. Pero con esta sencilla estructura que hemos hecho, la cual puedes guardar para rellenar con diferentes textos, tienes más que suficiente para novelas, apuntes, etc. Lo de las novelas lo digo porque una de mis cosas favoritas es guardar la página web de las obras gratuitas de la Biblioteca Cervantes, disponibles on-line, limpiarla de todo lo que no sea esto que he explicado, y tenerla disponible para leer allá donde vaya.

Por si te has perdido algo, aquí tienes todo el documento completo con un ejemplo de estructura lógica:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Don Quijote de la Mancha</title>
  </head>
  <body>
    <h1>Don Quijote de la Mancha, de Miguel de Cervantes</h1>
    <h2>Primera parte</h2>
    <h3>1. Capítulo primero</h3>
      <p>En un lugar de la Mancha
      de cuyo nombre no quiero
      acordarme...</p>

      <p>Es, pues, de saber que este
      sobredicho hidalgo...</p>
    <h3>2. Segundo capítulo</h3>
      <p>Hechas, pues, estas prevenciones
      no quiso aguardar más tiempo...</p>
    <h2>Segunda parte</h2>
    <h3>1. Capítulo primero</h3>
      <p>Cuenta Cide Hamete Benengeli...</p>
  </body>
</html>

Y esto es todo por hoy. Recuerda que este artículo es original de Bokunoshumi.

Anuncios

3 comentarios en “HTML: introducción y primer documento

  1. Me parece muy interesante la iniciativa de acercar las herramientas informáticas a los estudiantes de humanidades. Mucho ánimo con ello.

    En cuanto al HTML, ¡nunca lo habría relacionado con algo que no fuera la web! Es una gran idea. Aunque he de decir que desde que descubrí Pandoc, ya casi solo escribo en Markdown, hasta he abandonado al pobre LaTeX.

    ¡Un saludo!

    PD. Creo que el WordPress te ha hecho líos con los símbolos de mayor y menor que en el código… a mí también me pasa pero no sé por qué no se visualizan correctamente.

    1. Tienes razón, algo pasa con estos símbolos. Tampoco puedo escribir la barra invertida en el medio del texto. Se investigará.
      Me alegro de que el uso de HTML fuera de la web te parezca buena idea, la verdad es que para manejar texto es algo muy sencillo, no hay que complicarse, y hay tantas carencias en el mundo de las letras respecto a la tecnología que algo sencillo es lo mejor (o eso creo). Pero estoy viendo esto de Pandoc y Markdown y me está pareciendo interesante. Tengo que investigar más, lo haré cuando tenga más tiempo.
      ¡Saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s