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:
Resumen de como comentar código en html, css y javascript
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Doctype: resumen sobre lo mínimo que debes saber
Conceptos mínimos que debes aprender sobre doctype ¿Cómo y cuándo debemos usar la instrucción doctype? ¿Tienes claro si es en minúscula o mayúscula. ¿Qué es el DTD?
Conceptos mínimos que debes aprender sobre doctype ¿Cómo y cuándo debemos usar la instrucción doctype? ¿Tienes claro si es en minúscula o mayúscula. ¿Qué es el DTD?
Embellecer código html, css o javascript para entenderlo mejor
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
¿Puedo usar etiquetas html inventadas o erróneas? ¿qué sucede?
¿Qué sucede cuando te equivocas con una etiqueta html o directamente te la inventas? ¿Cómo la interpreta el navegador web?
¿Qué sucede cuando te equivocas con una etiqueta html o directamente te la inventas? ¿Cómo la interpreta el navegador web?
Etiquetas xmp, pre y code en HTML
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 ...
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 ...
Ejercicio sobre listas de definiciones html
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
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!