Listas I

Vemos lo que son las listas y los tres tipos que hay. Estudiamos las listas desordenadas.

11/10/01 - Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o títulos.

Las listas son utilizadas para citar, numerar y definir objetos. También son utilizadas corrientemente para desplazar el comienzo de línea hacia la derecha.

Podemos distinguir tres tipos de listas:

• Listas desordenadas
• Listas ordenadas
• Listas de definición

Las veremos detenidamente una a una.

Listas desordenadas

Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda así:

<p>Países del mundo</p>
<ul>
    <li>Argentina
    <li>Perú
    <li>Chile
</ul>

El resultado:

Países del mundo

• Argentina
• Perú
• Chile

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta <li> si queremos hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:

<ul type="tipo de viñeta">

donde tipo de viñeta puede ser uno de los siguientes:

circle
disc
square

Nota: En algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar y por mucho que nos empeñemos, siempre saldrá el redondel negro. En caso de que no funcione siempre podemos construir la lista a mano con la viñeta que queramos utilizando las tablas de HTML. Veremos más adelante cómo trabajar con tablas.

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectará a todos los elementos de la lista.

<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>

Que tiene como resultado

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4

+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario no revisado

Autoría, licencia y acciones sobre este artículo

Informe de Rubén Alvarez* Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Manuales de HTML

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba