estudents photograph




Listas Desordenadas
Supongamos que queremos mostrar en nuestra página web un pedido, por ejemplo una lista de las películas que hemos adquirido recientemente, las que nos gustaría comprar, o quizás es Navidad y nos gustaría realizar una lista con nuestros buenos deseos de todos los años.

HTML tiene unas posibilidades limitadas a la hora del tratamiento del texto. Las listas se usan para citar, numerar y definir cosas. Podemos clasificar las listas en tres tipos:
  1. Listas desordenadas
  2. Listas Ordenadas
  3. Listas de Definición

Listas Desordenadas

Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre.
Veamos un ejemplo:
 <p> Lenguajes en Internet </p>
 <ul>
  <li> Inglés 50%  </li>
  <li> Español 10 %  </li>
  <li> Francés 10%  </li>
 </ul>
Esto nos mostrará:

Lenguajes en Internet

  • Inglés 50%
  • Español 10 %
  • Francés 10%

Atributos de la etiqueta <ul>

La etiqueta <ul> dispone una serie de atributos, con los cuales es posible configurar el aspecto que va a tener la lista.

type="circle / disc / square". Define la viñeta a emplear en la lista. El parámetro tipo puede tomar los valores:
    circle: punto redondeado negro y relleno
    disc: línea círcular
    square: cuadro relleno

Ejemplo (1)
 <p> Lenguajes en Internet  </p>
   <ul type="circle"> 
      <li> Inglés 50%  </li>
      <li> Español 10 %  </li>
      <li> Francés 10%  </li>
  </ul>
Esto nos mostrará:

Lenguajes en Internet

  • Inglés 50%
  • Español 10 %
  • Francés 10%

Ejemplo (2)
 <p> Lenguajes en Internet  </p>
    <ul type="square">
        <li> Inglés 50%  </li>
        <li> Español 10 %  </li>
        <li> Francés 10%  </li>
    </ul>
 
Esto nos mostrará:

Lenguajes en Internet

  • Inglés 50%
  • Español 10 %
  • Francás 10%

Importante: En algunos navegadores no funciona la opcián de cambiar el tipo de viñeta a mostrar y por mucho que lo intentemos, siempre saldrá el redondel negro.

Más atributos: ver los atributos comunes a todo el tipo de listas
< <Anidando Etiquetas Listas Ordenadas > >
2006 Pc Web.es

Este sitio web usa cookies. Puedes ver nuestra política de cookies. Si continúas navegando se considerará que aceptas su uso. CERRAR AVISO