HTML y Css Basico para Hacer Epub2 Con Sigil

HTML
y CSS básico para hacer epub2 (con Sigil)
Tabla de contenido
Introduction 0
Lo Primero que has de saber 1
¿Qué es un eBook? 2
Los dos primeros pasos 3
Etiquetar 4
Sigil 5
HTML Básico 6
Más etiquetas HTML 7
La etiqueta <h> 8
Un ejemplo antes de seguir 9
Los enlaces con <a> 10
CSS Básico 11
Cargar CSS en Sigil 12
Reglas CSS 13
Las Clases CSS 14
destino1 15
SolucionQuiz 16
2
HTML y CSS básico para hacer epub2 (con Sigil)
Introducción
LIBRO EN CONSTRUCCIÓN
por favor, si alguien llega hasta aquí, debe saber que este libro está siendo
construido y no está finalizado. Gracias
Este libro ofrece una introducción muy básica al lenguaje HTML y CSS pensado
expresamente para la programación de libros electrónicos (eBooks) en formato epub2.
Para facilitar su comprensión y utilización el libro se apoya en el software Sigil, un programa

para la confección de eBooks en formato epub2.
Si bien es perfectamente posible hacer ebooks con Sigil sin molestarse en trabajar con
HTML y CSS, mi conclusión es que manejar algunos conocimientos básicos de HTML y
CSS facilita y, sobre todo, hace mucho más comprensible el trabajo de creación de eBooks.
El libro ha sido escrito por Diego Ortiz (aka @dieguintosh) coincidiendo en el tiempo con mi
asistencia al Grupo de Trabajo Cocinando EBooks, en Medialab Prado (Madrid) durante el
curso 2014-2015.
El libro se ofrece bajo licencia Creative Commons Reconocimiento 4.0 Internacional.
Introduction 3
Lo primero que has de leer (y saber)

Este Libro Electrónico (aka eBook) está pensado para que aprendas el HTML y el CSS
básico para crear un eBook desde cero, ayudándote por la aplicación Sigil.
Es importante que no tengas ni idea de HTML y de CSS para que este libro te sea de
utilidad, porque lo que vamos a ver es muy muy básico.
Has de saber que hacen falta unos conocimientos básicos de HTML y CSS para programar
eBooks. No le des vueltas. Hace falta.
Y hay muchos manuales para hacer eBooks. Pero en todos los que yo he visto, llegado el
caso, lo que te dicen es justamente eso: “hacen falta unos conocimientos básicos de HTML
y CSS para programar eBooks”. Y ya está, te dicen eso y siguen para adelante. Dan por
hecho que ya lo sabes, o te vienen a decir que te busques la vida en otro sitio para
aprender antes de seguir.
Bien, pues mi intención es centrarme exclusivamente en eso: explicar cuáles son esos
“conocimientos básicos de HTML y CSS para programar eBooks”.
La buena noticia es que hacen falta sólo unos pocos conocimientos, no hace falta saber
todo el HTML y todo el CSS. Con sólo un poco se puede crear un libro electrónico muy
digno. Y si además utilizas Sigil, es todavía más sencillo.
Ahora ya, si quieres, sigue leyendo.
Lo Primero que has de saber 4

2 ¿Qué es un Libro Electrónico (un eBook,

vaya)?
Ya habrás visto que hay variedad de tipologías de libros electrónicos, incluso cierta
confusión respecto a qué es y qué no es un libro electrónico.
Bueno, pues esto es un libro electrónico:
Un documento informático (un archivo digital) que tiene la extensión .epub
Y ya está, no te lies. Mira:
Un Libro Electrónico no es un lector. No es un Kindle o un Tagus. Esos son aparatos

lectores de libros electrónicos (aka eReaders). Con un eReader yo puedo leer eBooks (es
decir, archivos .epub).
Por cierto, un pdf NO es un libro electrónico. Un pdf es un archivo que puede contener texto
y que es leído por multitud de dispositivos, inlcluido muchos eReaders. Pero un pdf NO es
un libro electrónico, su contenido es estático y fijo, no fluye y se recoloca en la pantalla
cuando cambias el tamaño de letra (de hecho, en un pdf tú no cambias el tamaño de letra,
cambias la ampliación del documento entero). Un pdf tiene muchas ventajas, pero no es un
libro electrónico.
Un pdf es un infierno de leer en cualquier pantalla, y más aún en pantallas pequeñas de

eReaders de bolsillo o teléfonos móviles. En cambio el texto de archivo .epub fluirá
armónicamente y se recolocará elegantemente en cualquier dispositivo, permitiendo una
lectura normal, que es básicamente lo único que necesitamos: que nuestro libro se lea
normal.
Un archivo .epub no es el único tipo de archivo posible para hacer libros electrónicos. Tal
vez habrás oído hablar de los archivos .mobi, que son los que leen los eReaders Kindle de
Amazon. Y hay muchos más. Pero los más extendidos, los más compatibles y los que
parece que se están estandarizando son los .epub.
Y sí, también hay varias versiones de .epub.
En este libro yo sólo voy a hablar de la versión 2.0.1, que es la más popular hoy día
(primavera-verano del 2015). Si te compras un eReader ahora mismo, con toda seguridad
leerá archivos .epub de la versión 2.0.1. Los ordenadores, las tabletas o los smartphones
leen archivos ePub 2.0.1. sin problemas.
¿Qué es un eBook? 5
Los dos pasos para hacer un libro

electrónico
Lee atentamente, porque estos son los dos pasos que se requieren para hacer un libro
electrónico en formato ePub:
1.- Depurar el texto de origen.

Has de tener tu texto en un formato de texto amigable, como los .doc de Microsoft Word, o
los .odt de LibreOffice, o un simple archivo .txt creado con el Bloc de Notas. En resumen,
texto sin ningún tipo de estilos o formatos asociados a él.
—¿Y si lo que tengo es un pdf? —Pues estás jodido, porque el texto de un pdf ya lleva
asociado un formato, y extraer el texto sin formato de un pdf puede llegar a ser una
pesadilla. Haz todo lo posible porque tu texto en origen no sea un pdf, por tu bien. En
cualquier otro programa, como Office o LibreOffice los estilos se pueden quitar o trabajar
muy fácilmente.
2.- Programar el Libro Electrónico utilizando un

programa que se llama Sigil.
Sigil es un programa gratis, y lo es porque es Sofware Libre. Es decir, hay miles de
personas ahí afuera programando este software en sus ratos libres, porque sí. Un respeto
para ellas. Te puedes bajar la aplicación Sigil para cualquier sistema operativo y empezar a
trabajar con él cuando quieras.
¿Hay otras opciones que no sean Sigil? Sí, ya lo creo. Hay una opción muy cara, que es
utilizar el programa InDesign de Adobe, una estupenda aplicación profesional de
maquetación y diseño gráfico. Pero es un software caro y no te creas que es tan sencillo de
usar, también lleva tiempo y tiene sus problemas.
La otra opción es usar aplicaciones que te permitan escribir el HTML y el CSS a pelo. No es
muy difícil, pero en esta guía nos parece mejor dejarnos ayudar por el Sigil.
Damos por hecho que ya tienes tu texto, ¿no?. ¿Lo tienes? Pues entonces, a programar.
Los dos primeros pasos 6

4.- La base ideológica: programar es

etiquetar
La base ideológica de los libros electrónicos, y de cualquier documento digital en realidad,
es que todos sus elementos estén etiquetados semánticamente. Es decir, que cada
elemento tenga una identificación –una etiqueta– y que esta etiqueta signifique algo, aporte
una información coherente sobre el elemento y la relación con el resto de elementos del
documento, de modo que cualquier lector (sea un eReader, un navegador, un teléfono
móvil...) sepa cómo lo tiene que mostrar en la pantalla.
Programar un libro electrónico es un proceso en el cual etiquetamos minuciosamente cada

uno de los elemento de un texto, desde el titular hasta los encabezamientos, párrafos,
ladillos, notas al pie, etc. Esta programación puede ser más o menos laboriosa, pero es
imprescindible.
Por tanto, antes de empezar vete a tu texto fuente e identifica sus partes. Te sugerimos que
lo hagas así:
Considera una unidad básica: el PÁRRAFO. Todo el mundo sabe lo que es, dónde empieza
y dónde acaba. A partir de ahí, podemos ir subiendo para identificar la jerarquía del texto.
Pongamos un ejemplo: normalmente, un párrafo está dentro de un CAPÍTULO; y el

Capítulo puede estar dentro de una SECCIÓN; y la Sección puede pertenecer a una
PARTE; y todas las Partes son las que componen el TÍTULO DEL LIBRO. Algo así:
TITULO
PRIMER PARTE
SECCIÓN PRIMERA
CAPÍTULO 1
Párrafo
Párrafo
Párrafo
etc,
Da igual que un escritor divida sus textos en Partes, en Secciones, en Capítulos... lo que
sea. Cada texto tendrá una estructura:
TÍTULO
Etiquetar 7
CAPÍTULO 1
Párrafo
Párrafo
Párrafo
CAPÍTULO 2
Párrafo
etc.
O bien:
TÍTULO
CAPÍTULO 1
Sección a
Párrafo
Párrafo
Párrafo
Sección b
Párrafo
Párrafo
Párrafo
CAPÍTULO 2
Párrafo
Párrafo
Párrafo
Insisto. Da igual cómo llamemos a cada parte. Lo que importa es que sepamos identificar la
jerarquía de tu texto de origen.
Una vez identificada, tenla muy presente, porque cada una de estas partes deberá ser
convenientemente etiquetada en HTML.
Etiquetar 8
5.- Déjate ayudar: usa Sigil

Sigil es un programa para hacer libros electrónicos (o sea, eBooks). Es decir, se utiliza para
generar archivos ePub.
Sigil has de usarlo desde un ordenador normal, es decir, no se puede usar desde una
tableta o un teléfono móvil. Debes bajártelo a tu ordenador e instalarlo para trabajar con él.
Encontrarlo y bajártelo es muy sencillo, a poco que sepas usar Google ;-)
¿Ya lo tienes? Pues entonces seguimos.
Vamos a fijarnos en algún detalle del funcionamiento de Sigil.
NOTA
Hay muchas versiones de Sigil, depende de cuál sea tu ordenador puede que tu versión de
Sigil no sea la misma que la de tu vecino. Este libro está escrito en base a la versión 0.6.2
para MacOS, pero hay versiones más modernas y más antiguas funcionando perfectamente
en otros sistemas operativos.
Si abres el programa y/o creas un archivo Nuevo, totalmente vacío, Sigil comienza
generando un primer archivo HTML.
Este es el aspecto de Sigil
NOTA
Haz "doble tap" sobre la imagen si la quieres ampliar a toda pantalla, si estás usando un
eReader con pantalla táctil, claro ;-):
Sigil 9
Fíjate en la carpeta Text.
Ahí Sigil va a crear los archivos HTML que necesitamos (Sigil realmente utiliza una variedad
de HTML que se llama XHTML, con equis, pero no te preocupes por eso, a efectos
prácticos ese detalle nos va a dar igual. Nosotros para simplificar los vamos a llamar
siempre HTML). Sigil crea un primer archivo HTML en blanco, que como ves se llama
Section0001.xhtml:
Y este archivo aparece con este misterioso contenido:
Sigil 10
Antes de seguir, hagamos un truquito que nos facilitará entender Sigil:
Haz una cosa: ¿ves donde pone <p> </p> ? Borra esa cosa tan rara de y
escribe o pega ahí cualquier texto, por ejemplo éste (o cualquier otro, que más da):
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ahora ese código tendrá este aspecto:
Sigil 11
Las dos Vistas de Sigil.

Hay dos maneras de que Sigil te muestre los archivos HTML:
La Vista de Código
La Vista de Libro
Hasta ahora nosotros estábamos viendo la Vista de Código, donde Sigil te enseña el
código HTML, la programación del archivo, sus tripas, las que normalmente un lector nunca
verá.
En la barra de menús de Sigil, la Vista de Código está activada si está pulsado el icono “<
>” que está a la derecha de estos tres:
Pero ahora, si pinchas en el botón de Vista de Libro, el que aparece a la izquierda de estos
tres:
Sigil 12
Sigil ya no te enseña las tripas HTML del archivo, sino que te enseña cómo queda el texto
tal cual lo verá cualquier lector en su eReader:
Acostúmbrate a ir de una Vista a otra con estos botones, los usarás continuamente en Sigil.
Sigil 13
HTML básico
Hablar de programación informática da mucho miedo a casi todo el mundo.
Pero bah!, no es para tanto. Así que nada de prolegómenos: cuanto antes empecemos,
mejor.
HTML es básicamente una manera de etiquetar los contenidos de una página web. A cada
elemento de la web le ponemos una etiqueta, y así el navegador sabe de qué elemento se
trata y cómo lo debe enseñar en pantalla.
Las etiquetas HTML van siempre de dos en dos, y tienen este aspecto:
<body> </body>
Es decir, toda etiqueta HTML tiene una apertura y un cierre:
Etiqueta de apertura de la etiqueta body: <body>
Etiqueta de cierrre de la etiqueta body: </body>
La diferencia sutil es la barra “ / ” que hay en el cierre. Es sutil pero muy importante. Si se
nos olvida ponerla la etiqueta no se cierra, y al carajo todo.
Nuestro texto irá siempre metido entre etiquetas, y siempre entre una etiqueta de apertura y
una de cierre:
<p> Hola, esto es un párrafo, que va etiquetado con una pe. El párrafo va metido entre la
etiqueta de apertura y la etiqueta de cierre. </p>
Una página web (cualquier página web que vemos en internet) tiene tres etiquetas básicas,
siempre están ahí, y sin ellas no funcionaría la página: son las etiquetas:
<html>
<head> </head>
<body> </body>
</html>

El <head> es el Encabezado. Para nosotros es una de la etiquetas más fáciles, porque

todo lo que se pone dentro del </head> no se ve en la web, son aspectos funcionales de la
programación. No vamos a tocar mucho ahí.
HTML Básico 14
El <body> en cambio sí nos afecta. El <body> es el Cuerpo de mi web/Libro Electrónico.

Entre la etiqueta de apertura <body> y la de cierre </body> nosotros vamos a meter todo
nuestro contenido: textos, fotos, videos, sonidos, animaciones... todo lo se ve en nuestra
web va metido en el <body> .
Además, tanto el <head></head> como el <body></body> van metidos dentro de la

etiqueta <html></html> . Esta es una etiqueta que tampoco se ve en la pantalla,
símplemente le dice al ordenador que eso es una página web escrita en lenguaje HTML, y
que por favor la trate bien y con cariño. Eso sí, es imprescindible, al igual que el <head>
</head> y el <body></body> , si no están no hay web, ni Libro Electrónico ni nada.
Vamos a ver si estas etiquetas básicas están en nuestro archivo Section0001.xhtml de

Sigil. Recuerda, el archivo Section0001.xhtml es un documento HTML que Sigil crea
dentro de su carpeta Text, y al que nosotros le hemos pegado un texto cualquiera
simplemente para que nos sirva de ejemplo:
Ahí están las etiquetas de apertura y cierre <html> </html> , las <head> </head> y las
<body> </body> .
Pero, ¿y el resto de cosas?, por ejempo todo lo que hay al comienzo del archivo antes de la
etiqueta <html> ?:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Pues sí, dentro de un archivo HTML hay cosas complejas que no voy a explicar en este
libro. Todas estas declaraciones son importantes desde el punto de vista tecnológico pero
Sigil se va a encargar de ponerlas por nosotros. Por lo tanto date el gusto de ignorarlas.
HTML Básico 15
Además, rara vez tendrás necesidad de tocarlas.
Nosotros quedémonos con nuestras etiquetas básicas de una página HTML:
<html>
<head> </head>
<body> </body>
</html>

Ahora, vamos a fijarnos en esta otra etiqueta HTML, que también aparece en el ejemplo de
arriba:
<p> </p>
Esta es la etiqueta párrafo. Lo que yo he de poner dentro de esta etiqueta es el texto, y

debo poner tantas etiquetas <p> </p> como párrafos:
<p> Hola, esto es un párrafo. Todo el texto que yo coloque entre estas dos etiquetas es un
párrafo. Nunca debo olvidar poner la etiqueta de apertura y la etiqueta de cierre. Si lo
hago así, todo irá bien.</p>
Haz una prueba. Añade un par de párrafos en nuestra página de Sigil. Es muy sencillo:
1º Sitúate a continuación de la etiqueta de cierre </p> . Puedes escribir a continuación o en

la línea de abajo, da igual.
2º Escribe las etiquetas de párrafo, las dos, tanto la de apertura como las de cierre: <p>
</p>
3º Ahora, dentro de la etiqueta escribe algo, pega un texto... lo que quieras. Así:
<p> Bueno, pues si te empeñas, aquí escribo algo </p>
<p> Y ahora, otro párrafo más, por ejemplo:</p>
<p> Entre un párrafo y otro suele ir un punto y aparte, por lo tanto, cuando yo separo y
etiqueto los párrafos con la etiqueta “pe”, implícitamente estoy poniendo puntos y aparte
como separación entre párrafos. Ahora os lo enseño con un ejemplo. </p>
Activa en Sigil la Vista de Libro. Ahora dejarás de ver las etiquetas del código HTML y
verás solamente el texto que hay dentro de los párrafos. Así:
HTML Básico 16
Bien. Pues aunque no lo creas, ya tenemos prácticamente todo lo necesario para hacer un
sencillo eBook.
Ya sabes programar en HTML.
HTML Básico 17
Más etiquetas HTML

HTML es, evidentemente, mucho más complejo de todo esto. Pero para manejar texto de
una manera simple tampoco hace falta mucho más.
De hecho, para programar un libro electrónico vamos a usar una colección muy limitada de
etiquetas HTML, apenas un puñado con el que vamos a ser capaces de solucionar casi
todos los problemas que nos plantea un eBook. Estas etiquetas son:
<html> </html> → Ya la vimos más arriba, es la que identifica a mi documento como un
documento HTML.
<head> </head> → Entre estas etiquetas va en Encabezado de mi web, información que no
se muestra en pantalla pero que aporta información valiosa al navegador o al eReader.
<title> </title> → Aquí pondremos el Título de la web (si lo tiene, que normalmente sí lo
tiene). Esta etiqueta irá siempre metida dentro del <head> </head> , o sea, que no se
mostrará en pantalla pero aporta información al eReader.
<body> </body> → El Cuerpo de mi web o Libro Electrónico. Dentro de esta etiqueta va
todo el contenido de mi web o mi libro electrónico, como hemos visto más arriba.
<p> </p> → La etiqueta Párrafo. Define un párrafo de texto. Aquí dentro meteremos el
texto. Cada párrafo irá metido dentro de una etiqueta <p> </p> , por lo tanto tendremos
muuuuuchas etiquetas <p> </p> en nuestra programación.
<a> </a> → Usaremos esta etiqueta para los Enlaces (también conocidos como Vínculos,
o Hipervínculos, o como Hyperlinks, o como Links). Cada vez que ves un enlace en una
web (el típico texto de color azul subrayado que te lleva a otro sitio cuando linkas...) pues
ese texto está etiquetado con la etiqueta <a> </a> .
NOTA
Los enlaces son útiles y necesarios para cualquier documento electrónico. Pero son
complejos de manejar al principio. Más adelante hay un Capítulo dedicado exclusivamente
a poner enlaces en los eBooks. Mejor no te lo leas ahora, o déjalo para el final del todo. Es
fácil liarse con los enlaces y agobiarse un poco al principio. Es mejor que hagas tu primer
eBook sin enlaces y más adelante atreverse con vínculos, notas al pie, etc.
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4> , etc → Etiqueta importante para los Libros
Electrónicos. La etiqueta <h> </h> define a los Encabezados en nuestro documento

HTML. Cada vez que tengamos un titular, una sección, un capítulo, una secuencia... irá
etiquetada con una etiqueta <h> .

<div> </div> → Esta etiqueta define una División, o más bien, define cualquier tipo de
espacio en una página web. Dentro de un <div> </div> podemos poner todo tipo de
contenido: imágenes, sonidos, textos... La etiqueta <div> </div> sirve para poner
contenido en una web, de cualquier tipo.
Un detalle interesante
–¿Pero, puedo poner texto dentro de un <div> </div> ?
–Sí, claro que puedes.
–Entonces, ¿cuál es la diferencia entre <p></p> y <div></div> si las dos pueden albergar
el mismo tipo de contenido?
La diferencia es sutil, pero importante. Hemos dicho que HTML sirve para etiquetar los
contenidos de una página web, pero además, sirve para etiquetarlos semánticamente. Es
decir, no sólo debemos etiquetar el contenido para que el navegador sepa dónde está, cuál
es su tamaño, su color, su ordenación dentro del flujo de datos. También, y esto es muy
importante, con las etiquetas HTML debemos decirle al navegador qué tipo de contenido es,
para que sepa distinguir entre un texto y una imagen, para que sepa diferenciar entre un
párrafo y el título de un capítulo, por ejemplo.
Por tanto, las etiquetas deben ser usadas semánticamente. Eso explicará por qué a veces
ponemos <p> y a veces <div> entre muchas otras.
Otras etiquetas, no menos importantes:

<ul> </ul>, <ol> <ol/>, <li> </li> → usaremos estas etiquetas para hacer Listados.
Al igual que con la diferencia entre etiquetas <p></p> y <div></div> , también aquí
deberemos ser finos con el etiquetado. Al fin y al cabo, un listado puede ser considerado
una sucesión de pequeños párrafos, ¿qué nos impide etiquetarlos con la etiqueta <p>
</p> ?. Error. La finura de una buena programación está en ser escrupuloso con estos
detalles, y darle a cada parte el valor semántico que tiene. Un párrafo es un párrafo, y debe
ir con su etiqueta <p></p> , en cambio un listado es un listado (un párrafo sui-géneris, si se
quiere, pero no es exactamente una sucesión de párrafos) y debemos etiquetarlos con las
etiquetas <ul></ul> , <ol><ol/> , <li></li> .
Hay dos tipos de listados porque HTML puede él solo ordenar y numerar listados. Más
adelante verás un ejemplo.
<em> <i> <b> <strong> → Estas etiquetas son muy comunes para dar énfasis a textos. Son
etiquetas que suelen ir dentro de otras etiquetas, y hacen que algunas palabras o frases
aparezcan en cursiva o negrita.

<em> </em> <i> </i> → Una palabra o frase metida dentro de las etiquetas <em>
</em> o <i></i> aparecerá en cursiva (italic).
<strong> </strong> <b> </b> → Una palabra o frase metida dentro de las
etiquetas <strong></strong> o <b></b> aparecerá en negrita (bold).
NOTA
¿Es lo mismo etiquetar con <em> que etiquetar con <i> ? ¿Y qué pasa con <strong> y
<bold> ? ¿Son lo mismo? No, no son lo mismo. El aspecto final del texto sí puede que sea
el mismo si usamos una etiqueta u otra, pero una vez más nos encontramos con que
semánticamente no es lo mismo etiquetar con un <em> para enfatizar (con el resultado de
un texto en cursiva) o etiquetar con un <i> para resaltar el título de una obra, por ejemplo.
El aspecto final es igual o muy parecido, pero la información que le damos al dispositivo
lector / navegador es distinta, y eso puede tener consecuencias y nos ofrece posibilidades.
Todo un mundo por descubrir... pero será en otro eBook.

8.- Un poco más sobre la etiqueta <h>

</h>
¿Por qué hay varias etiquetas <h> : <h1>, <h2>, <h3>, <h4> ?
Porque nuestro texto fuente tenía una jerarquía, ¿recuerdas?. Había un Título, dentro de él
había una o varias Secciones, dentro de la Sección una o varias Partes, dentro de la parte
uno o varios Capítulos, y dentro de los capítulos muchos párrafos, algo así:
TÍTULO
PRIMER PARTE
SECCIÓN PRIMERA
CAPÍTULO 1
Párrafo
Párrafo
etc..
Bien. Pues las etiquetas <h> sirven para identificar esta jerarquía:
TÍTULO → iría etiquetado como <h1> </h1>
PRIMER PARTE → iría etiquetado como <h2> </h2>
SECCIÓN PRIMERA → iría etiquetado como <h3> </h3>
CAPÍTULO 1 → iría etiquetado como <h4> </h4>

Párrafo → los párrafos van etiquetados todos igual como <p> </p>
etc..
¡Quiz!
¿Tienes claro lo de las jerarquías y los encabezados? Vamos a comprobarlo:
¿Qué etiqueta crees que deberías poner en el siguiente ejemplo?
TÍTULO = <h1> </h1>
La etiqueta 21
PRIMER PARTE = <h2> </h2>

SECCIÓN PRIMERA = <h3> </h3>
CAPÍTULO 1 = <h4> </h4>

Párrafo = <p> </p>
SECCIÓN SEGUNDA = ¿ <h3> </h3> ? ¿O por el contrario <h5> </h5> ?
CAPÍTULO 1 = <h4> </h4>
Párrafo = <p> </p>
CAPÍTULO 2 = <h5> </h5> ¿O por el contrario <h4> </h4> ?
Párrafo = <p> </p>
SEGUNDA PARTE = __________________ ¿y aquí, qué pongo?
Pues si lo quieres saber pincha aquí para obtener la respuesta.
La etiqueta 22
Un ejemplo antes de seguir

Con sólo las etiquetas HTML que hemos visto hasta ahora puedo hacer un Libro Electrónico
sencillo pero perfectamente acabado.
Vamos a hacer un ejemplo. Vuelve a tu página de Sigil, activa la Vista de Código. Haz un
ejemplo utilizando todas las etiquetas que hemos visto. Escríbelas y escribe cosas entre
medias, algo así:
<title> Mi Primer Libro Electrónico </title>
¡Ojo!. Esta etiqueta <title> </title> pégala y escríbela dentro del <head> </head> , algo
así:
<head>
<title> Mi Primer Libro Electrónico </title>
</head>

