msi

Listas en html

Listas

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos.

Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html se verá como
<ul>
<li>Primer término de la lista
<li>Segundo término
<li>Tercer término
</ul>
  • Primer término de la lista
  • Segundo término
  • Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html se verá como
<ul>
<li type= disc>Primer término de la lista
<ul>
<li>Sublista
<li>Otro elemento
</ul>
<li type=circle>Segundo término
<li type=square>Tercer término
</ul>
  • Primer término de la lista
    • Sublista
    • Otro elemento
  • Segundo término
  • Tercer término

Otro atributo interesante es compact para reducir el espacio entre los elementos

Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

escribimos en html se verá como
<ol type=i>
<li >Primer término de la lista
<li >Segundo término
<li>Tercer término
<li>Cuarto
<li>Quinto
</ol>
  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto
  5. Quinto

Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

 

escribimos en html se verá como
<dl>
<dt >Término 1º
<dd>Definición del elemento 1º
<dt>Término 2º
<dd>Definición del elemento 2º
<dt>Término 3º
<dd>Definición del elemento 3º
</dl>
Término 1º
Definición del elemento 1º
Término 2º
Definición del elemento 2º
Término 3º
Definición del elemento 3º

 


Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis