En este post veremos otra forma de mostrar contenido de una forma estructurada en nuestra página web. Para ello utilizaremos listas.
Veremos cómo crear listas y las diferentes opciones que nos llevan, así como ver como se utilizan en aplicaciones modernas de hoy en día. En nuestro ejemplo, como podéis ver en el vídeo, realizaremos la receta de un tartar de salmón.
Índice
1 – Tipos de listas
Disponemos de tres tipos de litas en HTML,
1.1 – Lista desordenada
Contiene ítems como puede ser texto, enlaces o incluso imagen, la cual la idea principal es asociarlas en conjunto pero que nos da igual el orden.
1.2 – Lista ordenada
El concepto es similar al anterior, pero en este caso, si nos importa el orden de los elementos que contiene la lista.
1.3 – Listas descriptivas.
En este caso la lista contendrá dos valores, como un diccionario con “índice” y “valor”
2 - Creación de una lista desordenada
Para crear una lista desordenada, debemos utilizar la etiqueta <ul> </ul> la cual contendrá los elementos de la lista, y cada uno de estos elementos se define con la etiqueta <li></li>
<h2>Ingredientes</h2>
<ul>
<li>400g de salmón cortados en dados</li>
<li>4 aguacates</li>
<li>2 cebollas</li>
<li>2 cucharadas de aceite de oliva virgen extra</li>
<li>1 limon</li>
<li>sal y pimienta</li>
<li>Sesamo</li>
</ul>Como sabemos podemos cambiar el indicador de que es una lista, esto en Word se hace, eligiendo una bola, o una flecha, etc. Esta acción se puede realizar tanto sobre la etiqueta <ul> o sobre los <li> que queramos modificar, para ello, iniciaremos una propiedad CSS llamada list-stlyle-type a la cual le podemos indicar los valores disc que nos indicara el punto negro, circle que es un circulo sin relleno o square que es un cuadrado. También disponemos de la opción none el cual no mostrara nada.
<style>
ul{
list-style-type: square;
}
</style>3 – Creación de una lista ordenada
Para crear una lista ordenada será similar a la anterior, la diferencia es que en este caso iniciamos la lista con <ol></ol> y para sus elementos utilizamos <li></li>
<h2>Instrucciones</h2>
<ol>
<li>cortar el samlon y el aguacate en dados</li>
<li>cortar las cebollas en tiras de medio centimetro</li>
<li>Mezclar el aguacate con la cebolla y unas gotas de limon exprimido</li>
<li>mezclar el salmon con la cebolla</li>
<li>sal al gusto</li>
<li>Montar por capas abajo el aguacate y arriba el salmon</li>
<li>Servir</li>
</ol>Como en el ejemplo anterior en este caso también podemos cambiar el elemento que indica la lista, en este caso lo indicaremos con el atributo type.
Disponemos de múltiples opciones, como son type=”1” nos mostrara números. Type=”a” nos mostrara letras en minúscula. Type=”A” letras en mayúscula y finalmente type=”I” en números romanos
Disponemos también del atributo start el cual nos permite indicar en que número va a empezar a contar esa lista.
<ol type="1" start="20">
....
</ol>4 – Creación de una lista descriptiva.
Como hemos indicado antes, una lista descriptiva con tiene dos elementos, un término y una descripción.
Para crear una lista descriptiva en este caso lo hacemos con la etiqueta <dl></dl> y dentro de estas etiquetas indicamos <dt> </dt> para el término que vamos a explicar y <dd></dd> para su descripción.
<h3>Diferenciar buenos elementos</h3>
<dl>
<dt>Aguacates</dt>
<dd>para que un aguacate este bueno, debe estar maduro</dd>
<dt>Salmon</dt>
<dd>Si el salmon esta malo, estara azul</dd>
</dl>
