| |
|---|
|
|
Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número.
Los tipos de listas en HTML son los siguientes:
- Listas ordenadas
- Listas desordenadas
- Listas de definiciones
Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Pero al ser listas ordenadas, para representar el orden tendremos los elementos numerados y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos. Es decir, cada uno de los elementos necesariamente irá precedido de un número o letra que defina su orden.
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>.
<ol> ... </ol>
Cada uno de los elementos de la lista ordenada se escribe mediante el elemento <li> </li>.
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento N</li>
</ol>
A efectos de tomarlo como ejemplo de esta lección, veamos cómo se elebora una lista de 4 ramas de la Neurociencia, en forma de lista ordenada, cuya escritura sería de la forma siguiente:
<ol>
<li>Neurogerencia</li>
<li>Neuromarketing</li>
<li>Neuroética</li>
<li>Neuroeducación</li>
</ol>
En el navegador se visualizaría con el siguiente efecto:
- Neurociencia
- Neuromarketing
- Neuroética
- Neuroeducación
Número de inicio de la lista: start
El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por defecto las listas ordenadas en HTML empiezan por el número 1.
<ol start="numero"> ... </ol>
De esta forma, si queremos que la lista empiece por el número 5, escribiremos el siguiente código, a la lista trabajada en el anterior ítem:
<ol start="5">
<li>Neurogerencia</li>
<li>Neuromarketing</li>
<li>Neuroética</li>
<li>Neuroeducación</li>
</ol>
Que produciría el siguiente efecto:
- Neurogerencia
- Neuromarketing
- Neuroética
- Neuroeducación
Tipo de lista ordenada: type
De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.
Entre los tipos de listas que podemos representar tenemos:
- 1 - Listas decimales
- a - Listas alfabéticas en minúsculas
- A - Listas alfabéticas en mayúsculas
- i - Listas de números romanos en minúsculas
- I - Listas de números romanos en mayúsculas
Los valores indicados al principio son los que le podemos asignar alatributo type de la lista ordenada en HTML.
<ol type="tipo"> ... </ol>
De manera que si queremos que la lista de ramas de neurociencia tenga una apariencia distinta a la ya expuesta, podemos hacerlo haciendo que aparezca ordenada mediante letras en mayúsculas, para lo cual escribimos lo siguiente:
<ol type=”A”>
<li>Neurogerencia</li>
<li>Neuromarketing</li>
<li>Neuroética</li>
<li>Neuroeducación</li>
</ol>
En este caso la lista se representará de la siguiente forma:
<ol type=”A”>
</ol>
La importancia de lo expuesto, es que se cuenta con versatilidad al momento de presentar la información en listas HTML, porque como se ha podido comprobar, se cuenta con varias metodologías, que puedan dar respuesta a las preferencias del escritor.
IR A PORTAFOLIOAunque en HTML 5 han vuelto a la especificación los atributos type y start hay que tener cuidado con ellos, ya que en ciertas versiones como HTML 4.01 fueron declarados obsoletos, por lo cual si usamos tipos de documentos HTML 4.01 strict podríamos tener un problema en su definición.
Para estos casos (y para todos en general) podemos utilizar las hojas de estilo CSS de cara a dar estilo a las listas en HTML.
De esta forma en CSS podemos escribir lo siguiente:
<style type=”text/css”>
ol {
list-style-type: lower-roman;
}
</style>
Lo cual hará que las listas en HTML ordenadas se muestren en números romanos y en minúsculas.
IR A PORTAFOLIOEn HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa.
Para utilizarlo simplemente indicamos el atributo reversed sobre el elemento OL.
<ol reversed> ... </ol>
En este caso, si escribimos la siguiente lista:
<ol reversed>
<li>Neurogerencia</li>
<li>Neuromarketing</li>
<li>Neuroética</li>
<li>Neuroeducación</li>
</ol>
Lo que obtendremos por pantalla será lo siguiente:
- Neurogerencia
- Neuromarketing
- Neuroética
- Neuroeducación
¡Genial!, la misma información, la misma lista, pero presentada en formatos diferentes. Estúdialas con detenimiento, y aprende a decidir cuándo te conviene más el empleo de cualquiera de las técnicas acá expuestas para tabular una información.
IR A PORTAFOLIOLas listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,…
Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul> que las define. Al igual que en las listas ordenadas, para cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li> HTML, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.
<ul> ... </ul>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento N</li>
</ul>
De esa forma podríamos tener el siguiente código HTML:
<ul>
<li>Neurogerencia</li>
<li>Neuromarketing</li>
<li>Neuroética</li>
<li>Neuroeducaciòn</li>
</ul>
Lo que nos mostrará por pantalla:
- Neurogerencia
- Neuromarketing
- Neuroética
- Neuroeducaciòn
Tipos de lista desordenada
Así podemos hacer que la lista esté definida por puntos negros (li type=”disc”), por puntos con el fondo blanco (li type=”circle”) o por cuadrados (li type=”square”). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Pero, este punto se desarrolla al detalle, en la parte 2 de este tema, donde explico los estilos de las listas.
<style type=”text/css”>
ul {
list-style-type: circle;
}
</style>
Las listas de definiciones en HTML nos sirven para montar listas en las que tenemos la estructura valor y definición. Suelen ser listas para definir términos, como si fuese un diccionario, si bien pueden ser cualquier par valor-definición.
Si lo que vamos a hacer es un listado de definiciones, el mismo se construye mediante el elemento <dl>.
<dl> ... </dl>
Dentro del elelemento <dl> tenemos dos elementos anidados, el que representa al valo<dt> y el que representa a la definición<dd> todos ellos con sus correspondientes cierres, es decir,</dl>, </dt> y </dd>, respectivamente.
La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.
La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entenderlo mejor, dentro de <dt> iría el título de la definición.
La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición.
De esta forma la estructura de las listas en HTML de definiciones es la siguiente:
<dl>
<dt>Término1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
...
<dt>Término N</dt>
<dd>Definición N</dd>
</dl>
Por ejemplo, si queremos crear una lista en HTML con definiciones de países y su ubicación geográfica, podemos escribir lo siguiente:
<dl>
<dt>Alemania</dt>
<dd>País de Europa Occidental.</dd>
<dt>Venezuela</dt>
<dd>País de América del Sur.</dd>
<dt>Egipto</dt>
<dd>País del norte de África.</dd>
</dl>
Lo cual nos acabará mostrando por pantalla lo siguiente:
- Alemania
- País de Europa Occidental.
- Venezuela
- País de América del Sur.
- Egipto
- País del norte de África.
Por defecto los navegadores dejan el término y en la siguiente líne, junto con un tabulador, la definición.
Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación.
IR A PORTAFOLIOCuando estemos manejando listas podemos anidar unas en otras independientemente del tipo de lista que estemos anidando.
Para crear listas anidadas en HTML simplemente tenemos que hacer que el elemento de una de las listas sea a su vez una lista. Es decir, el esquema de listas sería parecido al siguiente:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>
<ol>
<li>Elemento 2.1</li>
<li>Elemento 2.2</li>
...
<li>Elemento 2.N</li>
</ol>
</li>
<li>Elemento 3</li>
...
<li>Elemento N</li>
</ul>
En este caso hemos anidado una lista ordenada dentro del tercer elemento li de una lista desordenada.
Hay que tener cuidado de poner el elemento li dentro de la lista anidada, ya que si no lo ponemos estaremos generando un código incorrecto.
Las anidaciones de listas puede ser de cualquier tipo de lista y sin límite de anidación.
Un ejemplo de listas anidadas sería una clasificación de asignaturas como la siguiente:
<ol>
<li>Asignaturas mención Ciencias
<ul>
<li>Física</li>
<li>Química</li>
<li>Matemáticas</li>
<ul>
<li>Aritmética</li>
<li>Älgebra</li>
</ul>
</ul>
</li>
<li>Asignaturas mención Humanidades
<ul>
<li>Filosofía</li>
<li>Lenguaje</li>
<ul>
<li>Gramática</li>
<li>Ortografía</li>
</ul>
</ul>
</li>
<li>Asignaturas mención Comercio
<ul>
<li>Correspondencia</li>
<li>Excel</li>
</ul>
</li>
</ol>
El efecto que obtendríamos sería el siguiente:
- Asignaturas mención Ciencias
- Física
- Química
- Matemáticas
- Aritmética
- Algebra
- Asignaturas mención Humanidades
- Filosofía
- Lenguaje
- Gramática
- Ortografía
- Asignaturas mención Comercio
- Correspondencia
- Excel
