El Signo

Código para hacer listas en HTML

mayo 14th, 2010 · 1 Comentario · Tutoriales

Aunque casi todos los CMS como por ejemplo WordPress o Blogger permiten hacer listas mediante un click en un botón en la barra de edición de entradas, nunca está de más saber su estructura, que es bien simple, y los distintos valores que podemos asignar a sus atributos para tener un total control sobre estas etiquetas HTML. Las listas HTML serían lo que son “Numeración y viñetas” en los procesadores de texto.

Listas no ordenadas.

Etiqueta: <ul></ul>
Elemento: <li></li>
Atributo: type=

Para comenzar siempre debe indicarse que comienza una lista mediante <ul> y para finalizar </ul>. Si no indicamos el atributo type por defecto la lista se mostrará con un círculo relleno. Lo más común es que dicho atributo se le asigne a la lista pero también se le puede añadir a cada elemento en particular. La etiqueta <li> que indica un nuevo elemento en la lista. Con el atributo “type” se indica que viñeta debe visualizarse pudiendo ser un círculo vacío, un cuadrado relleno o un círculo relleno.
Atributo type=: “circle”, “disc” o “square”

Ejemplo:

<ul type=”disc”>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ul>

Resultado:

  • Manzanas
  • Naranjas
  • Peras

Listas ordenadas.

Etiqueta: <ol></ol>
Elemento: <li></li>
Atributo: type=
Atributo: value=
Atributo: start=

Es más amplio lo que puede hacerse con las listas ordenadas ya que tiene tres atributos. El atributo start es utilizado para los elementos, mientras que type y value para la lista.

Atributo type: define el tipo de lista ordenada y sus valores pueden ser “I” para que la numeración sea de números romanos en mayúscula; “i” números romanos en minúscula; “A” o “a” para obtener ordenamiento alfabético; “1″ para numeración con números.

Atributo value: establece a partir de que valor comienza la lista. Su valor sólo puede ser numérico; Ej.: value=”4″ como resultado la el primer elemento de la lista será “4.”. Puede utilizarse conjuntamente con el atributo type en la etiqueta de la lista <ol>.

Atributo start: su valor sólo puede ser numérico. Al utilizarlo al comienzo de la lista se asume que la misma es del tipo numérica y sirve para indicar a partir de que número se empieza. No es combinable con los otros atributos.

Algunos ejemplos:

<ol type=”A” start=”1″>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>

Resultado:

  1. Manzanas
  2. Naranjas
  3. Peras

<ol type=”I”>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>

Resultado:

  1. Manzanas
  2. Naranjas
  3. Peras

<ol>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>

Resultado:

  1. Manzanas
  2. Naranjas
  3. Peras

Las listas pueden anidarse, lo que implica simplemente crear otra lista dentro de una lista. Hay otro tipo de lista, la llamada lista de definición <dl> que no se usa casi nunca pero vale mencionarla.

Para practicar un editor HMTL online que recomiendo: http://www.it.uc3m.es/~amillares/editor/

Por ejemplo ingresa a esa página y copia y pega lo siguiente:

<HTML>
<ol type=”I” start=”5″>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
</HTML>

Y presiona el botón “Submit” para ver el resultado.

Bookmark and Share
Leído 3.559 veces

Etiquetas: ··

 

Entradas Relacionadas

 

One Comment hasta ahora ↓