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 Tutorial HTML gratuito. Aprende a estructurar tus páginas web., Ejercicios HTML por Francesc Ricart 0 Comentarios

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:

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 co...

Como y cuando usar las etiquetas blockquote, q y cite
Las etiquetas q, cite y blockquote tienen significado semántico. Además de que pueden ser muy útiles en cuanto al SEO. ¿Sabes cómo y cuándo debes usar...

¿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.

La importancia de la etiqueta < title > para el SEO
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.

Como indicar a Google la modificación y corrección de contenidos mediante html
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de qu...

Ejercicio html etiquetas de texto nivel intermedio
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.

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

Practicando con listas ordenadas y listas no ordenadas | Ejercicio html