A principios de enero os hablamos de Markdown, lo que probablemente sea la mejor manera para tomar apuntes con un PC. Es un lenguaje que literalmente se aprende en media hora o menos, y nos permite crear documentos ligeros con cierto formato y estructura. También existe LaTeX, pero la curva de aprendizaje es más pronunciada y la instalación de software no es baladí. Hay otra opción, y es crear documentos de texto usando HTML y CSS.

Los HTML y CSS no son lenguajes que se diseñaron pensando en la edición de documentos de texto, pero también puede servir. Combinados hacen mucho más que eso, pero conociendo unas pocas etiquetas y reglas podemos hacer más que en Writer y mucho más que con Markdown o LaTeX. Aquí vamos a explicar esas bases, y también algunos trucos para que la impresión quede bien.

HTML y CSS para textos: una opción válida

Lo primero que hay que saber es que para poder ver un documento .html hace falta un navegador web. Es éste el que se encarga de renderizarlo y mostrar su contenido, y también lo que nos permitirá imprimir el documento. No es software que tengamos que instalar aparte, ya que ya tenemos alguno en cualquier PC o dispositivo móvil.

Otra cosa que hay que conocer es cómo crear los documentos: basta con abrir un procesador de texto plano (como Kate), añadir el contenido y guardarlo con extensión .html. Podemos, y de hecho yo aconsejo, crear también las partes del head y el body, en la primera para secciones como los estilos generales y en la segunda para el documento en sí.

También recomiendo usar Visual Studio Code o cualquier editor similar, pero que venga con lo que se conoce como Intellisense, es decir, eso que permite abrir y cerrar etiquetas y que no las tengamos que escribir en su totalidad. Además, en Code podemos pulsar poner un símbolo «!», pulsar el tabulador y nos creará la estructura básica.

Todas las etiquetas se abren y se cierran con los símbolos «mayor que» (<) y «menor que» (>), pero la de cierre suele tener una barra (/) delante.

Explicado esto, vamos con lo más importante.

El sangrado en HTML y CSS

En HTML y CSS, el sangrado no es necesario. Se podría poner todo en una línea, pero es más fácil de leer si tiene un buen sangrado y todo lo del mismo nivel a la misma altura. Se suele poner el elemento hijo unos cuatro espacios más a la derecha, o lo que dé el tabulador.

Encabezados en HTML

Los encabezados de HTML se ponen con una «h» seguida de un número del 1 al 6. Por ejemplo, el anterior texto de «Encabezados en HTML» es un «h2» y el texto completo sería:

<h2>Encabezados en HTML</h2>

Negrita, cursiva, tachado y resaltado

Siguiendo el orden del artículo sobre Markdown, lo siguiente son las negritas, cursivas, tachado y resaltado. Serían así:

<b>Texto en negrita</b>
<i>Texto en cursiva</i>
<del>Texto tachado</del>
<mark>Texto resaltado</mark>

Mostrará esto:

Texto en negrita
Texto en cursiva
Texto tachado
Texto resaltado

Potencia y subíndice

Si queremos poner un número pequeño y algo levantado (potencia) o uno en la parte contraria (subíndice), podemos con estas etiquetas:

<sup>Potencia</sup>
<sub>Subíndice</sub>

Párrafos

Estamos siguiendo el orden del artículo sobre Markdown, pero quizá no sea lo mejor para el HTML y CSS. En Markdown, los párrafos se escriben sin ninguna etiqueta, y por eso se puso en este punto, pero en HTML sí se usa una. Todo lo que hay entre la etiqueta de apertura y cierre será un bloque, y tendrá esta sintaxis:

<p>Todo lo que metamos entre estas dos etiquetas será un párrafo. Si luego ponemos otro, habrá un salto de línea entre ambos. Dentro de las etiquetas de bloque puede haber otras, como las del punto de negritas, etc, y otras etiquetas en línea. En teoría, todo lo que haya aquí dentro será un párrafo continuo. Si queremos separarlo hay que añadir otros o usar etiquetas que mencionaremos más adelante.</p>

