Lenguaje HTML/Listas
En este capítulo veremos los tres tipos de listas que podemos incluir en nuestros documentos y las herramientas que HTML nos proporciona.
Listas no ordenadas
[editar]Son listas en las que la información se muestra de forma no secuenciada.
Para construirlas emplearemos los elementos: ul y li.
- Elemento ul
(unordered list = lista desordenada) Es el que define y delimita la lista.
Sus etiquetas son: <ul> y </ul> (ambas obligatorias)
Sus principales atributos genéricos son:
- style - (estilo) define estilos.
Sus principales atributos de transición son:
- type - (tipo) estilo de viñeta.
- Valores posibles: 'disc' (disco), 'circle' (círculo) y 'square' (cuadrado)
- Elemento li
(list item = item de la lista ) Es el que define y delimita cada uno de los puntos de la lista.
Sus etiquetas son: <li> y </li> (la de cierre opcional ¡úsala de todos modos!)
Sus principales atributos genéricos son:
- style - define estilos.
Sus principales atributos de transición son:
- type - tipo de viñeta.
- Valores posibles: Los mismos que en ul; 'disc', 'circle' y 'square'
<ul> <li>Listas ordenadas</li> <li>Listas no ordenadas</li> <li>Listas de definiciones</li> </ul> |
El resultado será este:
- Listas ordenadas
- Listas no ordenadas
- Listas de definiciones
Listas ordenadas
[editar](Comúnmente se les llama listas numeradas) Son listas en las que la información se muestra secuenciada numérica o alfabéticamente.
Para construirlas emplearemos los elementos: ol y li.
- Elemento ol
(ordered list = lista ordenada) Es el que define y delimita la lista.
Sus etiquetas son: <ol> y </ol> (ambas obligatorias)
Sus principales atributos genéricos son:
- style - define estilos.
- Valores posibles:
- text-decoration: underline; - Subraya las palabras de la lista, pero no subraya las viñetas de la lista en sí.
- Valores posibles:
<ol style="text-decoration: underline"> <li>Empezamos</li> <li>Continuamos</li> <li>Terminamos</li> </ol> |
- Empezamos
- Continuamos
- Terminamos
- Si aplicamos el valor solo a una de las etiquetas <li> el valor se aplicará solo a dicha parte. Ejemplo:
<ol> <li>Empezamos</li> <li style="text-decoration: underline">Continuamos</li> <li>Terminamos</li> </ol> |
- Empezamos
- Continuamos
- Terminamos
Sus principales atributos de transición son:
- type - tipo de secuencia.
- Valores posibles:
- '1' - secuencia numérica.
- 'I' - secuencia numérica romana en mayúscula.
- 'i' - secuencia numérica romana en minúscula.
- 'A' - secuencia alfabética en mayúscula.
- 'a' - secuencia alfabética en minúscula.
- Valores posibles:
- start - valor inicial de la secuencia.
- Valores posibles: un número.
- Elemento li.
Es el que define y delimita cada uno de los puntos de la lista. Sus etiquetas son: <li> y </li> (la de cierre opcional ¡úsala de todos modos!)
Sus principales atributos genéricos son:
- style - define estilos.
Sus principales atributos de transición son:
- type - tipo de secuencia.
- Valores posibles:'1', 'I', 'i', 'A', 'a'.
- value - valor de reinicio de la secuencia.
- Valores posibles: un número.
<ol> <li>Empezamos</li> <li>Continuamos</li> <li>Terminamos</li> </ol> |
El resultado será este:
- Empezamos
- Continuamos
- Terminamos
<ol type="i"> <li>Empezamos</li> <li>Continuamos</li> <li>Terminamos</li> </ol> |
El resultado será este:
- Empezamos
- Continuamos
- Terminamos
- Verificando
Listas de definiciones o glosario
[editar]Son listas en las que la información se divide en dos secciones: concepto y definición.
Para construirlas emplearemos los elementos: dl, dt y dd.
- Elemento dl
Es el que define y delimita la lista.
Sus etiquetas son: <dl> y </dl> (ambas obligatorias)
- Elemento dt
Es el que define y delimita el concepto a definir.
Sus etiquetas son: <dt> y </dt> (la de cierre, opcional, ¡úsala de todos modos!)
- Elemento dd
Es el que define y delimita la definición del concepto.
Sus etiquetas son: <dd> y </dd> (la de cierre, opcional, ¡úsala de todos modos!)
Las listas de definiciones se puede anidar.
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>WWW</dt> <dd>World Wide Web</dd> </dl> |