Como crear listas en HTML

julio 29, 2013

Como crear tablas en HTML para Bloggers



















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






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 ♥






Te encantará:

2 pensamientos ¡falta el tuyo! ;)



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.