Listas

Las listas, por lo menos las más básicas en HTML, son las ordenadas y desordenadas. Pueden ser confusas para el que no las conozca, pero un editor como Visual Studio Code facilita las cosas. Su sintaxis sería esta:

<ul>
    <li>Elemento 1 sin orden</li>
    <li>Elemento 2 sin orden</li>
    <li>Elemento 3 sin orden</li>
</ul>

<ol>
    <li>Elemento 1 ordenado</li>
    <li>Elemento 2 ordenado</li>
    <li>Elemento 3 ordenado</li>
</ol>

Mostrará esto

• Elemento 1 sin orden
• Elemento 2 sin orden
• Elemento 3 sin orden

1. Elemento 1 ordenado
2. Elemento 2 ordenado
3. Elemento 3 ordenado

Las listas se abren y se cierran con unas etiquetas, las «ul» si son desordenadas, y por defecto mostrará una bola delante, y las «ol» si son ordenadas y por defecto pondrá un número delante. Las numeradas se ordenan automáticamente, es decir, el primer elemento tras la etiqueta de apertura irá predecido de un 1, el segundo de un 2 y así sucesivamente.

Para combinaciones de listas, hay que iniciar sublistas con las mismas etiquetas («ul» u «ol»).

También existen las listas de definición, que se inician y cierran con la etiqueta «dl» y dentro van los términos (dt) y definiciones (dd) con esta sintaxis:

<dl>
    <dt>Linux</dt>
        <dd>Sistemas que amamos</dd>
    <dt>Windows</dt>
        <dd>Sistemas que no usamos mucho por aquí</dd>
</dl>

Mostrará esto:

Linux

    Sistemas que amamos

Windows

    Sistemas que no usamos mucho por aquí

Listas de tareas

No hay listas de tareas en HTML, pero se pueden crear. Para conseguirlo habrá que añadir una caja de verificación, y quedaría así:

<ul style="list-style-type:none">
    <li><input id="el1" type="checkbox" /><label for="el1"> Primer elemento</label></li>
    <li><input id="el2" type="checkbox" /><label for="el2"> Segundo elemento</label></li>
    <li><input id="el3" type="checkbox" /><label for="el3"> Tercer elemento</label></li>
</ul>

Mostrará esto:

• Primer elemento
• Segundo elemento
• Tercer elemento

Aquí hemos introducido una regla de CSS para eliminar los discos que aparecen por defecto en las listas. Y lo hemos complicado un poco, pero se puede simplificar. La parte de la etiqueta (label) se puede omitir, pero si se pone como en el ejemplo, el texto también servirá para marcar la casilla al hacerle clic.

Enlaces en HTML

Los enlaces se crean con la etiqueta «a», y tienen esta estructura:

<a href="https://linuxadictos.com/">Tu blog sobre Linux (¿y HTML?)</a>

Mostrará esto:

Tu blog sobre Linux (¿y HTML?)

Tras el atributo «href» va el enlace, y entre las etiquetas de apertura y cierre va el texto.

Los enlaces pueden apuntar a un identificador. Por ejemplo, si a un elemento le añadimos en la etiqueta de apertura id=»prueba», podemos usar el enlace #prueba para que al hacer clic sobre él nos lleve hasta ese elemento, siempre y cuando esté en la misma página. De lo contrario, se pondrán almohadilla e identificador detrás de .html.

Imágenes en HTML

Las imágenes en HTML se añaden en la etiqueta «img» de esta manera:

<img src="nombre_imagen.png" alt="Texto alternativo" />

Ahora bien, si queremos que todo quede en un documento, podemos convertirlas a base64 y añadirlas de esta otra manera

<img src="data:image/png;base64, el-larguísimo-codigo-que-nos-daría>

Si queremos que la imagen nos lleve a otra página web, sólo tenemos que rodearla de una «a» con su «href» correspondiente.

Citas

