 |
10.- Listas de elementos
Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando números, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres tipos:
1. -Listas numeradas:
Cada elemento va precedido por un número.
Para este tipo de lista se utiliza la etiqueta <ol></ol> . Cada uno de los elementos de la lista irá precedido de la etiqueta <li> .
Ejemplo:
En el editor de textos |
En el navegador |
Tipos de listas:
<ol>
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ol> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Si queremos utilizar letras para ordenar nuestra lista (por defecto siempre utiliza HTML números), debemos añadir a la etiqueta <ol> el atributo type con los siguientes valores:
| <ol type=a></ol> |
Ordena con letras minúsculas. (a,b,c,...) |
| <ol type=A></ol> |
Ordena con letras mayúsculas. (A,B,C,...) |
| <ol type=I></ol> |
Ordena con números romanos en mayúsculas. (I,II,III,...) |
| <ol type=i></ol> |
Ordena con números romanos en minúsculas. (i.ii,iii,...) |
Ejemplos
En el editor de textos |
En el navegador |
Tipos de listas:
<ol type=a>
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ol> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Tipos de listas:
<ol type=I>
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ol> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Tipos de listas:
<ol type=i>
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ol> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Si queremos empezar nuestra lista por cualquier otro número o letra (que no sean el 1 o la "a"), deberemos indicarlo con el atributo start.
En el editor de textos |
En el navegador |
Tipos de listas:
<ol start=27 >
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ol> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Tipos de listas:
<ol type=a start=10>
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ol> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
subir
2.- Listas sin numerar.
En ellas, cada elemento va precedido por un "bullet" o punto. Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada uno de los elementos.
Ejemplo:
En el editor de textos |
En el navegador |
Tipos de listas:
<ul>
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ul> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Con el parámetro type podemos indicar la forma del "bullet". Los valores de type pueden ser disc (disco) , circle (círculo vacío) o square (cuadrado). Si no indicamos nada, apacerá por defecto el disco.
Ejemplo:
En el editor de textos |
En el navegador |
Tipos de listas:
<ul type=circle >
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ul> |
- numeradas
- sin numerar
- de definición
|
Tipos de listas:
<ul type=disc >
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ul> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
Tipos de listas:
<ul type=square >
<li>numeradas</li>
<li>sin numerar </li>
<li>de definición </li>
</ul> |
Tipos de listas:
- numeradas
- sin numerar
- de definición
|
subir
3.- Listas de definición
Las listas de definición se tratan de listas a dos niveles. Es decir, muestran los elementos tipo glosario o diccionario. Sirven para distinguir entre una palabra a definir y su definición. Para este tipo de lista se utiliza la etiqueta <dl></dl> . El elemento marcado como palabra a definir viene marcado por la etiqueta <dt> , y la definición por la etiqueta <dd> .
En el editor de textos |
En el navegador |
<dl>
<dt> Violín
<dd> Instrumento musical de cuerda caracterizado por...
<dt> Timbal
<dd> Instrumento musical de percusión...
<dt> Flauta
<dd> Instrumento musical de viento...
</dl> |
- Violín
- Instrumento musical de cuerda caracterizado por...
- Timbal
- Instrumento musical de percusión...
- Flauta
- Instrumento musical de viento...
|
subir
Listas de varios niveles o Listas anidadas
Podemos construir listas anidadas, es decir, listas que incluyen otras listas.
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "indice de materias".
En el editor de textos |
En el navegador |
<ul>
<li> Instrumentos de viento
<ul>
<li> Trompeta </li>
<li> Flauta </li>
<li> Gaita</li>
</ul>
</li>
<li> Instrumentos de cuerda
<ul>
<li> Guitarra </li>
<li> Arpa </li>
<li> Violonchelo </li>
</ul>
</li>
</ul>
|
- Instrumentos de viento
- Instrumentos de cuerda
- Guitarra
- Arpa
- Violonchelo
|
subir
|
|
| |
|
|
Crea tu web Tutorial HTML Trucos HTML Trucos Dreamweaver