Como crear listas en HTML

Hoy vamos a ver como crear listas numeradas en Blogger. Ya sé que en el panel de creación de entradas Blogger nos da una manera rápida de hacerlas pero hay veces que cuando personalizamos en menú o el widget de redes sociales, nos viene genial saber un poco de qué va el tema.

Lista Sencilla: 

Estas son las predeterminadas por Blogger en su panel de creación de entradas.

a) Numerada:

Vista HTML

<ol>
<li> Primer Párrafo </li>
<li> Segundo Párrafo </li>
<li> Tercer Párrafo </li>
</ol>


Vista Redacción

1. Primer Párrafo
2. Segundo Párrafo
3. Tercer Párrafo

b) Viñetas:

Vista HTML

<ul>
<li> Primer Párrafo </li>
<li> Segundo Párrafo </li>
<li> Tercer Párrafo </li>
</ul>


Vista Redacción

• Primer Párrafo
• Segundo Párrafo
• Tercer Párrafo

Lista de Definiciones:

Vista HTML

<dl>
<dt> Primer Párrafo </dt>
<dd> Primera Definición </dd>
<dt> Segundo Párrafo </dt>
<dd> Segunda Definición </dd>
</dl>


Vista Redacción

Primer Párrafo

Primera Definición

Segundo Párrafo

Segunda Definición

A estas listas podemos aplicar estilos con CSS, pero eso lo veremos más adelante, hoy quiero que veáis como aplicar lo que vimos en la entrada sobre editar textos a este tipo de listas sencillas.

Ejemplo HTML

<ul>

<li><span style="text-decoration: underline overline; color: blue"> Imprescindibles para estas Vacaciones </span></li>

</ul>

<ol>
<li> <span style="border-bottom: 2px dotted pink;"> Toalla de playa molona</span></li>
<li> <span style="border-bottom: 2px dotted green;"> Bikini cuqui comprado ayer</span></li>
<li> <span style="border-bottom: 2px dotted blue;">Mi crema <strike> antiarrugas </strike> para el sol </span></li>
</ol>

<dl>
<dt><span style="color: black; text-shadow: black 0.1em 0.1em 0.2em;">Nota Mental</span></dt>
<dd><marquee>El portátil se queda en casa esta vez</marquee></dd>
</dl>


Vista Redacción

• Imprescindibles para estas Vacaciones

1. Toalla de playa molona
2. Bikini cuqui comprado ayer
3. Mi crema antiarrugas para el sol

Nota Mental

El portátil se queda en casa esta vez

Y si encima añadimos una tabla como vimos en esta entrada... ¿no creéis que queda monísimo? 

Vista HTML

<table align="left" bgcolor="#F6CEE3" border="0" bordercolor="#58ACFA" cellpadding="6" cellspacing="2">

  <tbody>

<tr>

    <td>

<ul>

<li><span style="text-decoration: underline overline; color: blue"> Imprescindibles para estas Vacaciones </span></li>

</ul>

</td>

    </tr>

<tr>

    <td>

<ol>

<li> <span style="border-bottom: 2px dotted pink;"> Toalla de playa molona</span></li>

<li> <span style="border-bottom: 2px dotted green;"> Bikini cuqui comprado ayer</span></li>

<li> <span style="border-bottom: 2px dotted blue;">Mi crema <strike> antiarrugas </strike> para el sol </span></li>

</ol>

</td>

</tr>

<tr>

    <td>

<dl>
<dt><span style="color: black; text-shadow: black 0.1em 0.1em 0.2em;">Nota Mental</span></dt>
<dd><marquee>El portátil se queda en casa esta vez</marquee></dd>
</dl>

</td>

</tr>

</tbody></table>

Vista Redacción

Imprescindibles para estas Vacaciones

Toalla de playa molona Bikini cuqui comprado ayer Mi crema antiarrugas para el sol

Nota Mental El portátil se queda en casa esta vez

Y no os aburro más por hoy, creo que es suficiente con este repasito a lo que llevamos visto. En la próxima entrada sobre programación básica para Bloggers os quiero hablar sobre las opciones de personalización de los videos e imágenes que podemos subir a nuestras entradas.

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