Curso de html. ¿Cómo crear una lista en html? Tipos de listas en html.
Html tiene trés tipos principales de listas: Listas desordenadas , listas ordenadas y listas de definición.
Listas desordenadas en html.
En html se crea una lista desordenada utilizando las etiqueta<ul> junto con las etiquetas <li>.Su síntesis es la siguiente:
<ul>
<li>texto a ordenar</li>
<li>texto a ordenar</li>
<li>texto a ordenar</li>
<li>texto a ordenar</li>
<li>texto a ordenar</li>
</ul>
La etiqueta <ul> indica al navegador que presente el contenido que hay entre las etiquetas <li></li> en forma de lista desordenada. A su vez el navegador por defecto presenta un punto al lado de cada elemento de la lista. Los elementos (por llamarlos de algún modo) de cada lista, aparecen en el mismo orden en el que hemos insertado las etiquetas <li>.
Por ejemplo, si nosotros quisiésemos hacer una lista de los dias de la semana: Lunes,martes,miércoles,jueves,viernes,sábado y domingo, el lunes tendríamos que ponerle entre las etiquetas del primer <li></li> y el domingo en las últimas, de esta manera:
<ul>
<li>lunes
</li>
<li>martes
</li>
<li>miércoles
</li>
<li>jueves
</li>
<li>viernes
</li>
<li>sábado
</li>
<li>domingo
</li>
</ul>
El navegador presentaria la información en pantalla de la siguiente manera:
- lunes
- martes
- miércoles
- jueves
- viernes
- sábado
- domingo
Basta con cambiar la información que hay entre cada etiqueta, para que nos aparezca en el orden deseado, por ejemplo asi:
<ul>
<li>miércoles</li>
<li>martes</li>
<li>sábado</li>
<li>lunes</li>
<li>domingo</li>
<li>jueves</li>
<li>viernes</li>
</ul>
El navegador lo mostraria así:
- miércoles
- martes
- sábado
- lunes
- domingo
- jueves
- viernes
Listas ordenadas en html.
Las listas ordenadas son muy parecidas en síntasis a las no ordenadas o desordenadas, solo difieren en las etiquetas que crean la lista, que ahora son del tipo <ol></ol>.
Se suelen utilizar, cuando se desea hacer una lista con algún tipo de ordenación, ya sea númerica o alfabética, ya que pueden hacerse listas ordenadas del tipo (1,2,3,4… A,B,C,D,… I,II,III,IV… con números romanos), simplemente haciendo una declaración en su estilo, pero esto mejor lo veremos en el curso de css. por defecto el navegador presenta las listas ordenadas con numeros (1,2,3,4,…). Su síntasis es la siguiente:
<ol>
<li>lunes</li>
<li>martes</li>
<li>miércoles</li>
<li>jueves</li>
<li>viernes</li>
<li>sábado</li>
<li>domingo</li>
</ol>
El navegador presentaria así la lista ordenada:
- lunes
- martes
- miércoles
- jueves
- viernes
- sábado
- domingo
Listas de definición en html.
Este tipo de listas se suelen utilizar como su nombre indica en aquellas clasificaciones que contienen definiciones, tipo glosario de términos, por ejemplo un diccionario. Su síntesis es la siguiente:
<dl>
<dt>Término a
definir</dt>
<dd>definición</dd>
<dt>Término a definir</dt>
<dd>definición</dd>
</dl>
Donde <dl> hace la misma función que <ul> ó <ol> en los otros tipos de lista, <dt> contiene el término a definir y <dd> es la definición del término. Se pueden combinar los términos a definir y las definiciones, esto significa que puede haber un término y varias definiciones, o al contrario varios términos y una definición, por ejemplo:
<dl>
<dt>Html</dt>
<dd>HyperText Markup Language (lenguaje de marcado de hipertexto), </dd>
<dd> es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.</dd>
<dt>Paupérrimo</dt>
<dt>Pobre</dt>
<dd>Dicesé de aquel con pocos recursos.</dd>
</dl>
El navegador presentaria esta lista así:
- html
- HyperText Markup Language (lenguaje de marcado de hipertexto).
- Es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.
- Paupérrimo
- Pobre
- Dicesé de aquel con pocos recursos.