Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

4. Listas (I)

4.1 Listas no ordenadas.

Tipos de listas

El lenguaje HTML permite escribir listas que permiten describir o enumerar elementos. En concreto podemos escribir tres tipos de listas:

• Listas no ordenadas: Los elementos de la lista no están ordenados y van precedidos por una viñeta (como ésta lista que estás leyendo).
• Listas ordenadas: Los elementos de la lista van precedidos de una numeración, bien sea con números o con letras.
• Listas de definición: Este tipo de listas funcionan como un diccionario: cada elemento consta de dos partes: El término a definir, y su definición.

Listas no ordenadas: sintaxis

Las listas no ordenadas van definidas por viñetas. La lista entera va encerrada dentro de la etiqueta <ul> ... </ul>; dentro de esta etiqueta van los términos de la lista, cada uno de los cuales va delimitado por la etiqueta <li> ... </li>. Veamos un ejemplo:

Código HTML:

<p>paises del cono sur:</p>
<ul>
   <li>Argentina</li>
   <li>Chile</li>
   <li>Paraguay</li>
   <li>Uruguay</li>
</ul>

En el navegador, esta lista la veremos así:

Paises del cono sur

• Argentina
• Chile
• Paraguay
• Uruguay

El navegador muestra por defecto las listas no ordenadas con un pequeño círculo a la derecha. Toda la lista está dentro de las etiquetas <ul> ... </ul>; y cada uno de sus elementos está dentro de la etiqueta <li> ... </li>.

Estilo de listas no ordenadas

Podemos cambiar el estilo de la viñeta que precede a los elementos de la lista mediante el atributo tipe=" " en la etiqueta <ul>. Ejemplo:

<ul type="square"> ..... </ul>

Los elementos de esta ejemplo tendrán una viñeta cuadrada.

Los valores que puede tomar el atributo type, para cambiar el estilo de viñeta son los siguientes:

• disc: Es el valor por defecto. Consiste en un pequeño círculo relleno.

• circle: Consiste en un pequeño círculo con el interior vacío

• square: Consiste en un pequeño cuadrado.

• none: Este valor elimina la viñeta, dejando la lista sin viñetas. No funciona en todos los navegadores, por lo que es más recomendable usar estilo CSS.

También podemos poner el atributo type en las etiquetas <li>, con lo cual en una misma lista podemos conseguir que sus elementos tengan las viñetas distintas.

Sin embargo la forma más habitual de cambiar el estilo de la viñeta es mediante el código CSS. Con CSS, aparte de estos tipos de viñeta podemos poner otros, incluso podemos poner una pequeña imagen como elemento de estilo. Podemos ver esto en el manual de CSS en el apartado dedicado a las listas.

La siguiente página de ejemplo muestra los diferentes tipos de listas que hemos visto hasta ahora:

Ver página de ejemplo

En el siguiente apartado veremos las listas ordenadas.

Listas ordenadas

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com