Libro digital navegable

Libro digital navegable

Print Friendly, PDF & Email
Libro digital navegable
Valora esta entrada
En este ejercicio vamos a aplicar los conceptos de:

Es un ejercicio muy completo. Suele gustar bastante.

Entremos en materia.

Enunciado

Crea un libro digital que conste de 4 capítulos y un índice desde el que se puede acceder a:

  • Cada uno de los capítulos del libro.
  • Cada una de las secciones definidas dentro de cada capítulo.

Cada capítulo se divide de las secciones:

  • Descripción del problema (2 párrafos de tipo lorem ipsum)
  • Argumentación (Como mínimo 10 párrafos de tipo lorem ipsum)
  • Conclusión (2 párrafos lorem ipsum)

En el pié de página de cada uno de los capítulos debe aparecer 2 enlaces que ocupen 2 líneas diferenciadas que nos permitan:

  • Ir al índice del libro digital.
  • Situarse de nuevo en la parte superior del documento capítulo.

Una vez finalizado el libro digital configura la cabecera de todos los capítulos para indicar que capítulo es el primero, cual viene después, cual es el anterior y cuál es el último. Utiliza para ello la etiqueta <link>.

A continuación se adjuntan a modo de guía una captura de pantalla de la solución final para el índice y uno de los capítulos.

índice libro digital con html
Resultado final índice de capítulos libro digital con html
Muestra de capítulo libro digital navegable
Muestra del resultado final de un capítulo del libro digital navegable.

Solución del ejercicio

Fijaros que el javascript ya está acoplado pero queremos que se cargue desde una hoja separada.

Separaremos el javascript escribiéndolo en otro documento de nombre functions.js

Es importante que tengas en cuenta en que carpeta pones functions.js

En el ejemplo hemos optado por crear el archivo functions.js en el mismo nivel que index.html

¿Como queda un capítulo?

<!DOCTYPE html>
<html>
<head>
	<title>Capítulo 1</title>
	<meta charset="utf-8"/>
	<meta name="description" content=""/>
	<meta name="author" content=""/>
	<link rel="first"/>
	<link rel="next" href="capitulo2.html"/>
</head>
<body>
<h1 id="top">Capítulo 1</h1>
<ul>
	<li><a href="#descripcion">Descripción</a></li>
	<li><a href="#argumentacion">Argumentación</a></li>
	<li><a href="#conclusion">Conclusión</a></li>
</ul>

<h2 id="descripcion">Descripción</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<h2 id="argumentacion">Argumentación</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<h2 id="conclusion">Conclusión</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

<p><a href="#top">Ir al índice del capítulo</a></p>
<p><a href="../index.html">Ir al índice del libro</a></p>
</body>
</html>

¿Como queda el índice?

<!DOCTYPE html>
<html>
<head>
	<title>Mi libro digital</title>
	<meta charset="utf-8"/>
	<meta name="description" content=""/>
	<meta name="author" content="Francesc Ricart"/>
	<link rel="icon" href="img/libro.png"/>
</head>
<body>

<h1>Mi libro digital</h1>

	<ol type="I">
		<li><a href="capitulos/capitulo1.html">Capítulo 1</a>
			<ul>
				<li><a href="capitulos/capitulo1.html#descripcion">Descripción del problema</a></li>
				<li><a href="capitulos/capitulo1.html#argumentacion">Argumentación</a></li>
				<li><a href="capitulos/capitulo1.html#conclusion">Conclusión</a></li>
			</ul>
		</li>
		<li><a href="capitulos/capitulo2.html">Capítulo 2</a>
			<ul>
				<li><a href="capitulos/capitulo2.html#descripcion">Descripción del problema</a></li>
				<li><a href="capitulos/capitulo2.html#argumentacion">Argumentación</a></li>
				<li><a href="capitulos/capitulo2.html#conclusion">Conclusión</a></li>
			</ul>
		</li>
		<li><a href="capitulos/capitulo3.html">Capítulo 3</a>
			<ul>
				<li><a href="capitulos/capitulo3.html#descripcion">Descripción del problema</a></li>
				<li><a href="capitulos/capitulo3.html#argumentacion">Argumentación</a></li>
				<li><a href="capitulos/capitulo3.html#conclusion">Conclusión</a></li>
			</ul>
		</li>
		<li><a href="capitulos/capitulo4.html">Capítulo 4</a>
			<ul>
				<li><a href="capitulos/capitulo4.html#descripcion">Descripción del problema</a></li>
				<li><a href="capitulos/capitulo4.html#argumentacion">Argumentación</a></li>
				<li><a href="capitulos/capitulo4.html#conclusion">Conclusión</a></li>
			</ul>
		</li>
	</ol>
</body>
</html>

Si juntamos todas las piezas resolvemos el ejercicio.

Como extra, también se ha incluido en el <head> del documento una etiqueta <link> que llama a una imagen de tipo png que será el favicon de la página y que se encontrará en una carpeta de nombre img.

¿Te animas a probarlo?

¡Hola!

Querido lector,

En este completo ejercicio se han practicado muchos conceptos básicos de html. ¡Espero que te haya sido útil!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Como navegar por el árbol de una página web mediante enlaces html
- 79
Resumen con ejemplos de como acceder de forma relativa y con enlaces a los distintos archivos de un proyecto web dado un html referencia.
Etiquetas xmp, pre y code en HTML
- 956
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
¿Se pueden hacer listas númeradas negativas con HTML?
- 43
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Espacios en blanco HTML. Practicando con caracteres especiales.
- 13
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.
Corrige los errores que veas en la estructura web | Ejercicios html
- 48
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.
Errores html típicos que todos cometemos alguna vez
- 56
Cuando nos iniciamos todos solemos cometer errores parecidos. En esta entrada encontrarás un buen repositorio de casos reales en alumnos.
Ejercicio sobre listas de definiciones html
- 44
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
Etiquetas audio y video de html5
- 133
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 854
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Etiquetas básicas introductoras al html5
- 915
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.