Curso HTML: Trabajar con Listas



Existen dos tipos de listas, las listas ordenadas y las listas no ordenadas. La diferencia es que las primeras se enumeran a través de números y las segundas a través de viñetas como círculos u otras imágenes. 

Listas ordenadas

Para utilizar listas ordenadas en HTML, primero colocamos unas etiquetas <ol> </ol> y entre ellas colocamos etiquetas <li></li> para definir cada elemento en la lista ordenada. Aquí hay un ejemplo del código

    <ol>
      <li>Pantalla 14 pulgadas</li>
      <li>Teclado en español</li>
      <li>Procesador i7</li>   
    </ol>

Listas no ordenadas

Para utilizar listas no ordenadas utilizamos las etiquetas <ul> </ul> junto con las etiquetas <li> </li> para definir los elementos de la lista. Aquí hay un ejemplo del código.

    <ul>
      <li>Pantalla 14 pulgadas</li>
      <li>Teclado en español</li>
      <li>Procesador i7</li> 
    </ul>

Ejercicio:

Ahora toma el ejemplo que hiciste en la lección anterior y agrega algunas características, también intenta colocar una lista, dentro de otra lista. Al final tu pagina web debe lucir un poco como esta:

Ejemplo de tarea sobre listas

Si tienes problemas al hacer la tarea, puedes descargar un ejemplo desde este enlace.

Elige tu siguiente tema

  1. Crea tu primera página web
  2. Cómo agregar un favicon (icono)
  3. Usar tablas y comentarios
  4. Uso de títulos y párrafos
  5. Trabajar con Listas
  6. Mostrar imágenes y rutas
  7. Enlaces o links a otras páginas web
  8. Formularios en páginas web
  9. Etiqueta textarea para ingresar textos grandes
  10. Mostrar listas desplegables
  11. Subir imágenes, números, emails, etc
Versión en video.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *