Practicando con listas ordenadas y listas no ordenadas | Ejercicio html

Practicando con listas ordenadas y listas no ordenadas | Ejercicio html

Print Friendly, PDF & Email
Practicando con listas ordenadas y listas no ordenadas | Ejercicio html
Valora esta entrada
En este ejercicio vamos a aplicar el concepto listas ordenadas y no ordenas en html.

Puedes repasar la teoría en esta publicación.

Enunciado

Escribe con html las listas según la imagen.

Ejemplos listas ordenadas
Ejercicio listas ordenadas
Ejemplo listas NO ordenadas
Ejercicio listas NO ordenadas

Solución del ejercicio

Usaremos los atributos type, reversed y start.

Tengamos en cuenta que el atributo type está deprecated en html5 pero que su uso es práctico. Por una vez haremos una excepción…

Resolución listas ordenadas

<h2>Listas ordenadas</h2>

<ol type="a" start="4">
    <li>Elemento 1</li>		
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ol>

<ol start="100" reversed="reversed">
    <li>Elemento 1</li>		
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ol>

<ol type="i" start="999">
    <li>Elemento 1</li>		
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ol>

Resolución listas NO ordenadas

<h2>Listas no ordenadas</h2>

<ul type="disc">
    <li>Elemento 1</li>		
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

<ul type="circle">
    <li>Elemento 1</li>		
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

<ul type="square">
    <li>Elemento 1</li>		
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

¡Hola!

Querido lector,

Espero que este ejercicio te haya ayudado a practicar con los atributos que pueden acompañar un elemento lista.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 414
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Mapas de imagen en html
- 419
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Etiquetas básicas introductoras al html5
- 915
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...
Respuesta a dudas típicas cuando aprendemos html por primera vez
- 55
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 ...
Ejercicio migración de xhtml a html5. Estructura web semántica.
- 35
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
LibrosWeb ahora es UniWebSidad
- 204
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
¿Se pueden hacer listas númeradas negativas con HTML?
- 43
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Qué es un favicon y para que sirve
- 178
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Ejercicio html para practicar con etiquetas de texto más comunes
- 51
Ejercicio html nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.
Ejercicio html sobre códigos HTML y caracteres especiales
- 49
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.