13/7/15

Aprende a sacar más partido a las listas o bullets en blogger con html

Sabéis que tengo pendiente sacar un curso de html y css, porque si bien habrá cientos, los que yo he visto no están muy bien explicados. O  yo soy muy boba, que también puede ser, pero si antes de saber yo, me lo hubiesen explicado así, me habría quedado igual...

Yo misma traté de seguir uno hace tiempo y además se me hacía tan tostón, que lo dejé a la segunda lección jaja, viva mi disciplina. Al final he aprendido por mi cuenta (como el inglés, porque lo que aprendí en el cole no es que fuera muy útil... ;) pero me hubiese ahorrado muuucho tiempo, y muuuuchas horas, de haber encontrado un curso bueno.

Aún así y hasta que mi curso comience, unas mini nociones básicas para las que no lo sepan ya, para poder explicar las listas.


Y es que las listas son muy útiles para explicar cosas, hacer esquemas y demás, y en blogger además tenemos la opción de poner bullets y números, pero nada más, y si queremos un esquema algo más complicadete, se nos queda pelín corto.

Entonces, poco a poco...

1. Las etiquetas

Sabéis que en html todo tiene una etiqueta al comienzo y otra al final. Una es la de apertura y otra la de cierre. Su estructura es así:

<apertura>
</cierre>

Dependiendo qué etiqueta le pongamos, será una cosa u otra. Por ejemplo, para poner algo en negrita, la etiqueta tiene una b (de bold, negrita en inglés). Por tanto las etiquetas son:

apertura: <b>
cierre: </b>

¿Qué significa apertura y cierre?

Que aplicará esto a lo que haya dentro.

Así, si escribimos en html <b>hola</b>, luego en la web se verá hola

Por supuesto, estas etiquetas se pueden combinar y anidar. Si por ejemplo queremos poner algo en cursiva, las etiquetas serían <i> y </i>, pues cursiva en inglés se dice italics.

Si quiero escribir hola en negrita y cursiva, puedo poner:

<b><i>hola<i></b>

Poner eso y esto es lo mismo:

<b>
<i>
hola
</i>
</b>

Aquí no tendría sentido escribirlo así, pero os digo esto para que lo comprendáis ahora con las listas :)

2. Etiquetas para listas

¿Cuáles son las etiquetas para poner algo en un listado? Pues dependiendo si son bullets sin más o si lleva un orden (1, 2, 3... a, b, c... i, ii, iii...) tienen une etiqueta u otra.

Para los bullets:

<ul> y </ul>

ul viene de unordered list (lista no ordenada)

Y para las listas con un orden específico:

<ol> y </ol>

ol sería ordered list (lista ordenada)

Y obviamente, lo que va en la lista debe ir ahí dentro.

Ahora bien, esa es la etiqueta, por así decirlo, del conjunto. Pero luego cada línea que queramos poner en el listado, debe llevar otra etiqueta, que sería <li> (de list imagino, porque es un elemento que está listado).

Ejemplo:

<ul>
<li>Enero</li>
<li>Febrero</li>
<li>Marzo</li>
<ul>

Quedaría así:
  • Enero
  • Febrero
  • Marzo
Y si le hubiésemos puesto <ol> en lugar de <ul>, entonces quedaría así:
  1. Enero
  2. Febrero
  3. Marzo
3. Cosas que podemos hacer

Por supuesto, esto nos lo deja hacer blogger, pero yo creo que alguna vez he usado en el blog algún truco de cosas que no nos dejaba hacer y simplemente la he creado en html (cambiando la vista al redactar el post, a la pestaña de HTML)

Comenzamos:

1. Cambiar los números por otros sistemas de orden: 

En html podemos añadir una orden extra dentro de una etiqueta. Se la añadimos en la de apertura, poniendo un espacio tras su nombre (a veces una letra o dos letras).

Entonces, si queremos ordenar la lista con a, b, c... en lugar de 1, 2, 3..., añadiríamos type="a" tras <ol

Así:

<ol type="a">
<li>Enero</li>
<li>Febrero</li>
<li>Marzo</li>
</ol>

Y nos quedaría así:
  1. Enero
  2. Febrero
  3. Marzo