El resto del ejemplo, pégalo dentro del <body></body> , así:
<body>
<h1>Mi Primer Libro Electrónico</h1>

<h2>Esta podría ser la Sección Primera</h2>

<h3>Primer Capítulo</h3>
<p>Aquí aparece un primer párrafo, muy breve.</p>
<p>Ahora pongo un poquito del famoso “Lorem Ipsum”: Lorem ipsum dolor sit am
<h2>Sección Segunda</h2>
<h3>Capítulo 2: Aquí voy a poner una lista de escritores que me gustan:</h3>
<ul>
<li>Cervantes </li>
<li>John Dos Passos </li>
<li>JM Coetzee </li>
<li>Marcel Proust </li>
<li>Victor Hugo </li>
</ul>
<p> Fíjate, <strong> a continuación voy a poner otra lista </strong> , pero
<ol>
<li>El Quijote </li>
<li>Manhattan Transfer </li>
<li>Verano </li>
<li>Los Placeres y los días </li>
<li>Los Miserables </li>
</ol>
<p> Esto podría ser el esquema básico de un Libro electrónico, sin ir más le
</body>

Ahora dale a la Vista de Libro. Debe salir esto:

Los encabezados <h> ... otra vez

Vamos a fijarnos un poco en los Encabezados del ejemplo anterior, o lo que es lo mismo, el
comportamiento de las etiquetas <h1> , <h2> y <h3> :
Hemos usado las etiquetas <h1> , <h2> y <h3> . El resultado ha sido así:

Aquí la etiqueta <h1> se la hemos puesto al Título. En general se la pondremos al

encabezamiento de mayor jerarquía dentro de un libro, que en buena lógica debe ser el
Título. A partir de ahí, cada etiqueta h se usa para un nivel inferior, siguiendo los ejemplos
que vimos arriba ( <h2> son las Secciones, <h3> los Capítulos). Es de sentido común, no
tiene más misterios. Pero es importante hacerlo así para que tu eReader, tu tablet o tu
smartphone sepan cuál es la división jerárquica del texto.
En este ejemplo también puedes ver cómo se comportan las etiquetas <em></em> (para
enfatizar con cursivas) y las <strong></strong> (para enfatizar con negritas)
Y ahora, un poco sobre los listados:

El código HTML del primer listado en el ejemplo tiene este código:

<ul>
<li>Cervantes </li>
<li>John Dos Passos </li>
<li>JM Coetzee </li>
<li>Marcel Proust </li>
<li>Victor Hugo </li>
</ul>

Y este aspecto:
La etiqueta <ul> significa Unordered List (Lista Sin Numerar). HTML se encarga de poner
el símbolo " • " antes de cada línea ( <li> </li> define cada una de las líneas dentro del
listado <ul> </ul> )
La Siguiente lista es muy parecida, pero se trata de una Lista Numerada, o sea Ordered
List, por eso lleva la etiqueta específica <ol> :
<ol>
<li>El Quijote </li>
<li>Manhattan Transfer </li>
<li>Verano </li>
<li>Los Placeres y los días </li>
<li>Los Miserables </li>
</ol>

Y tiene este aspecto:
HTML se encarga de numerar cada una de las lineas <li></li> dentro del listado <ol>
</ol> .

Hagamos enlaces con etiquetas <a>

Lo primero, recuerda este aviso:
AVISO
Los enlaces son útiles y necesarios para cualquier documento electrónico. Pero son
complejos de manejar al principio. Mejor no leas este capítulo ahora. Es fácil liarse con los
enlaces y agobiarse un poco al principio. Mejor haz tu primer eBook sin enlaces y más
adelante, cuando tengas más soltura con el HTML ya te atreverás con ellos.
Si has decidido seguir, refresquemos lo que decíamos más arriba: un enlace es lo mismo
que un vínculo, que hipervínculo y que un link y que un hyperlink. Lo verás escrito de
todas las maneras. Pues es lo mismo.
¿En qué consiste un enlace? Simple: un enlace te lleva de un sitio a otro. Un enlace une
dos puntos entre dos contenidos digitales. Digo contenidos digitales porque un enlace
puede linkar dos puntos en internet (de una web a otra, o de una página a otra dentro de la
de la misma web) pero también puede unir dos puntos que no estén en la web porque estén
dentro de un archivo digital, como ir de una página a otra dentro de un pdf o de un eBook.
Incluso puede unir dos puntos uno de los cuales esté en un eBook y el otro en Internet, de
modo que cuando pinchas el enlace te sales del eBook y entras en Internet. Todo es
posible.
Un enlace tiene un ORIGEN: el lugar desde donde yo pincho.
Y un DESTINO: el lugar a donde me lleva el enlace.
Y a veces, en el DESTINO hay una posibilidad de ir ATRÁS, de modo que puedo volver al
lugar de ORIGEN rápidamente.
Todo esto se gestiona con la etiqueta HTML <a> . Sigil nos va a ayudar a hacer enlaces
dentro de mi Libro Electrónico.
I.- Enlaces hacia fuera del Libro Electrónico.

Abre Sigil. Abre un archivo cualquiera, con un texto cualquiera. Imagínate que vamos a
poner un enlace a la Wikipedia desde un texto cualquiera de mi eBook. Tienes una párrafo
que dice así:
<p>Voy a poner un enlace a la Wikipedia.</p>
Los enlaces con 28

En la Vista de Libro (¿recuerdas?) se vería como un párrafo normal, así:
Bien. Voy a hacer que el enlace esté en la palabra "Wikipedia". Ahí es donde deberé
pinchar. El código sería así:
<p>Voy a poner un enlace a la <a href="http://www.wikipedia.org"> Wikipedia </a></p>
NOTA
Voy a ir poniendo en color rojo las partes de código en las que debemos fijarnos. Si tu
eReader no lee colores no te preocupes, todo se explica también en el texto.
En código del enlace va dentro del párrafo <p> , y es exactamente éste:
<a href="http://www.wikipedia.org"> Wikipedia </a>
La etiqueta HTML para hacer enlaces es <a href=" "> </a> . Su sintaxis completa es un
pelín complicada, así:
<a href=” aquí pongo la url de destino, entre comillas ”> Aquí pongo el texto donde va
en enlace </a>
Como siempre con el HTML, la sintaxis es muy importante, y no se deben olvidar detalles
como las comillas. La dirección url de destino también debe estar perfectamente escrita,
con su http:// ("hache te te pe dos puntos raya raya”). Si lo pones así tu enlace funcionará.
En nuestro ejemplo, la palabra “Wikipedia” aparecerá en color azul y subrayada, que es la
típica manera (aunque no la única) en la que aparecen los links en Internet, así:
Ahora si pincharas en el enlace el dispositivo te sacaría del eBook y abriría un navegador

para entrar a la página web de la Wikipedia en Internet (todo ello, dependiendo de las
posibilidades del eReader que estés utilizando, claro).
Los enlaces con 29

II.- Enlaces dentro del Libro Electrónico.

Un poco más laborioso. Se trata de enlazar desde un lugar dentro del eBook a otro. Dicho
de otro modo, hemos de tener una etiqueta de ORIGEN y otra de DESTINO.
Nuestra etiqueta para hacer enlaces es <a href=" "> </a> . La usaremos para el ORIGEN.
El DESTINO lo etiquetaremos con la etiqueta <a id=" "> </a> . En esta etiqueta
pondremos un Punto de Anclaje (los ingleses lo llaman Anchor Point).
Un ejemplo. Abre tu Sigil y crea dos archivos, uno de ORIGEN y otro de DESTINO.
El archivo de ORIGEN lo llamaremos origen.xhtml, y ahí, en la Vista de Código, puedes

escribir por ejemplo este párrafo:
<p>Voy a poner un enlace a otro lugar del eBook.</p>
El archivo de DESTINO lo llamaremos destino.xhtml, y ahí pondremos este párrafo:
<p>Este es el destino de mi enlace. Ahora quiero volver ATRÁS.</p>
Lo primero que vamos a hacer es crear un Punto de Anclaje en el DESTINO, así:

<p><a id="destino1"></a> Este es el destino de mi enlace. Ahora quiero volver ATRÁS.
</p>
Fíjate. Hemos puesto un fragmento de código HTML cuya única función es ser el DESTINO
(el Punto de Anclaje) de un link:
<a id="destino1"></a>
Nuestro DESTINO se llama destino1 . Se podía haber llamado de cualquier otra manera, el
nombre lo he elegido yo. Para la sintaxis HTML es importante que esta identificación vaya
entre comillas.
Ahora vamos a vincularlo al ORIGEN.
Vete al archivo origen.html. Vamos a poner el enlace en las palabras “otro lugar”:
Los enlaces con 30

<p>Voy a poner un enlace a <a href="../Text/destino.xhtml#destino1"> otro lugar </a> del

eBook.</p>
Aquí la etiqueta de ORIGEN es <a href="../Text/destino.xhtml#destino1"> <a> . Entre las

comillas he puesto la ruta donde está mi DESTINO:
"../Text/destino.xhtml#destino1"
¿Cómo se interpreta esta ruta? Lo que quiere decir es que nuestro DESTINO está en el
archivo destino.xhtml, que Sigil ha creado dentro de la carpeta Text y se llama #destino1 ,
esta vez con un símbolo “ # ” (almohadilla) justo delante.
Ahora mi texto tiene este aspecto:
El eReader sabe que si pincho en el link "otro lugar" debe buscar el Punto de Anclaje que
se llama destino1 que está en el archivo destino.xhtml.
Vamos a ver si funciona. Haz la prueba aquí:
Voy a poner un enlace a otro lugar del eBook.
III. ¿Y si ahora yo quiero volver atrás desde de

mi #destino1 ?
Cuando se hacen enlaces dentro de un eBook puede ser interesante que en el DESTINO
haya un enlace para VOLVER ATRÁS. Así, puedes ir de un lugar a otro sin perderte en la
navegación del libro.
La manera de hacerlo es sencilla, sólo hay que seguir la misma norma de los enlaces:
Una etiqueta <a href=" "> </a> donde estará el ORIGEN del link.
Una etiqueta <a id=" "> </a> donde identificamos el DESTINO.
¿Y-pa-ra-qué-to-do-es-te-fo-llón?
Porque es muy útil para que los libros estén completos.
Los enlaces con 31

