Practicando con listas ordenadas y listas no ordenadas

26 Ene Practicando con listas ordenadas y listas no ordenadas | Ejercicio html

Publicado a las 07:30h en Ejercicios HTML, Tutorial HTML gratuito. Aprende a estructurar tus páginas web. por Francesc Ricart 0 Comentarios

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:

Códigos HTML | Carácteres especiales (escapados)
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.

Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.

Ejercicio sobre creación de capas html mediante etiquetas div
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y...

Conversión de un xhtml a htm5. Continuación ejercicio capas html.
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.

Como anidar etiquetas html correctamente
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.

Espacios en blanco HTML. Practicando con caracteres especiales.
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. 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

Practicando con listas ordenadas y listas no ordenadas | Ejercicio html