¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

Como crear listas en HTML

Publicado el 29 julio 2013 por Celia Espada García @ElPerrodePapel

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

<tablealign="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

  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 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.

Un fuerte abrazo,
Celia ♥
He dejado Feedburner ante la posibilidad de que termine desapareciendo como Google Reader, ahora mis actualizaciones se reciben semanalmente a través de MailChimp.
Si aún no te has apuntado para recibir mis novedades en tu correo electrónico, puedes hacerlo desde aquí:
Quiero recibir un correo semanal con las actualizaciones de El Perro de Papel
 

¿Todavía no te has suscrito a mi Super Boletín Mensual?Recibirás información privada y tendrás acceso a nuestro Blog Privado para siempre.

Quiero Suscribirme
¿Te ha gustado esta entrada? ¿Por qué no la compartes en tus Redes Sociales?

Puede que a alguno de tus contactos también le resulte interesante.Muchas gracias ♥