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í:


      Enero
      Febrero
      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 . Así:

    <ul >

    <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

      Sin bullets

      Y si no queremos bullets (por defecto aparece el redondito negro) pondríamos

      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. 

      Se me vino a la cabeza cuando preparé un esquema del contenido de los alimentos para la guía para aprender a adelgazar de Perfect Body Box ;)

      ¡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 




      Ver imagen

      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 :)


        ¡Gracias por suscribirte! Mil besos, Blanca