Ejercicio html sobre como usar las etiquetas h1, h2, h3

Ejercicio html sobre como usar las etiquetas h1, h2, h3

5
(1)

Una duda frecuente cuando se empieza a aprender html es como se deben usar las etiquetas de título  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Lo que para algunos es una cuestión evidente a otros se les atraganta y suelen necesitar ejemplos.

Algo que me gusta responder a mis alumnos es…. ¿sabrías aplicar formatos de títulos a un documento word y luego generar un índice?

En esta entrada se plantea un ejercicio fácil que ayuda a entender el uso adecuado de los títulos html.

Puedes repasar esta entrada.

Enunciado

A continuación se te presenta un documento de texto plano para el que se te pide darle formato a los encabezados mediante word de microsoft.

Una vez tenga el formato adecuado mediante word entonces se te pide desarrollarlo en html

Título principal que resume la idea general del escrito
30 palabras de párrafo de bienvenida con texto lorem ipsum
Primera idea principal a desarrollar en el escrito.
30 palabras de párrafo que desarrolla la primera idea principal y que tiene varios subtemas a desarrollar a continuación.
Primer subtema a desarrollar de la primera idea principal.
30 palabras de párrafo que desarrolla el primer subtema de la primera idea principal.
Segundo subtema a desarrollar de la primera idea principal.
30 palabras de párrafo que desarrolla el segundo subtema de la primera idea principal.
Segunda idea principal a desarrollar en el escrito.
30 palabras de párrafo que desarrolla la segunda idea principal y que tiene varios subtemas a desarrollar a continuación.
Primer subtema a desarrollar de la segunda idea principal.
30 palabras de párrafo que desarrolla el primer subtema de la segunda idea principal.
Segundo subtema a desarrollar de la primera idea principal.
30 palabras de párrafo que desarrolla el segundo subtema de la segunda idea principal.
Conclusiones 
Párrafo de 30 palabras con la síntesis de las ideas desarrolladas.
Párrafo de 20 palabras de despedida.

Solución del ejercicio

En una primera fase resolvemos el enunciado según word.

El resultado se muestra en la imagen a continuación:

solución word microsoft ejercicio encabezados html
solución ejercicio con word de Microsoft

Ahora estamos en mejor disposición de resolverlo mediante un editor Sublime, Visual Studio Code o parecido.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Resolución ejercicio encabezdos html</title>
	<meta content="author" content="francesc ricart">
</head>
<body>

<h1>Título principal que resume la idea general del escrito</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore similique unde dolorem reiciendis recusandae laborum at, placeat, aliquam nobis maxime ducimus, cupiditate dignissimos repudiandae voluptate quasi iusto eos et magni.</p>

	<h2>Primera idea principal a desarrollar en el escrito.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, laudantium, ipsa. Magni assumenda sequi consequuntur sint eos delectus aliquam ipsum, consectetur quaerat. Cupiditate, non corrupti necessitatibus accusantium illum eius officiis.</p>
		<h3>Primer subtema a desarrollar de la primera idea principal.</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a obcaecati facilis, sunt similique enim fuga vero expedita cum illum doloremque, possimus sit quisquam iste deleniti iusto hic, ratione! Nisi!</p>
		<h3>Segundo subtema a desarrollar de la primera idea principal.</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iusto dolore ab explicabo. Provident nam aspernatur perspiciatis ad commodi aliquid obcaecati reprehenderit, quos, veniam iure itaque neque dolores vero cupiditate.</p>
	<h2>Segunda idea principal a desarrollar en el escrito.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique consequatur ab voluptatibus possimus totam temporibus dolores, natus molestias minima praesentium non reiciendis molestiae quaerat, neque ea, sunt commodi saepe velit.</p>
		<h3>Primer subtema a desarrollar de la segunda idea principal</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius, minima. Blanditiis dolorem modi fugit, rem animi necessitatibus a aliquid nemo ducimus tenetur dolor soluta sapiente tempore, unde maiores ad.</p>
		<h3>Segundo subtema a desarrollar de la primera idea principal</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus atque, repellendus ipsa similique sit blanditiis officia quos eligendi iure animi debitis, qui nesciunt commodi reprehenderit voluptas vel. Quasi, suscipit, delectus!</p>

	<h2>Conclusiones</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates molestiae libero voluptas dicta aut non excepturi, doloribus laborum temporibus, earum nemo nam tempore doloremque? Alias quisquam eius explicabo doloremque expedita.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laborum adipisci, nobis quia expedita tempore voluptate inventore recusandae deleniti perspiciatis.</p>
</body>
</html>

¡Hola!

Querido lector,

¡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!

Puntuación media 5 / 5. Votos: 1

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? 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.