Y lo mismo si queremos A, B, C... o i, ii, iii... o I, II, III...

Los atributos a añadir dentro de su etiqueta correspondiente serían:

type="a"
type="A"
type="i"
type="I"

type="1" se podría poner pero no hace falta porque se enumeran en orden por defecto.

2. Cambiar los bullets estándar por otros bullets:

Igual que podemos cambiar los números por otros sistemas de ordenación, también podemos cambiar los bullets por otros dibujitos.

Bullets redonditos sin rellenar

Deberíamos definir el estilo poniendo style="list-style-type:circle" . Así:

<ul style="list-style-type:circle">
<li>Enero</li>
<li>Febrero</li>
<li>Marzo</li>
<ul>


Y nos quedaría así:
  • Enero
  • Febrero
  • Marzo
Bullets cuadrados

Para bullets cuadrados pondríamos style="list-style-type:square"

Sin bullets

Y si no queremos bullets (por defecto aparece el redondito negro) pondríamos style="list-style-type:none"

3. Comenzar una lista por el número que queramos

Imaginaos que quiero explicaros las lecciones de un curso mío que estoy sacando a la venta. Y digo:

La primera semana veremos qué es y para qué sirve el html y css:

1. Qué es el html
2. Qué es el css
3. Dónde escribo en html
4. Dónde escribo en css

La siguiente semana veremos no sé qué no sé cuál:

5. Lección cinco aquí
6. Lección seis aquí
7. Más de lo mismo

Como veis no voy a poner delante de la lección 5 un 1 de nuevo, pero queda mejor quizá espaciarlo por semanas.

¿Cómo lo arreglamos? Añadiendole dentro de la etiqueta ol start="5".

O bueno, sustituyendo el 5 por el número en que queráis que comience vuestra lista.

4. Listas indentadas

Si queremos poder poner sublistas, aunque podemos hacerlo en html, realmente se puede hacer desde el propio editor, solo que mucha gente no lo sabe ;)

Entonces, hacemos nuestra lista toda seguida y le ponemos los bullets. Y cuando la tenemos, nos ponemos delante de las que queremos que sean un nivel menor, y le damos al tabulador. Nos quedará así:

  • Bloggers de moda
    • Lovely Pepa
    • Chiara Ferragni
  • Bloggers de cocina
    • La receta de la felicidad
    • Jamie Oliver
  • Bloggers de manualidades
    • Facil y sencillo
    • Pepita la de los palotes

Podemos hacer más niveles que estos, no solamente dos. 

Y creo que eso es todo. 

Cositas que seguro que son útiles si necesitáis hacer un esquema. 

¡Espero que os haya gustado!

Pineadlo o guardarlo donde queráis para no perderlo de vista, que es lo típico que ahora lo leéis y luego se os olvida, y cuando lo necesitáis, no sabéis donde lo habíais visto ;)

Muaah 
Blogger | Email  | RSS Bloglovin' | Feedly 

Posdata: 

Chicas, si os vais de viaje dentro de poquito, os recomiendo comprar Cómo ganar dinero con tu blog y Cómo promocionar tu blog si es que no los tenéis ya. Son lecturas amenas, lo prometo (o eso me han dicho, vamos) y podéis imprimir y llevar a la playa. Subrayador o boli en mano... y a aprender.