Hay dos tipos de citas, pero la que más se usa es la de bloque. Combinada con un párrafo de introducción, quedaría así:

<p>Y Pablinux dijo:</p>
<blockquote>Vamos a explicar cómo crear documentos de texto usando HTML y CSS.</blockquote>

Mostrará esto:

Y Pablinux dijo:

Vamos a explicar cómo crear documentos de texto usando HTML y CSS.

Podemos incluir citas en línea con la etiqueta «cite», lo que por defecto suele ponerlo en cursiva. Si el documento es para nosotros, podemos usar también «i» o «em» y obtendremos el mismo efecto. Se recomienda poner ese texto entre comillas.

Si queremos anidar citas, sólo tenemos que poner una «blockquote» dentro de otra.

Código en HTML

El código en HTML se pone entre etiquetas «code», y no tiene mucho más misterio. Suele presentarlo con fuente monoespaciada, y usando sus etiquetas conseguiremos ser correctos semánticamente (esto es un tema de HTML) y también podemos darle a todo el código un formato especial. No va a quedar tan bonito como en algunos editores de Markdown, a no ser que le demos nosotros un formato que aquí no será automático.

Tablas

Como las listas, las tablas también pueden ser un poco complicadas de hacer, pero añadiendo este punto podremos hacer más en nuestros documentos de texto con HTML y CSS. La manera correcta de hacerla tendrá tres partes: «thead», «tbody» y «tfoot» que irán dentro de la etiqueta «table», pero se pueden omitir las tres si las tablas son simples y no necesitamos separar su contenido.

Dentro de las tablas tenemos que crear líneas (tr) con datos (td) y la estructura sería así:

<table>
    <thead>
        <tr>
            <th>Una cabecera</th>
            <th>Otra cabecera</th>
            <th>Tercera cabecera</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Un dato en primera línea</td>
            <td>Otro dato en primera línea</td>
            <td>Tercer dato en primera linea</td>
        </tr>
        <tr>
            <td>Un dato en segunda línea</td>
            <td>Otro dato en segunda línea</td>
            <td>Tercer dato en segunda linea</td>
        </tr>
        <tr>
            <td>Un dato en tercera línea</td>
            <td>Otro dato en tercera línea</td>
            <td>Tercer dato en tercera linea</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Primer resultado</td>
            <td>Segundo resultado</td>
            <td>Tercer resultado</td>
        </tr>
    </tfoot>
</table>

Mostrará esto (el formato no debería aparecer por defecto):

Las tablas se pueden complicar mucho más, y no podemos centrarnos en cómo se hacen u ocuparíamos mucho tiempo y espacio. Sí podemos decir que hay que tener cuidado de que encajen bien y que se puede hacer que una casilla ocupe mas de uno de ancho añadiéndole a su «td» correspondiente el atributo «colspan» seguido del número de casillas que queremos que ocupe (ejemplo, colspan=»2″). Para lo mismo pero en vertical, se usa «rowspan» (ejemplo rowspan=»3″).

Lineas horizontales y saltos de línea

Si queremos hacer una línea horizontal, que vaya de parte a parte del documento, usaremos la etiqueta <hr>, y si queremos hacer un salto de línea <br>.

Dando estilos a nuestro documento con HTML y CSS

Hasta ahora, lo que tenemos no es más que un Markdown pero complicado, ¿no? Todo esto no tendría sentido alguno de no ser porque podemos usar también CSS, y aquí van algunos consejos.

Si queremos que todo esté en un mismo documento, el CSS se tiene que añadir dentro de una etiqueta «style» o dentro de una etiqueta HTML en el atributo del mismo nombre, como por ejemplo hemos usado para evitar que la lista desordenada mostrara el disco por defecto.

CSS nos permite hacer muchísmo, e incluso a varios elementos a la vez. Si queremos que todos los encabezados de tipo 2 (h2) estén centrados y de color rojo, tenemos que añadir en la etiqueta «style» dentro de «head» esto:

