Cuando nos enfrentamos a un blog y no tenemos experiencia en programación de ningún tipo nos solemos llevar mas de una sorpresa. Y es que, aunque es cierto que con WordPress puedes tener un blog en pocos minutos y sin saber de programación, no es menos cierto que unos conocimientos básicos de HTML te ayudarán a mejorarlo y personalizarlo, a darle su carácter personal y único.
Es algo que todos descubrimos tarde y temprano, y al final, en los Foros, terminamos por animarnos a «tocar el código».
Pues bien, hay uno de los elementos básicos de edición que, con un conocimiento simple, podemos incorporar algo mas de alegría y personalidad a nuestro blog: las listas.
Por supuesto, puedes crear listas en un post con el editor visual, pero no estoy hablando de eso, sino de hacerlas en nuestra plantilla, incluso en los widgets de texto. Hay muchas situaciones en las que puede que quieras hacer una lista (ordenada o no) y por falta de conocimiento de como hacerlo en HTML terminas recurriendo a plugins, cosa que no es necesaria.
Para crear una lista solo necesitas conocer 3 tags HTML: ul
, ol
y li
.
Las tags ol
y ul
son las etiquetas de apertura de una lista e indican si será ordenada (1, 2, 3, etc) o no, respectivamente. Por otro lado li
es la etiqueta que «encierra» cada elemento de la lista, y se usa en ambos tipos de lista indistintamente.
Todas las tags HTML tienen código de apertura y de cierre, y la única diferencia es que el de cierre lleva una barra «/». De este modo,
abriría una lista ordenada, y para cerrarla pondríamos . Lo mismo se aplica a cualquier etiqueta HTML y es uno de los errores mas corrientes. Márcatelo a fuego.
Volviendo a nuestro tutorial de iniciación, y aplicando lo anterior, hacer una lista es tan sencillo como esto …
Índice de contenidos
Lista Ordenada
El código a utilizar sería algo así:
<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>....</li> </ol>
Y lo que obtienes es esto:
- Primer elemento
- Segundo elemento
- ….
Lista sin orden
El código a utilizar sería algo así:
<ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>....</li> </ul>
Y lo que obtienes es esto:
- Primer elemento
- Segundo elemento
- ….
Como puedes ver es muy sencillo, y te permitirá añadir listas allí donde quieras. Combinando estas tags con las de enlaces o imágenes puedes añadir listas de enlaces, imágenes, casi lo que quieras.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Qué coincidencia, justo hoy por la tarde estuve trabajando en algunos aspectos visuales y técnicos del blog y entre otras cosas barajé la posibilidad de hacer varias listas para los widgets de texto… Tenía alguna duda sobre ello pero ahora ya lo tengo claro… Gracias!!
Hola!!,me esta viniendo de maravilla tu blog,por que tengo recien traspasado mi blog de wordpress al hosting de mi amigo Eduardo y ahora si que puedo meter mano al codigo.Asi que a aprender se ha dicho.Muchas gracias.Un saludo!!
mierda
pedo
….