viernes, 18 de julio de 2014

Como crear una lista con HTML (ul)


Bienvenid@s, hoy veremos como crear una lista con HTML, este elemento se específica a través de la etiqueta "ul" y en su interior agregaremos tantos items o elementos como necesitemos a través de la etique "li".

Veamos un ejemplo, copia y pega el siguiente código en tu documento HTML:

<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
</ul>

Ahora guarda el documento HTML y ve al navegador para verlo:

Como crear una lista con HTML (ul)

Como puedes ver ha sido muy fácil incluir una lista con HTML, cada item viene precedido de un punto, aunque podemos darle otro estilo a través de la propiedad CSS "list-style" por ejemplo en lugar de un círculo le agregaremos un cuadrado:

<ul style="list-style: square;">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
</ul>

Como crear una lista con HTML (ul)



Ok, como podemos ver hemos estilizado la lista, existen otros tanto valores que podemos agregar para darle estilos, e incluso no incluirle ninguno, en lugar de square inclúyele el valor none, verás como ahora no aparece nada.

En la siguiente lista puedes ver todos los valores que puedes utilizar para estilizar los items de la lista:

Como crear una lista con HTML (ul)