09 Feb Libro digital navegable
Publicado a las 07:30h en Tutorial HTML gratuito. Aprende a estructurar tus páginas web., Ejercicios HTML 0 Comentarios
En este ejercicio vamos a aplicar los conceptos de:
- Listas correctamente anidadas. Ordenadas y no ordenadas.
- Enlaces anidados dentro de una lista.
- Anclas intradocumentales.
- Anclas extradocumentales.
- Como navegar por el árbol de un proyecto web.
- Etiqueta link y atributo rel con posibles valores first, next, prev, last.
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.
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Como indicar a Google la modificación y corrección de contenidos mediante html
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Ejercicio html etiquetas de texto nivel intermedio
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Ejercicio html sobre como usar las etiquetas h1, h2, h3
Ejercicio html dónde practicarás primero con el word de Office y después mediante html el estructurado correcto de los encabezados de un documento web mediante h1, h2 y h3
Ejercicio html dónde practicarás primero con el word de Office y después mediante html el estructurado correcto de los encabezados de un documento web mediante h1, h2 y h3
Factores que afectan al tiempo de carga de una página web
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Etiquetas básicas introductoras al html5
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...
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...
Como anidar etiquetas html correctamente
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.
No hay comentarios