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

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

6 Comments
  • marcelo
    Posted at 20:27h, 25 noviembre Responder

    en la imagen muestra colores y sangrías y en el código aun no sabemos manejar colores, eso causa mucha confusión

    • Francesc Ricart
      Posted at 23:03h, 09 diciembre Responder

      Lo genera sólo el editor de código (excepto que estés aprendiendo con bloc de notas). Pregúntale a tu profesor como puedes cambiar la plantilla de tu editor de código para ver colores.
      Saludos,

  • Mariano Monti
    Posted at 01:47h, 02 marzo Responder

    Hola muchas gracias por el contenido!

    Citando lo que dijo Marcelo, la foto donde se ve el supuesto texto realizado en word, tiene los títulos enumerados y con sangría. Y si copiamos todo el codeo en nuestro edito , el resultado no el mismo, simplemente se muestra cada titulo uno abajo del otro.
    Para lograr algo exactamente como se lo ve en el word habría que usar otras etiquetas. Con esto no deseo tirar abajo la explicación del Maestro Francesc Ricart.
    saludos!

  • mariah porteles
    Posted at 07:12h, 03 junio Responder

    No entendí nada

Post A Comment