Hola a tod@s, hoy os hablaré de la creación de listas. Si aún no sabeis nada sobre html echad un vistazo a la guia Conceptos básicos de html y a la de Conceptos básicos sobre el texto en html

En html se pueden crear distintos tipos de listas: desordenadas, ordenadas y de definición.

Las listas desordenadas o en ingles unorderlist se escriben con la etiqueta <ul></ul> y tanto estas como las ordenadas se enumeran con <li>. Son muy fáciles de crear, y no es necesario cerrar la etiqueta li, aunque si se cierra tampoco pasa nada. Veamos un ejemplo:


<p>Lista de la compra:</p>

<ul>

<li>Azucar

<li>Pan

<li>Leche

</ul>

El resultado seria este:

Lista de la compra:

  • Azucar
  • Pan
  • Leche

Si queremos que el tipo de viñeta sea distinto podemos incluir en la etiqueta ul o li el tipo que queremos con type=”tipo”, los tipos distintos son disc, square y circle

Ejemplo:

<p>Lista de la compra:</p>

<ul type=”circle”>

<li>Azucar

<li>Pan

<li>Leche

</ul>

O dentro del elemento de la lista especifico


<ul>

<li type=”square”>Azucar

<li type=”disc”>Pan

<li> Leche

</ul>


Como siempre digo, esto ya va a gusto del consumidor y segun las necesidades.

 

Las listas ordenadas o en ingles orderlist se escriben con la etiqueta <ol></ol> y como pasa con las desordenadas para enumerar los elementos se usa la etiqueta <li> su sintaxis es casi igual solo que éstas llevan numeros:


<p>Pasos para crear un bizcocho</p>

<ol>

<li>Se baten los huevos

<li>Se agrega la mantequilla derretida

<li>Incluimos el azucar

<li>Mezclamos todo bien

<li>Ponemos la harina

</ol>

Pasos para crear un bizcocho

  1. Se baten los huevos
  2. Se agrega la mantequilla derretida
  3. Incluimos el azucar
  4. Mezclamos todo bien
  5. Ponemos la harina

Si quiesieramos cambiar el tipo de numeros o que fuesen letras, solo tendriamos que indicarlo dentro de la etiqueta con el atributo type, como hicimos con las listas desordenadas, solo que en las ordenadas tenemos la opcion de ponerlo en numeros, letras minusculas y mayusculas, y en numeros romanos minusculas o mayusculas. Para cada caso deberiamos poner type=”1″, “a”,”A”,”i” o “I”.

Ejemplo:

<p>Pasos para crear un bizcocho</p>

<ol type=”i”>

<li>Se baten los huevos

<li>Se agrega la mantequilla derretida

<li>Incluimos el azucar

<li>Mezclamos todo bien

<li>Ponemos la harina

</ol>

O como pasaba antes dentro de cada elemento de la lista, en su etiqueta <li>

En este tipo de listas tambien tenemos la posibilidad de empezar desde un numero o letra concreta, solo hay que indicar dentro de la etiqueta mediante start=”numero” dentro del <ol>, sea cual sea el tipo de numeros o letra elegido en la lista deberemos indicarlo con numeros normales (1,2,3,4,5,6…..)


<p>Pasos para crear un bizcocho</p>

<ol start=”6″>

<li>Se baten los huevos

<li>Se agrega la mantequilla derretida

<li>Incluimos el azucar

<li>Mezclamos todo bien

<li>Ponemos la harina

</ol>

Pasos para crear un bizcocho

  1. Se baten los huevos
  2. Se agrega la mantequilla derretida
  3. Incluimos el azucar
  4. Mezclamos todo bien
  5. Ponemos la harina

Las listas por definición  o en ingles definition list se definen con la etiqueta <dl></dl> y para nombrar a los terminos dentro de la lista o  definition term <dt> y a la definicion de estos <dd>. Las etiquetas <dt> y <dd> no es necesario cerrarlas, como pasa con las anteriores listas, veamos un ejemplo:


<p>Traducción al español</p>

<dl>

<dt>Hello

<dd>Hola

<dt>Bye

<dd>Adios

</dl>

Traducción al español

Hello
Hola

Bye
Adios


Hasta aquí las listas, espero que os haya servido de ayuda para vuetras páginas, en las próximas entradas hablaré de formularios, como hacerlos y los distintos tipos.
Un saludo a tod@s

Quizás pueda interesarte

Suscríbete a nuestro boletín

 

 

Política de Privacidad

Revisa tu correo electrónico para finalizar el registro

Advertisment ad adsense adlogger