Glosarios
Un glosario está formado por una serie de parejas palabra-definición. Los elementos de los glosarios no van precedidos por una viñeta como las listas, sino que la maquetación se hace con indentaciones (sangrías) entre los términos y sus definiciones.
- <dl></dl>
La etiqueta <dl> (Definition List) etiqueta indica el comienzo de un glosario.
- <dt></dt>
La etiqueta <dt> (Definition Term) indica que a continuación va la palabra a definir.
- <dd></dd>
La etiqueta <dd> (Definition Definition) indica que a continuación va la definición, por lo que le aplicará sangría.
Ejemplo: veamos cómo crear un pequeño diccionario. Este código:
<dl> <dt>perro (<em>n. masc.</em>)</dt> <dd>animal de cuatro patas que ladra.</dd> <dt>gato (<em>n. masc.</em>)</dt> <dd>animal de cuatro patas que maulla y se lleva mal con el perro.</dd> <dt>pescadilla (<em>n. fem.</em>)</dt> <dd>animal que vive en el mar recubierto de escamas.</dd> </dl> |
… se ve así:
- Perro (n. masc.)
- Animal de cuatro patas que ladra.
- Gato (n. masc.)
- Animal de cuatro patas que maulla y se lleva mal con el perro.
- Pescadilla (n. fem.)
- Animal que vive en el mar recubierto de escamas.
Recursos
- Etiquetas HTML 4.01: Tags ordered alphabetically
Listas
Las listas son unos elementos de maquetación muy eficaces a la hora de dar formato al contenido de una web. Las listas se pueden utilizar para varias cosas:
- creación de índices y esquemas.
- corregir el exceso de contenido de una página.
- corregir la falta de contenido de una página.
- romper la monotonía de contenidos de la página.
Recursos
- Tutorial listas CSS: CSS List tutorial
- <ul></ul>
La etiqueta <ul> (Unordered List, Lista sin ordenar) muestra una lista sin numerar donde las filas (definidas con la etiqueta <li>) pueden ir precedidas de una viñeta, que puede ser diferente en cada fila.
Propiedades CSS:
Ejemplo: este código:
<h4>debemos comprar:</h4> <ul> <li>camisas para jose</li> <li>locion para daniel</li> </ul>
… se ve así:
debemos comprar:
- camisas para jose
- locion para daniel
- <ol> </ol>
La etiqueta <ol> (Ordered List, Lista ordenada) muestra una lista numerada donde las filas (definidas con la etiqueta <li>) pueden ir precedidas de un número, que puede tener diferente estilo en cada fila.
Atributos:
- start: define el primer secuenciador de la serie de elementos de la lista (debe ser un número entero a partir de 1).
Propiedades CSS:
Ejemplo: este código:
<h4>estudiar para mañana:</h4> <ol type="1" start="3"> <li>geometria</li> <li>ciencias sociales</li> </ol> <h4>actividades de la semana:</h4> <ol type="i" start="3"> <li>asistir a la universidad</li> <li>comprar disco</li> <li>llevar el auto al mecanico</li> </ol>
… se ve así:
estudiar para mañana:
- geometria
- ciencias sociales
actividades de la semana:
- asistir a la universidad
- comprar disco
- llevar el auto al mecanico
- <li></li>
La etiqueta <li> define las líneas de las listas, tanto numeradas (<ol>) como sin numerar (<ul>).
Propiedades CSS:
Anidamiento de listas
Las listas son elementos tipo block, de los que insertan retorno de carro (como los párrafos p y los títulos h1) y se pueden anidar unas en otras sin ningún problema cuantos niveles queramos, con tan sólo respetar la sintaxis y tener cuidado de cerrar las etiquetas.
La forma de anidar listas es sencilla: dentro de una etiqueta <li></li> se introduce el bloque completo de la lista anidada (por ejemplo <ol></ol>), cuidando de cerrar a continuación el elemento padre con su correspondiente </li>.
Ejemplo de listas anidadas: este código:
<ul> <li>primer elemento</li> <li>segundo elemento <ol> <li>primer sub-elemento</li> <li>segundo sub-elemento</li> <li>tercer sub-elemento</li> </ol> </li> <li>tercer elemento</li> </ul> |
… se ve así:
- primer elemento
- segundo elemento
- primer sub-elemento
- segundo sub-elemento
- tercer sub-elemento
- tercer elemento
Menús flotantes con CSS
Combinando las listas con estilos CSS se pueden conseguir efectos realmente espectaculares, como menús de navegación, pestañas, etc.
Ejemplo de menú flotante con CSS: este código:
<style> .flotante li ul { display: none; } .flotante li:hover > ul { display: block; } </style> <div class="flotante"> <ul> <li><a href="#">Menu</a> <ul> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2</a></li> </ul> </li> </ul> </div> |
… se ve así (pasa el ratón por encima del enlace!):
Recursos
- Listamatic: Listamatic, the Power of CSS applied to List
Listas numeradas automáticamente con CSS
Las propiedades CSS counter-reset, counter-increment y content junto con la función counters() permiten crear listas numeradas automáticamente con CSS.
Ejemplo de listas numeradas automáticamente con CSS: este código:
<style> .numera ol { counter-reset: item; } .numera ol > li { list-style:none; } .numera ol > li:before { content: counters(item, ". ") ".- ";counter-increment: item; } </style> <div class="numera"> <ol type="1"> <li>elemento 1</li> <li>elemento 2 <ol type="1"> <li>elemento 2-1</li> <li>elemento 2-2 <ol type="1"> <li>elemento 2-2-1</li> <li>elemento 2-2-2</li> <li>elemento 2-2-3</li> </ol> </li> <li>elemento 2-3</li> </ol> </li> <li>elemento 3</li> </ol> </div> |
… se ve así:
- elemento 1
- elemento 2
- elemento 2-1
- elemento 2-2
- elemento 2-2-1
- elemento 2-2-2
- elemento 2-2-3
- elemento 2-3
- elemento 3
Recursos
- Numeración con CSS: Automatic counters and numbering