Gracias a la multitud de herramientas que existen en Internet (gratuitas y de pago) hoy en día resulta muy sencillo crear blogs y webs sin tener apenas conocimientos informáticos. No obstante el abuso en el uso de plantillas y recursos estándar para crear estos sitios acaba por generar páginas casi clónicas, sin gancho ni energía.
El contenido es importante a la hora de redactar entradas en un blog, pero la manera de presentarlo muchas veces marca la diferencia entre un buen blog y un blog excelente. Los sutiles cambios en el diseño pueden dirigir las miradas de un sitio a otro, provocar que más personas hagan click en un enlace, leer con más interés un artículo o simplemente hacer más agradable la lectura y por ende, ayudar a que el contenido se fije mejor en la mente de los usuarios.
Siendo el HTML el corazón de toda página web, es extremadamente útil conocer cómo funciona y saber cambiar ciertas cosas para que la personalización sea máxima. En muchas ocasiones no es más que aumentar unos pocos píxeles una línea o darle color a un borde concreto, pero esos pequeños detalles son los que importan. Pese a que se puede conseguir un nivel muy alto con las herramientas que actualmente nos brinda la web, es conveniente saber lo que estamos haciendo para poder mejorarlo al máximo. Aquí van algunos consejos para mejorar tus posts con HTML básico.
Tablas sencillas con datos e imágenes
Las tablas son un recurso muy utilizado para listar elementos de una manera ordenada y fácil. Para empezar solo necesitamos la siguiente etiqueta:
<table>
</table>
Recuerda que debes escribir esa etiqueta dentro de <body> para que todo vaya como la seda.
Una vez tengamos abierta esa etiqueta podemos introducir una cabecera y también el cuerpo de la tabla donde haremos las celdas
<thead>
</thead>
<tbody>
</tbody>
A continuación tenemos que hacer las celdas que necesitamos. Para ello usaremos las etiquetas
<td>
para las celdas y
<tr>
para las filas
Después solo queda añadir el contenido, en este caso texto y alguna imagen (para lo que usaremos la etiqueta img src )
<table>
<tbody>
<tr>
<td>Flores</td>
<td>Amarillo</td>
<td>Rojo</td>
</tr>
<tr>
<td>Rosa</td>
<td><img src=»https://p1.pkcdn.com/rosa-amarilla-1252930.jpg«></td>
<td><img src=»https://lesidea.com/laislasolitaria/wp-content/uploads/2010/05/rosaroja-150×150.jpg«></td>
</tr>
<tr>
<td>Tulipán</td>
<td><img src=»https://clauprobando.hol.es/wp-content/uploads/2015/05/tulipan-amarillo-150×150.jpg«</td>
<td><img src=»https://www.mandarsaludos.com/wp-content/uploads/2012/06/tulipanes-fotos-150×150.jpg«</td>
</tr>
</tbody>
</table>
Después de guardar el html, el resultado es este:
| Flores | Amarillas | Rojas |
| Rosas |  |  |
| Tulipanes |  |  |
Listas de tareas ordenadas
Ésta es una opción muy básica que casi todos los editores incluyen. Esta herramienta es especialmente útil por ejemplo para enumerar las ventajas de un producto, destacar las características de un servicio o incluso para hacer más claras las explicaciones, poniendo cada paso de manera ordenada.
Hay listas de puntos donde todos los elementos tienen la misma importancia, y listas ordenadas, para cuando es necesario que haya cierta jerarquía.
Para crear una lista normal de puntos (no ordenada) se usa la etiqueta
<ul>
A partir de ahí se usa
<li>
para marcar cada uno de los puntos
Por ejemplo esta lista de flores:
- Crisantemo
- Camelia
- Pensamiento
- Geranios
- Lirios
- Lavanda
La lista quedaría así:
<ul>
<li>Crisantemo</li>
<li>Camelia</li>
<li>Pensamiento</li>
<li>Geranios</li>
<li>Lirios</li>
<li>Lavanda</li>
</ul>
¿Y si necesitamos usar ambas? En ese caso solo hay que tener cuidado con el orden en que se usan las etiquetas. Para hacer una lista que contenga otra lista, primero se abre la etiqueta de lista (en este caso <ol>) para indicar que queremos un tipo de lista ordenado. Después, y siempre antes de cerrar la lista con el </ol>, usaremos las etiquetas que necesitemos, en nuestro caso abriendo una lista no ordenada con <ul> y marcando cada uno de los puntos con <li>.
Teniendo cuidado, nuestra lista quedaría de la siguiente manera:
- Flores de verano
- Geranio
- Lirio
- Lavanda
- Flores de invierno
- Crisantemo
- Camelia
- Pensamiento
Y en modo HTML se vería así:
<ol>
<li>Flores de verano
<ul>
<li>Geranio</li>
<li>Lirio</li>
<li>Lavanda</li>
</ul>
</li>
<li>Flores de invierno
<ul>
<li>Crisantemo</li>
<li>Camelia</li>
<li>Pensamiento</li>
</ul>
</li>
</ol>
Dale un toque de color a tus textos
Muchos editores ofrecen la opción de controlar el tamaño, la fuente y el color del texto, pero a menudo es necesario controlar estos elementos de manera más directa, a través del HTML.
Para poder hacer cambios en el texto sin recurrir al editor se usará la etiqueta <style>
Por ejemplo si el texto que queremos resaltar está en un párrafo normal ( <p> ), usaremos la siguiente línea:
<p style=» … «>
En la zona de los puntos suspensivos introduciremos la etiqueta correspondiente a lo que queramos modificar:
Tamaño de fuente: font-size
Color de fuente: color
Tipografía: font-family
De esta manera podemos convertir un texto y darle las características que queramos usando el style de cada elemento. Por ejemplo resaltar la siguiente frase en verde, letra Courier y 15px de tamaño:
La entropía es inexorable
Añadiendo la siguiente línea
<p style=»font-size: 30px; color: green; font-family: courier;»>La entropía es inexorable</p>
Este es el resultado:
La entropía es inexorable
Son trucos sencillos que pueden ayudarnos a personalizar un texto a nuestro gusto, sin necesidad de depender de las herramientas que el editor de turno nos deje usar. Con el tiempo este tipo de cambios se hacen con más comodidad con el HTML ya que se mantiene el control de una manera más efectiva sobre el resultado final.
