Las listas <li> ...
A menudo hay que hacer listas de objetos, de conceptos, de definiciones, etc.Las listas pueden ser no numeradas (el orden no importa), numeradas, anidadas (listas dentro de otras) o de definiciones.
Listas no numeradas <ul> ...
Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista debe insertarse entre la etiqueta <li> (list item) y la etiqueta de cierre </li>.
A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).
Por ejemplo, para insertar la siguiente lista:
- Perro
- Gato
- Periquito
Habría que escribir:
<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
Lista ordenada <ol> …
Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (números romanos en minúsculas) o I (números romanos en mayúsculas).
Por ejemplo, para insertar la siguiente lista:
- Perro
- Gato
- Periquito
Habría que escribir:
<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>
Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.
Por ejemplo, para insertar la siguiente lista:
- Lunes
- Inglés
- Francés
- Martes
- Inglés
- Correccion de ejercicios
- Proponer ejercicios
Habría que escribir:
<ol>
<li>Lunes
<ul type="square">
<li>Inglés</li>
<li>Francés</li>
</ul>
</li>
<li>Martes
<ol>
<li>Inglés</li>
<ol type="A">
<li>Correccion de ejercicios</li>
<li>Proponer ejercicios </li>
</ol>
</li>
</ol>
</li>
</ol>
Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos elementos <li>Lunes y <li>Martes.
El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type="square"> que tiene dos
elementos <li>Inglés</li> y <li>Francés</li>.
El elemento Martes contiene una lista ordenada de un sólo elemento <li>Inglés</li> elemento que contiene a su vez una lista desordenada de tipo letras mayúsculas <ol type="A"> con los dos elementos <li>Corrección de ejercicios</li> y <li>Proponer ejercicios </li>
Lista de definiciones <dl> …
Son apropiadas, como su nombre indica, para establecer listados de términos con sus definiciones. Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los conceptos a definir van con la etiqueta <dt> (definition term) y las definiciones con la etiqueta <dd> (definition definition).Algunos ejemplos de listas en lenguaje HTML
Probamos a trabajar con Listas
numeradas:
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
- Primero
- Segundo
El código seria así:
<html>
<head>
<title> listas </title>
</head>
<body>
<p> Probamos a trabajar con <font color="red">Listas<br>numeradas:</font>
<ol type="1">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="A">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="a">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="I">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="i">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="1" start="30">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="disc">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="circle">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="square">
<li>Primero</li>
<li>Segundo</li>
</ol>
</body>
</html>
<html>
<head>
<title> listas </title>
</head>
<body>
<p> Probamos a trabajar con <font color="red">Listas<br>numeradas:</font>
<ol type="1">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="A">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="a">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="I">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="i">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="1" start="30">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="disc">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="circle">
<li>Primero</li>
<li>Segundo</li>
</ol>
<ol type="square">
<li>Primero</li>
<li>Segundo</li>
</ol>
</body>
</html>
No hay comentarios:
Publicar un comentario