Pensemos un caso típico para muchos libros, y es la necesidad de que tengamos Notas al
pie. Con lo que sabemos es sencillo hacer Notas al pie: yo puedo crear un archivo al final
de mi Libro Electrónico (mi archivo destino.xhtml podría haberse llamado notas.xhtml, por
ejemplo) e ir poniendo ahí mis Anotaciones. Puedo etiquetar mis Anotaciones poniéndoles
puntos de anclaje ( #nota1 , #nota2 , #nota3 ... #nota999 , todas las que necesite). Pero
las Anotaciones van a estar lejos de su punto de origen (en otro archivo distinto) con lo cual
necesito una manera de volver atrás desde mis archivo notas.xhtml hasta el mismo punto
en el que yo estaba leyendo. Una manera sencilla, intuitiva y automática. Bien, puedo en
cada Nota poner un enlace para "VOLVER ATRÁS", que me lleve directamente al mismo
lugar de donde vengo. Y así puedo tener un libro con todas las anotaciones que hagan falta.
Como los libros de verdad.
Los enlaces con 32

Y ahora: el CSS
Como ya hemos visto, programar en HTML consiste en etiquetar contenidos: ponerle a cada
parte de la web una Etiqueta HTML.
Ahora vamos a ver cómo se hace para decorar mi página web / libro electrónico: vamos a
ver cómo cambiar de letra, cómo hacer los titulares más grandes o más pequeños, cómo
hacer que los bloques de textos tengan márgenes, cambiar los interlineados, etc. HTML ya
trae de fábrica un aspecto predeterminado, cada etiqueta se muestra de una manera. Pero
la clave del diseño web es que nosotros seamos capaces de alterar el aspecto de una web /
libro electrónico de la manera que más nos guste o más se adapte a las necesidades
específicas del texto que tenemos entre manos.
Para eso contamos con las Reglas CSS.
Una Regla CSS actúa sobre las etiquetas HTML, dotándolas de un comportamiento
determinado.
Una Regla CSS tiene un aspecto así:
p {
font-style: bold;
}
Al igual que HTML, el CSS tiene sus manías: las reglas siempre van escritas entre llaves {
} ; al final de cada atributo tiene que haber un punto y coma ( ; ). Si se nos olvida cerrar
alguna llave, o si no ponemos algún punto y coma al final de la línea, toda la programación
se va, una vez más, al carajo.
¿Qué significa esta Regla CSS?:
p {
font-style: bold;
}
Fácil: si uso esta regla, todos los párrafos marcados con una <p> (o sea, casi todo mi
texto), va a tener un estilo de letra Negrita (bold).
¿Y esta otra regla?:
CSS Básico 33
h1 {
font-style: italic;
}
También es muy sencilla. Significa que todos los textos (encabezados) marcados con <h1>
serán puestos en Cursiva (Italic)
¿Y ésta?
h2 {
font-style: bold;
margin-top: 0em;
margin-bottom:0em;
text-indent: 2em;
}
Parece un poco más compleja, pero en el fondo es igual, lo que ocurre es que en la misma
regla hay varios atributos (en este ejemplo cada atributo ocupa un renglón). Por eso es
importante que al final de cada atributo se ponga un punto y coma, para que el HTML sepa
cómo interpretar la regla completa.
¿Qué significa esta regla? Te lo explico:

font-style: bold;
Esto significa que los textos etiquetados como <h2> tendrán un estilo de letra negrita
(bold).
margin-top: 0em;
margin-bottom:0em;
Esto significa que los textos etiquetados como <h2> no tendrán margen (espacio vacío) ni
por arriba ( margin-top: 0em ) ni por abajo ( margin-bottom: 0em ). Es decir, la línea
inmediatamente anterior al <h2> y la inmediatamente posterior irán pegadas como si
fueran líneas de texto normal, sin añadir el típico espacio en blanco que suele tener
asociado un encabezamiento.
text-indent: 2em;
Esto significa que los textos etiquetados como <h2> tienen una sangría a la izquierda, es
decir, los encabezamientos etiquetados como <h2> (en nuestro ejemplo son las
Secciones), comenzarán con un espacio de sangrado a la izquierda, no empezarán
alineados a la izquierda como los demás renglones.
CSS Básico 34
¿Y qué es eso de los “ 0em ” ó “ 2em ”?
Son unidades de medida. Pero no vayamos tan rápido. Primero, vamos a ver cómo se
meten las reglas CSS en Sigil y veremos cómo funcionan.
CSS Básico 35
Cargar el CSS en el Sigil

Las reglas CSS sirven para actuar sobre las etiquetas HTML. Siguiendo un ejemplo simple,
una regla CSS que actúe sobre los párrafos <p> hace que TODOS los párrafos <p> se
vean modificados en mi eBook. Por eso es importante y útil el CSS, porque con unas pocas
reglas podemos dar formato a documentos HTML muy extensos.
Pero para eso tenemos que vincular las reglas CSS con los documentos HTML. Sigil nos
va a ayudar:
Sigil tiene una carpeta específica para guardar los estilos CSS. Estos estilos se almacenan
en un archivo propio, con el sufijo .css.
En la columna izquierda de Sigil, justo debajo que nuestra carpeta Text, hay una carpeta
que se llama Styles:
Si pinchas en esa carpeta con el botón derecho, podrás crear un archivo nuevo dentro de
esa carpeta Styles. Dile “Añadir una hoja de estilos en blanco”:
Ahora el archivo de la hoja de estilos aparecerá dentro de la carpeta Styles. Se llama

Style0001.css. Las hojas de estilo CSS se almacenan en archivos propios que tiene ese
sufijo .css. Si haces doble click para abrir el archivo Style0001.css, aparecerá totalmente
vacío. Ahí es donde hemos de escribir nuestras reglas CSS.

Pero antes de nada, hemos de vincular este archivo CSS a nuestros archivos HTML. De
momento sólo tenemos un archivo HTML, pero lo normal es que tengamos muchos, a veces
docenas de archivos HTML por cada libro electrónico, y a todos ellos tenemos que
vincularlos a nuestro archivo CSS. Eso se hace escribiendo una línea de código en el
<head> de los archivos HTML. Así:
1.- Vete (o ábrelo) el archivo Section0001.xtml. Activa la Vista de Código para ver el
código HTML.
2.- Pega tal cual esta línea de código dentro del head:
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
Ten cuidado de no pegarlo dentro de alguna otra etiqueta. Si quieres estar seguro, escríbelo
justo antes de la etiqueta de cierre </head> , por ejemplo.
Esta línea le dice al archivo HTML Section0001.xhtml que a partir de ahora y para siempre
está vinculado a un archivo de tipo CSS que se llama Style0001.css. Si lo haces así, todo
funcionará a la perfección.
Sólo recordar lo obvio: si tú varías una regla CSS en tu archivo Style0001.css, todos los
archivos HTML vinculados a él se verán afectados. Imagina un libro con 20 capítulos.
Imagina además que cada capítulo es un archivo HTML separado (suele hacerse así, de
hecho). Todos los Capítulos de mi libro comienzan con un Título que está etiquetado con
<h2> , por ejemplo, algo así:
Capítulo Primero
Que trata de la condición y ejercicio del famoso hidalgo don Quijote de la Mancha
Si yo tengo una regla CSS que actúa sobre los <h2> , por ejemplo esta:
h2 {
text-style: uppercase;
}
La regla text-style: uppercase hace que el texto se convierta en mayúscula, con lo cual
todos los nombres de los Capítulos se verán afectados, todos los que estén en cualquier
archivo HTML de mi libro etiquetados como <h2> se verán en mayúsculas.
Y si yo rectifico, y cambio la regla CSS, poniendo lowercase (minúscula), en lugar de

uppercase (mayúscula):

h2 {
text-style: lowercase;
}
automáticamente todos los nombres de los Capítulos que estén etiquetados como <h2>
se rediseñarán poniéndose en minúscula:
Capítulo Primero
Que trata de la condición y ejercicio del famoso hidalgo don Quijote de la Mancha
Como es obvio, este sistema permite ajustar el diseño de docenas de archivos y etiquetas
HTML de una vez, sin necesidad de ir reajustando etiqueta por etiqueta.
Esa es la ventaja y el poderío del CSS.

Cuántas reglas CSS hay y para qué sirve

cada una
Hay muchas reglas CSS. Pero no todas son aptas para programar eBooks. Tampoco son
necesarias todas, sólo unas cuantas. Una Hoja de Estilos puede llegar a tener muchas
reglas, con un aspecto parecido a éste:
Pero no es necesario en absoluto sabérselas de memoria, internet está plagado de

información en todos los idiomas sobre reglas CSS.
Lo que te pongo a continuación es una lista de algunas de las reglas CSS más comunmente
utilizadas para programar eBooks en su versión 2.0.1, con sus valores más comunes.
NOTA
Esta es una lista deliberadamente simplificada. Hemos puesto apenas unos atributos y unos
valores que nos serán útiles para hacer eBooks, pero hay muchos más. En Internet
encontrarás muchísima información al respecto. Y no te agobies. Ni siquiera los
Reglas CSS 39
programadores expertos tienen toda la lista de atributos CSS en la cabeza, lo normal es

consultarla y aprenderla a medida que las vayas necesitando.
NOTA 2
Tampoco es imprescindible que en tu libro electrónico estén TODAS las reglas CSS que
anotamos aquí. Muchas de ellas tienen valores por defecto, lo cual significa que si no pones
nada, HTML elige una serie de valores predeterminados y ya está.
1.- Reglas CSS que afectan a las familias

tipográficas
• font-family
Sirve para elegir el tipo de letra o la familia tipográfica con la que se mostrará el texto.
Un ejemplo:
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Con esta regla, los párrafos marcados con <p> aparecerán con una tipografía "Helvética
Neue", por ejemplo así:
Este párrafo debe aparecer en "Helvética", y si esta tipografía no está cargada en el

dispositivo, aparecerá con Arial, y si tampoco hay Arial el dispositivo elegirá una tipografía
cualquiera sans-serif.
En cambio, si uso esta regla:
p {
font-family: courier, monospace;
}
Pues el párrafo aparecerá en courier.
• font-style
Con esta regla elegimos el estilo de la fuente, básicamente si quieres que aparezca la letra
redonda (normal) o cursiva.
Reglas CSS 40
Puedes elegir tres valores para esta regla: normal; italic; oblique. Si esta regla no está en el
CSS, la fuente sale normal por defecto.
Ejemplo:
p {
font-style: italic;
}
Con esta regla el texto se verá cursiva.
• font-variant
Una regla con la que puedes crear versalitas, es decir, letras mayúsculas que mantienen el
tamaño de letras minúsculas. Especialmente útil para encabezados, capítulos, etc.
Ejemplo:
p {
font-variant: small-caps;
}
En este ejemplo, este Párrafo tendrá las Mayúsculas a su tamaño normal, pero las
Minúsculas se convertirán en Versalitas.
• font-weight
Con esta regla podemos elegir el grosor de la letra, es decir, la negrita. Hay varios valores
posibles para distintos grosores de negrita, es más común es "bold".
En el ejemplo:
h2 {
font-weight: bold;
}
Esta regla CSS hace que los encabezados <h2> estén en negrita, tal como lo ves
aquí.
• font-size
Reglas CSS 41
Con el atributo CSS font-size elegimos el tamaño del texto.
Hay varias maneras de elegir el tamaño del texto, bien usando valores absolutos o bien
valores relativos.
Normalmente en los eBooks usamos valores relativos, de modo que si aumentamos o

reducimos el tamaño del texto, todos los textos de mi eBook deben aumentar o reducir
proporcionalmente.
Para esto lo mejor es usar valores em.
Los sistemas tipográficos-informáticos han elegido un tamaño de letra "normal". Bien, ese
tamaño de letra es 12 puntos. Normalmente un texto es enseñado a 12 puntos si no se le
dice lo contrario.
12 puntos equivale a 1em.
A partir de aquí, podemos hacer cálculos fácilmente. Mira esta regla CSS:
h1 {
font-size:1.75em
}
Esta regla dice que los textos etiquetados con

<h1> aparecerán 1,75 veces más grande que el
texto normal, como en este ejemplo.
Más ejemplos ilustrativos:
Esta es una frase a 1em (o sea, el tamaño normal)

Esta es una frase a 1.5 em.
Esta es una frase a 2 em.
5em !!.
NOTA
Fíjate que en los decimales hemos usado puntos, no comas. Esto es importante para CSS,
los decimales van con puntos, no con comas. Recuerda que tanto CSS como HTML son
muy estrictos en cómo han de ser escritas las reglas, cualquier descuido con puntos,
comas, comillas o cierres < / > puede echar a perder el trabajo.
Reglas CSS 42
2.- Atributos para trabajar con el color y los

fondos
Recuerda que si vas a programar un eBook, es probable que sea leído por eReaders que
tengan pantallas en blanco y negro (los Kindle de Amazon o los Tagus de la Casa del Libro
tienen pantallas en blanco y negro). Tenlo en cuenta para no perder el tiempo coloreando
tus eBooks, tal vez nadie lo va a apreciar ;-)
• color
Con el atributo color puedes elegir el color de tu tipografía.
Manejar el color con CSS puede ser un poco complejo, porque los valores de color se
pueden (y a veces se deben) anotar en un sistema hexadecimal:
#000000 es negro (black) en notación hexadecimal.
#ffffff es blanco (white) en notación hexadecimal.
Aunque también podrías ponerlo así:
h2 {
color: red;
}
Según esta regla, los encabezados <h2> aparecerían en color rojo, aunque puede que tu
lector no lo reconozca, porque hay lectores que sólo entienden notación hexadecimal :-(
En ese caso deberías ponerlo así:
h2 {
color:#ff0000;
}
#ff0000 significa "rojo" en notación hexadecimal.
Nuestra recomendación: olvídate de los colores de momento. Si no pones nada, HTML

elegirá automáticamente el color negro para los textos, que es lo que nos interesa para
hacer eBooks normales. Hazlo así y deja los colores para más adelante.
• background-color
Reglas CSS 43
Esta regla es para colorear fondos. Por lo tanto, se aplican todas las recomendaciones del
apartado anterior: olvídate de colorear fondos de momento.
Sólo en el caso de que seas muy intrépido, fíjate en este detalle. Como te dijimos más
arriba:
#000000 es negro (black) en notación hexadecimal.
#ffffff es blanco (white) en notación hexadecimal.
Entre el blanco y el negro hay muchos tonos de grises, cuya notación hexadecimal podría
ser algo así:
#333333 esto es un gris muy oscuro, casi negro.
#666666 esto es un gris oscuro, como al 60% aproximadamente.
#999999 esto es un gris claro, como al 40% aproximadamente.
#cccccc esto es un gris claro, como al 20% más o menos.
Haz una prueba, pon una regla CSS así en tu eBook:
p {
background-color: #cccccc;
}
Y a ver qué pasa...
3 Propiedades que afectan a los textos,

palabras, letras, interlineados, etc:
• word-spacing
Para afinar la separación entre palabras. Recuerda que si no pones nada la separación
entre palabras la elegirá por defecto HTML.
Puedes usar los valores em para ajustar a tu gusto la separación entre palabras para que tu
texto gane en legibilidad o para resaltar párrafos o encabezados.
Un ejemplo:
p, h2 {
word-spacing: 1.4em;
}
Reglas CSS 44
En este ejemplo, los encabezados <p> y

<h2> quedarían tal como lo ves aquí, con una
separación entre palabras 1.4 veces mayor que la
normal.
• letter-spacing
Para ajustar la separación entre letras. Con este código:
p, h2 {
letter-spacing: 1.4em;
}
E s t e s e r í a e l
r e s u l t a d o .
• text-decoration
Puede interesarte resaltar el texto de varias maneras: subrayándolo (underline), tachándolo
(line-through), etc.
O puede que te interese lo contrario. HTML te muestra los enlaces en color azul y con un
subrayado, de modo que todo el mundo sabe que cuando ve un texto azul y subrayado
puede pinchar ahí para ir a otro lugar.
Pero por cuestiones de diseño puede que ese subrayado sea estéticamente muy feo, por lo
que tal vez decidas quitarlo. Prueba esto:
h3 {
text-decoration: underline;
}
a {
text-decoration: none;
}
Si usas esta regla, los encabezados <h3> aparecerán subrayados, así:
Encabezado subrayado.
Reglas CSS 45
En cambio, los enlaces que pongas en tu web o libro electrónico NO aparecerán

subrayados, aparecerán normales, siguen siendo un hipervínculo, pero sin subrayado.
Los valores posibles para text-decoration son: none; underline; overline; line-through; blink.
Pruébalos, ya verás cómo puedes conseguir cosas como ésta (con el valor line-through o
como ésta otra (con el valor overline).
• text-transform
Con esta regla puedes hacer que tu texto se ponga todo en mayúsculas, o minúsculas, o
con una mayúscula al principio de cada palabra. En la regla CSS se puede elegir entre los
valores uppercase, lowercase, capitalize o none:
h1 {
text-transform: uppercase;
}
uppercase: PONE EN MAYÚSCULAS TODO EL TEXTO.

capitalize: Pone En Mayúsculas La Primera Letra De Cada Palabra.
lowercase: pone en minúsculas todo el texto (esté como esté en el original).
Etc.
• text-align
Con este atributo puedes alinear el texto a izquierda, derecha, centro o justificarlo. Los
valores son left (texto alineado a la izquierda); right (texto alineado a la derecha); center
(texto centrado), justify (texto justificado).
En este ejemplo los encabezados <h1> aparecerán pegados al borde derecho del
eReader:
h1 {
text-align: right;
}
A la derecha ( right )
Aquí hay más ejemplos, centrado y ajustado a la izquierda:
Centrado ( center )
A la izquierda ( left )
Reglas CSS 46
• text-indent
Con esta regla puedes sangrar párrafos, es decir, que la primera línea no quede pegada
totalmente el el borde de la página.
En la programación de eBooks lo ideal es usar valores relativos em, como vimos arriba.
Ejemplo:
p {
text-indent: 5em;
}
En este ejemplo, como puedes ver, la primera línea de este párrafo <p>
quedaría sangrada en una distancia 5 veces por el valor del texto normal.
• line-height
Con este atributo podemos variar el interlineado, usando valores em como en los ejemplos
anteriores.
Ejemplo:
p {
line-height: 2em;
}
En este párrafo estamos aumentando el espacio interlineado 2 veces más que el
espacio normal determinado por el dispositivo que estemos usando.
Propiedades de las cajas

¿Por qué las "cajas"?
Las etiquetas HTML (muchas de ellas) definen un espacio cuadrangular en la pantalla: una
caja. Es decir, un párrafo <p> además de ser un contenedor de texto, también define un
espacio: una caja de texto con un límite superior, inferior, derecho e izquierdo, con un borde
y con unos márgenes dentro/fuera que nosotros podemos ajustar con los valores CSS.
Reglas CSS 47
Por tanto, hay reglas que nos ayudan a delimitar la geometría de estas cajas, y su
comportamiento visual. Estas cajas (lo que en CSS se llama Box Model) tienen esta
estructura:
LOS BORDES
Las cajas delimitadas por las etiquetas HTML tienen un borde que normalmente no se ve
porque por defecto no es representado en pantalla. Pero hay reglas CSS que me permiten
dibujar ese borde y que sea explícitamente visible en pantalla.
• border-style
Con este valor, asignamos un tipo de borde a la caja: una fina línea contínua, o una línea
gruesa, o doble, o punteada, etc.
Los valores que puede tener este atributo son: none; dotted; dashed; solid; double; groove;
ridge; inset; outset
Ejemplo
h1 {
border-style: solid;
Con esta regla CSS, los encabezados <h1> aparecerán bordeados con una línea contínua:
Encabezado con borde contínuo ( solid )
Reglas CSS 48
Pero podría ser de otra manera:
Encabezado con borde puntuado ( dotted )

O de otra:
Encabezado con borde de rayas ( dashed )

Etc.
• border-color
El color con el que se mostrará el borde. Se le aplican todos los condicionantes y ejemplos
sobre los colores que hemos visto más arriba.
• border-top / border-bottom / border-left / border-right

Aquí podemos definir el grosor de cada uno de los cuatro bordes de la caja por separado.
En el caso de los bordes sí es interesante utilizar unidades de medida absoluta, como los
pixels, por ejemplo:
p {
border-top: 2px;
border-bottom: 1px;
border-style:solid;
border-color:#000000:
Caja con borde de 2 pixels arriba

Como ves en este ejemplo, la caja que contiene el texto está limitada por arriba por un
borde de 2 pixels de grosor, y por abajo por un borde de 1 pixel, ambos de color negro
( border-color:#000000 ) y con el atributo border-style:solid , para que sean bordes
definidos por una línea contínua.
LOS MÁRGENES
• margin
Reglas CSS 49
El atributo margin nos ayuda a definir el margen exterior (¡importante!), el margen que
queda fuera de la caja de texto definida por la etiqueta HTML.
• margin-top / margin-bottom / margin-right / margin-left

Con cada una de estas reglas definimos el margen específico en cada uno de los cuatro
lados de la caja.
En la programación de eBooks es interesante usar valores em para definir los márgenes.
Ejemplo:
p {
margin-top: 1em;
margin-bottom: 1em;
margin-right : 1em;
margin-left: 7em;
}
En este ejemplo este párrafo <p> tiene un margen a la izquierda de 7em,

y por eso hay un hueco de tamaño 7em entre el párrafo y el borde
izquierdo del lector. También hay márgenes arriba, abajo y a la derecha
de 1em.
• Padding
Conviene no confundir margin con padding. Mientras que margin es el margen que se
sitúa por fuera de la caja de texto (por fuera del borde, en el caso de que pudiéramos ver el
borde), el padding es el espacio que queda por dentro del borde de la caja de texto.
padding-top / padding-right / padding-bottom / padding-left

El atributo padding se comporta igual que margin, por lo tanto los ejemplos arriba citados se
pueden aplicar aquí.
Ejemplo:
Reglas CSS 50
p {
border-top: 1px;
border-bottom: 1px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
padding-top: 0.5em;
padding-bottom: 3em;
padding-left: 2em;
}
En este ejemplo le hemos puesto un borde fino a la caja de textos definida por la etiqueta
<p> , de modo que sea más evidente el comportamiento del espacio interior padding en
comparación del espacio exterior margin. Su representación gráfica sería más o menos así:
Esto es una caja de texto con padding 0.5em arriba, 3em abajo y 2em
a la izquierda.
Esto en cambio es una caja de texto SIN padding. Por eso el texto está
pegado al borde.
Pues ya está, ya sabes trabajar con CSS.
Reglas CSS 51
Lo más del CSS: las clases

CSS tiene una cosa que se llama Clases. Fíjate en este código HTML:
<p> Esto es un párrafo cualquiera </p>
y en esta regla CSS que nosotros hemos escrito en el archivo CSS:
p {
font-style: bold;
}
Este es muy sencillo: esta regla CSS hace que mis párrafos etiquetados con <p> tengan
un estilo de letra Negrita.
Bien. Pues las Clases nos permiten ser mucho más específicos, porque nos van a permitir
identificar individualmenete a etiquetas o grupos de etiquetas HTML.
Fíjate ahora en esta línea de código:

<p class=”negrita”> Esto es un párrafo cualquiera, pero tiene la Clase “negrita”. </p>
Nuestro párrafo ahora tiene una Clase, pertenece a la clase “negrita”. Ahora tengo dos
clases de párrafos, los que están etiquetados con una simple <p> o los que están
etiquetados con una Clase, que en este caso es la clase a la que hemos llamado “negrita”.
IMPORTANTE
Los nombres de las Clases CSS te los inventas tú. La clase de este ejemplo se llama
“negrita” porque yo he querido llamarla así. La podría haber llamado “merienda-cena” o bien
“elefante”. Lo que sea, cada programador le da a las clases el nombre que cree más
conveniente.
Ahora fíjate cómo escribimos el CSS:
.negrita {
font-style: bold;
}
p {
font-style: italic;
}
Las Clases CSS 52

Fíjate en el punto que hay delante de “negrita”. Eso significa que esa regla CSS solamente
afecta a las etiquetas HTML etiquetadas con la Clase “negrita”.
El punto en CSS se refiere a eso, a las clases. Es muy importante que no se te olvide si
usas clases.
¿Qué significa esto entonces? Significa que ya no todos los párrafos <p> se comportarán
igual. Los párrafos etiquetados simplemente con etiqueta HTML <p> , y que no
pertenezcan a ninguna clase aparecerán en cursiva (italic). En cambio, los párrafos HTML
que estén etiquetados con la clase “.negrita” aparecerán en negrita (bold).
La cosa se puede complicar aún más. Fíjate en estas líneas HTML:
<h1 class=”negrita”> Encabezamiento con clase </h1>
<p class=”negrita”> Esto sigue siendo un párrafo cualquiera, pero tiene la Clase
“negrita”. </p>
¡¡Hemos etiquetado con la misma Clase CSS dos etiquetas HTML distintas!! ¿Y ahora qué?
Pues siguiendo con la lógica del CSS, tanto el <h1 class=”negrita”> como el <p
class=”negrita”> se verán afectados por la regla CSS “.negrita”:
.negrita {
font-style: bold;
}
y ambos aparecerán en estilo negrita.
¿Y para qué complicarlo tanto?

Pues porque la vida es así de complicada. En un libro habrá cientos de párrafos, pero no
todos serán iguales. Algunos serán citas, que tal vez deban ir en cursiva; otros serán
párrafos de versos, que tal vez deberían llevar un sangrado específico. Habrá párrafos
dentro de diálogos, o en varios idiomas... Multitud de casos. Para cada ocasión lo que
deberemos hacer es localizar y etiquetar minuciosamente cada uno de esos párrafos o
grupos de párrafos, agruparlos y etiquetarlos con una clase específica, y aplicarle a cada
clase el diseño adecuado con la Hoja de Estilos CSS.
Y TODAVÍA MÁS COMPLICADO
CSS no tiene sólamente Clases, existen además los Identificadores. Si revisas Hojas de
Estilo de páginas web o eBooks verás algunas reglas CSS marcadas con una almohadilla #.
Son los Identificadores (ID) con un comportamiento parecido a las Clases y permiten
combinaciones de estilos más precisas.
Las Clases CSS 53

Así, ni más ni menos, se programan los eBook con HTML y CSS y la ayuda de Sigil. ¡No era
tan difícil!
Las Clases CSS 54

Archivo "destino.xhtml"
Hola, estás en el archivo destino.xhtml. Si estás aquí es porque has pinchado un enlace
en el capítulo Hagamos enlaces con etiquetas <a>, concretamente en la Sección II:
Enlaces dentro del libro electrónico. En este archivo destino.xhtml es donde habíamos
puesto el DESTINO que habíamos identificado como #destino1 .
Ahora puedes pichar para VOLVER ATRÁS y llegar al mismo punto desde donde venías.
Así funcionan los enlaces dentro de un eBook.
NOTA
También es posible que hayas llegado aquí simplemente pasando las hojas del eBook,
sencillamente porque el archivo "destino.xhtml" es un archivo que yo he creado y
colocado al final del libro (ayudándome de Sigil). Algo así como las páginas de Notas que
en muchos libros son colocadas en las páginas finales, después de los contenidos del libro.
destino1 55
Solución al Quiz
Seguro que lo habías adivinado. La norma es que si la PRIMERA PARTE, por ejemplo, está
etiquetada como <h2></h2> , es porque todas las PARTES del libro tienen la jeraquía <h2>
</h2> . Por tanto la SEGUNDA PARTE también va etiquetada como <h2></h2> , así como la
TERCERA PARTE, CUARTA PARTE, etc, etc
Igualmente, si la SECCIÓN PRIMERA está etiquetada como <h3></h3> , es porque TODAS

las secciones se ordenan bajo la jerarquía de <h3></h3> . Así, la SECCIÓN SEGUNDA
estaría etiquetada como <h3></h3> , la SECCIÓN TERCERA también como <h3></h3> ,
etc.
Y lo mismo con los CAPÍTULOS. Todos, en este ejemplo, han de ir etiquetados como <h4>
</h4> . El etiquetado correcto sería éste:
TÍTULO = <h1></h1>
PRIMER PARTE = <h2></h2>
SECCIÓN PRIMERA = <h3></h3>
CAPÍTULO 1 = <h4></h4>
Párrafo = <p></p>
SECCIÓN SEGUNDA = <h3></h3>
Párrafo = <p></p>
Párrafo = <p></p>
SEGUNDA PARTE = <h2></h2>
[Pincha aquí para volver al Capítulo 8.]
SolucionQuiz 56

HTML y Css Basico para Hacer Epub2 Con Sigil

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML y Css Basico para Hacer Epub2 Con Sigil

Загружено:

Авторское право:

Доступные форматы

HTML

y CSS básico para hacer epub2 (con Sigil)

Para facilitar su comprensión y utilización el libro se apoya en el software Sigil, un programa

El libro se ofrece bajo licencia Creative Commons Reconocimiento 4.0 Internacional.

Lo primero que has de leer (y saber)

Ahora ya, si quieres, sigue leyendo.

Lo Primero que has de saber 4

2 ¿Qué es un Libro Electrónico (un eBook,

Bueno, pues esto es un libro electrónico:

Un documento informático (un archivo digital) que tiene la extensión .epub

Y ya está, no te lies. Mira:

Un Libro Electrónico no es un lector. No es un Kindle o un Tagus. Esos son aparatos

Un pdf es un infierno de leer en cualquier pantalla, y más aún en pantallas pequeñas de

Y sí, también hay varias versiones de .epub.

Los dos pasos para hacer un libro

1.- Depurar el texto de origen.

2.- Programar el Libro Electrónico utilizando un

Los dos primeros pasos 6

4.- La base ideológica: programar es

Programar un libro electrónico es un proceso en el cual etiquetamos minuciosamente cada

Pongamos un ejemplo: normalmente, un párrafo está dentro de un CAPÍTULO; y el

5.- Déjate ayudar: usa Sigil

¿Ya lo tienes? Pues entonces seguimos.

Vamos a fijarnos en algún detalle del funcionamiento de Sigil.

Este es el aspecto de Sigil

Fíjate en la carpeta Text.

Y este archivo aparece con este misterioso contenido:

Antes de seguir, hagamos un truquito que nos facilitará entender Sigil:

Ahora ese código tendrá este aspecto:

Las dos Vistas de Sigil.

Es decir, toda etiqueta HTML tiene una apertura y un cierre:

Etiqueta de apertura de la etiqueta body: <body>

Etiqueta de cierrre de la etiqueta body: </body>

El <head> es el Encabezado. Para nosotros es una de la etiquetas más fáciles, porque

El <body> en cambio sí nos afecta. El <body> es el Cuerpo de mi web/Libro Electrónico.

Además, tanto el <head></head> como el <body></body> van metidos dentro de la

Vamos a ver si estas etiquetas básicas están en nuestro archivo Section0001.xhtml de

<?xml version="1.0" encoding="utf-8"?>

Además, rara vez tendrás necesidad de tocarlas.

Nosotros quedémonos con nuestras etiquetas básicas de una página HTML:

Esta es la etiqueta párrafo. Lo que yo he de poner dentro de esta etiqueta es el texto, y

1º Sitúate a continuación de la etiqueta de cierre </p> . Puedes escribir a continuación o en

<p> Y ahora, otro párrafo más, por ejemplo:</p>

Ya sabes programar en HTML.

Más etiquetas HTML

<html> </html> → Ya la vimos más arriba, es la que identifica a mi documento como un

<head> </head> → Entre estas etiquetas va en Encabezado de mi web, información que no

se muestra en pantalla pero que aporta información valiosa al navegador o al eReader.

<body> </body> → El Cuerpo de mi web o Libro Electrónico. Dentro de esta etiqueta va

Electrónicos. La etiqueta <h> </h> define a los Encabezados en nuestro documento

Más etiquetas HTML 18

–Sí, claro que puedes.

Otras etiquetas, no menos importantes:

Más etiquetas HTML 19

</em> o <i></i> aparecerá en cursiva (italic).

etiquetas <strong></strong> o <b></b> aparecerá en negrita (bold).

Más etiquetas HTML 20

8.- Un poco más sobre la etiqueta <h>

TÍTULO → iría etiquetado como <h1> </h1>

PRIMER PARTE → iría etiquetado como <h2> </h2>

SECCIÓN PRIMERA → iría etiquetado como <h3> </h3>

CAPÍTULO 1 → iría etiquetado como <h4> </h4>

¿Qué etiqueta crees que deberías poner en el siguiente ejemplo?