Sabemos ya que septiembre es el nuevo enero jaja, vendréis todas con las pilas cargadas queriendo hacer cositas y mejorar y dar un empujón a vuestro blog, y si tenéis ya las bases, os resultará mucho más fácil, porque podréis poner el turbo directitas. Conocer todo lo que en esos dos cursos vemos es fundamental para saber hacia donde tirar en lugar de dar palos de ciego, pues a veces, si no conseguimos lo que queremos, nos frustramos, y quizá es solo necesitabais una guía que os ayudara :)
    Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

    15 comentarios

    1. Madre mía, me has leído la mente. Justo ayer de noche me daba problemas el editor con esto mismo. Lo malo es que yo soy wordpress. Probaré a ver si también vale y te cuento por si alguien está en las mismas que yo.

      Un beso!

      ResponderEliminar
    2. Este comentario ha sido eliminado por el autor.

      ResponderEliminar
    3. Muchas gracias, Blanca, lo del código HTML siempre da un poco de miedo a la hora de modificarse. Espero que tu curso sea más claro que los que hay en venta de momento.
      (por si acaso quieres una hamaca para relajarte, ya sabes: www.relax-hamac.com)

      ResponderEliminar
    4. Hola Blanca,
      Mil gracias por tus tutoriales, como siempre son súper útiles y nos facilitan la vida a las que estamos empezando. Te sigo desde hace tiempo y he hecho varios de tus cursos pero hasta ahora no me había animado a dejar un comentario. En cuanto saques el curso de html me apunto porque entender porqué se pone cada cosa es mucho más útil que copiar algo que no sabes muy bien que significa.
      Saludos,
      María

      ResponderEliminar
    5. Lo de circulitos me ha gustado, no soy muy de listas numericas, pero viene bien saber los detalles.
      Muchas gracias, creo que es un tutorial mas facil de todos)
      Un saludo.

      ResponderEliminar
      Respuestas
      1. ENCUENTRA EL 9 Y TE BESARAN MAÑANA: 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666966666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 en cuentra el cinco y seras llamado por tu amor: 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222522 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 22222222222 realiza la cuenta de atras: 10 9 8 7 6 5 4 3 2 1 0.......cierra los ojos y pide un deseo AHORA;;;;;;;;;; pega esto en 15 comentarios diferentes y tu deseo se hara realidad.Date prisa o lo que tu pediste seria lo contrario tienes 40 minutos y dale Me gusta

        Eliminar
    6. Blanca, por alguna extraña razón pensé que este blog no seguía activo, sorry! Qué bueno que sigues aqui. te envié un correo ayer por esta razon.

      Abrazos!

      ResponderEliminar
    7. Más claro, imposible. Tu post le dio forma concreta a una intuición. Ayer, cuando miraba mi barra superior para agregar enlaces, intuía que esas etiquetas estaba en ese orden por algo y pude añadir más enlaces pero a puro golpe de suerte. Como lo mío son las estrategias de escritura...de html, poco y nada. Voy a seguir con atención cada lección y seguramente me animo al curso.

      ResponderEliminar
      Respuestas
      1. ENCUENTRA EL 9 Y TE BESARAN MAÑANA: 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666966666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 en cuentra el cinco y seras llamado por tu amor: 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222522 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 22222222222 realiza la cuenta de atras: 10 9 8 7 6 5 4 3 2 1 0.......cierra los ojos y pide un deseo AHORA;;;;;;;;;; pega esto en 15 comentarios diferentes y tu deseo se hara realidad.Date prisa o lo que tu pediste seria lo contrario tienes 40 minutos y dale Me gusta

        Eliminar
    8. Respuestas
      1. ENCUENTRA EL 9 Y TE BESARAN MAÑANA: 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666966666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 en cuentra el cinco y seras llamado por tu amor: 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222522 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 22222222222 realiza la cuenta de atras: 10 9 8 7 6 5 4 3 2 1 0.......cierra los ojos y pide un deseo AHORA;;;;;;;;;; pega esto en 15 comentarios diferentes y tu deseo se hara realidad.Date prisa o lo que tu pediste seria lo contrario tienes 40 minutos y dale Me gusta

        Eliminar
    9. Muchas gracias, lo de comenzar la lista por un número distinto al 1, me viene de perlas. Por cierto, en uno de lis primeros ejemplos la etiqueta de cierre está mal. Concretamente la de cursiva. Un abrazo.

      ResponderEliminar
      Respuestas
      1. ENCUENTRA EL 9 Y TE BESARAN MAÑANA: 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666966666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 666666666666666 en cuentra el cinco y seras llamado por tu amor: 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222522 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 222222222222222 22222222222 realiza la cuenta de atras: 10 9 8 7 6 5 4 3 2 1 0.......cierra los ojos y pide un deseo AHORA;;;;;;;;;; pega esto en 15 comentarios diferentes y tu deseo se hara realidad.Date prisa o lo que tu pediste seria lo contrario tienes 40 minutos y dale Me gusta

        Eliminar

    © Personalización de Blogs. Diseño: Eve y Blanca.