Título de la obra

Nombre de autor(es)
Organización o institución a la que pertenece

Fondo Editorial RED Descartes

Córdoba (España)
2022

Título de la obra:
Mi libro

Autores:
AUTORES

Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono

DATOS DE LA EDICIÓN

Esta obra está bajo una licencia Creative Commons 4.0 internacional: Reconocimiento-No Comercial-Compartir Igual.

Tabla de contenido

Prefacio

Este es un ejemplo sin contenido para comenzar la creación de un libro interactivo.

HTML y CSS

Usando encabezados, párrafos, saltos de línea y estilos en etiqueta

En este primer apartado vamos a practicar etiquetas HTML y estilos, diseñando un poema.

Arde en tus ojos

Antonio Machado

Arde en tus ojos un misterio, virgen
esquiva y compañera.
No sé si es odio o es amor la lumbre
inagotable de tu aliaba negra.

Conmigo irás mientras proyecte sombra
mi cuerpo y quede a mi sandalia arena.
-¿Eres la sed o el agua en mi camino?-
Dime, virgen esquiva y compañera.

Hemos usado etiquetas HTML para encabezados, párrafos, negrilla y salto de línea. También, usamos estilos en etiquetas para cambio de color, negrilla, alineación y tamaño del texto.

Tarea 1. Terminada la sesión, debes diseñar un poema (consúltalo en Google), usando otros estilos; por ejemplo, para colores usa el formato rgb (haz clic en el siguiente recuadro para que escojas el color o, también, usar este enlace).

Etiqueta bloque, contenedor o caja (div)

Dentro de esta etiqueta podemos poner varios elementos HTML, de tal forma que el estilo que usemos afecte a todos estos elementos; por ejemplo:

Hemos encerrado los dos párrafos de Machado en un contenedor <div>, con los siguientes estilos:

Color. Usamos el color rgb(65,160,65).
Ancho del contenedor. Usamos una ancho del 80%. Cada página tiene un ancho efectivo de 540 pixeles, por lo que la caja quedaría con un ancho de 432 pixeles.
Margen izquierda del contenedor. Con el objetivo de centrar el contenedor, usamos una margen del 20% (¿por qué?).
Negrilla. En lugar de la etiqueta <b>, usamos el estilo "font-weight: bold"

El estilo del contenedor, entonces, es el siguiente:

style="color: rgb(65,160,65); font-weight: bold; width:80%; margin-left:20%;"

Listas "ul" y "ol"

Para una lista no ordenada, usamos la etiqueta <ul> (unordered list) y cada elemento va en la etiqueta <li> (list item):

• Arde en tus ojos un misterio, virgen
• esquiva y compañera.
• No sé si es odio o es amor la lumbre
• inagotable de tu aliaba negra.

Podemos usar un estilo para la viñeta de la lista, usando list-style-type, que puede ser "none, circle, disc o square", con este último quedaría así:

• Arde en tus ojos un misterio, virgen
• esquiva y compañera.
• No sé si es odio o es amor la lumbre
• inagotable de tu aliaba negra.

Para una lista ordenada, usamos la etiqueta <ol> (ordered list) y cada elemento va en la etiqueta <li> (list item):

1. Arde en tus ojos un misterio, virgen
2. esquiva y compañera.
3. No sé si es odio o es amor la lumbre
4. inagotable de tu aliaba negra.

Podemos ordenar no sólo con números, para ello, usamos el atributo "type", que puede ser "1, A, a, I o i". Usando la última, obtendríamos:

1. Arde en tus ojos un misterio, virgen
2. esquiva y compañera.
3. No sé si es odio o es amor la lumbre
4. inagotable de tu aliaba negra.

Es posible que una lista ordenada quede compartida entre dos páginas, por lo que en la segunda página tengamos que inciarla en el orden siguiente al último item de la primera. Por ejemplo, en la primera página quedaron dos elementos, entonces, usamos el atributo "start=3" en la segunda página, para indicar que inicia con el tercer item:

3. No sé si es odio o es amor la lumbre
4. inagotable de tu aliaba negra.

Los atributos usados, fueron los siguientes:

type="a" start="3"

¡Vaya, ha usado letra "pegada"! Eres buen observador o, quizá, porque le puse tamaño 30. Se trata de otro estilo que podemos usar, las familias de fuentes "font-family" que, por ahora, puedes usar Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New o Brush Script MT, esta última de tipo script o "letra pegada".

Pero, pese a que la hemos usado en un estilo para la etiqueta párrafo, lo más usual es usarla en un estilo puesto en la cabecera del documento o, como veremos en otra sesión, en un archivo externo de estilos.

Estilos en la cabecera del documento HTML

Los estilos definidos en la cabecera del libro, no los recomendamos; sin embargo, en el siguiente video puedes ver cómo se realiza:

Decorando un contenedor o caja

¿Cómo se hace?... ¡No te pierdas la segunda sesión del curso!