h2 {
    text-align:center;
    color:red;
}

Con lo anterior estamos diciendo: «a todas las etiquetas h2 aplícale la regla de texto centrado y el color rojo». Si queremos que sean todos los encabezados, antes de la llave tendríamos que añadir el selector «h1, h2, h3, h4, h5, h6». Todo está a la izquierda por defecto, y también se puede poner a la derecha si usamos «right» en vez de «center».

Otras reglas recomendadas

• background-color: color_elegido;, donde «color_elegido» será un color con una palabra que exista, como «red», o un código RGB o HSL, entre otros. Le da un color de fondo al elemento.
• border-radius: curva_elegida, donde «curva_elegida» será en pixeles o tanto por cien. Le da una curva a las esquinas, y se pueden poner valores independientes para cada una de ellas.
• text-shadow: 1px 2px 2px black;, donde los valores pueden ser otros. Le da una sombra al texto, el primer valor en el eje X, el segundo en el Y, el tercero es el desenfoque y el cuarto el color.
• box-shadow: 1px 2px 2px black;, lo mismo que el punto anterior, pero a toda la caja y no sólo al texto.
• font-size: un_tamaño;, donde «un_tamaño» será un tamaño que puede ser de diferentes unidades, habitualmente en pixeles.
• font-weight: un_grosor;, donde «un_grosor» será el grueso de la fuente. Podemos usar palabras como «bold» o «bolder» o unidades de 100 a 900 si el tipo de fuente las soporta.
• font-family: tipo_de_letra;, donde «tipo_de_letra» será un tipo de letra.
• border: 1px solid blue;, siendo lo primero un grosor, lo segundo un tipo y lo tercero un color que pueden ser diferentes. Esto añadirá un borde al elemento.
• padding y margin nos dan ambos margen alrededor del elemento, pero con una diferencia: padding es parte del elemento en sí, mientras que marging es espacio que ocupa, pero no del elemento. Se pueden poner diferentes tipos de medidas, siendo de lo más habitual los pixeles.
• width y height sirven para indicar ancho y alto de los elementos. Se usan menos en los de tipo texto (para esto está font-size), pero más en los contenedores (que no hemos visto aquí) y en elementos como las imágenes. Se usan distintos tipos de medidas, como los pixeles.
• Más en MDN.

Consejo para imprimir un documento en HTML y CSS

Un problema con el que nos podemos encontrar al crear documentos con HTML y CSS es que los navegadores no imprimen las cosas como nos gustaría. Por ejemplo, nos dividirá elementos como las listas, y esto es algo que probablemente no queramos ver.

Mi consejo es que, al darle a imprimir con el navegador (Ctrl+P en la mayoría de casos), le añadamos márgenes personalizados al menos arriba y abajo. Eso corregirá el fallo de que los textos pueden quedar muy pegados a los bordes superior e inferior (también se puede hacer que no muestre cabecera y pie de página).

Lo de los elementos partidos se soluciona añadiendo esta regla en el apartado del CSS:

@media print{
    body {
        background-color: white;
    }

    ul, ol{
        break-inside: avoid;  /* No corta las listas al imprimir*
    }
}

Lo anterior le dice que, al imprimir, el fondo sea todo blanco y que las listas no las separe en los saltos de página. Se pueden poner otros elementos en el selector, como puede ser «table» si vemos que nos las corta. Creo que está de más poner aquí algunos como los párrafos, ya que esos si está bien que los divida.

Otra cosa que podemos hacer es usar lo siguiente para forzar los saltos de página donde nosotros queramos, válido, por ejemplo, para terminar un capítulo y que lo de después aparezca en la siguiente página (si no funciona, usad page-break-after, lo que dicen que dejará de funcionar en el futuro):

<div style="break-after: always;"></div>

Una opción más

Y esto sería todo. Con HTML y CSS tenemos más control que con Markdown y es más sencillo, desde mi punto de vista, que LaTeX, aunque juegan en ligas distintas. Es una opción más.