03 Nov Ejercicio html sobre como usar las etiquetas h1, h2, h3
Posted at 22:58h in Tutorial HTML gratuito. Aprende a estructurar tus páginas web., Ejercicios HTML 6 Comments
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.
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:
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!
Entradas relacionadas:
La huelga del 21 de diciembre de Renfe. Y la 31,14, 30,1...
Renfe en huelga. Una historia que se repite y un programador algo cansado de escribir siempre el mismo código. ¡Con capturas de pantalla!
Renfe en huelga. Una historia que se repite y un programador algo cansado de escribir siempre el mismo código. ¡Con capturas de pantalla!
¿Se pueden hacer listas númeradas negativas con HTML?
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Practicando con listas ordenadas y listas no ordenadas | Ejercicio html
Ejercicios html sobre listas ordenadas y listas no ordenadas y el uso de los atributos que pueden acompañar una lista. Inlcuye solución.
Ejercicios html sobre listas ordenadas y listas no ordenadas y el uso de los atributos que pueden acompañar una lista. Inlcuye solución.
Lo más importante en lenguaje web es aprender a tabular
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Respuesta a dudas típicas cuando aprendemos html por primera vez
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...
Libro digital navegable
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
marcelo
Posted at 20:27h, 25 noviembreen 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 diciembreLo 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 marzoHola 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!
Francesc Ricart
Posted at 22:53h, 23 mayoSi es verdad
Deberé actualizar la foto
mariah porteles
Posted at 07:12h, 03 junioNo entendí nada
Francesc Ricart
Posted at 17:12h, 14 junio¡ok!