Thanks to the multitude of tools that exist on the Internet (free and paid) nowadays it is very easy to create blogs and websites with little or no computer knowledge. However the abuse in the use of templates and standard resources to create these sites ends up generating almost cloned pages, without hook or energy.
Content is important when writing blog posts, but the way it is presented often makes the difference between a good blog and an excellent blog. Subtle changes in the design can direct the eyes from one site to another, cause more people to click on a link, make an article more interesting to read or simply make it more pleasant to read and therefore help the content to be better fixed in the users’ minds.
HTML being the heart of every web page, it is extremely useful to know how it works and to know how to change certain things for maximum customization. In many occasions it is nothing more than increasing a few pixels a line or coloring a specific border, but those small details are the ones that matter. Although a very high level can be achieved with the tools that the web currently offers us, it is convenient to know what we are doing to be able to improve it to the maximum. Here are some tips to improve your posts with basic HTML.
Simple tables with data and images
Tables are a widely used resource to list elements in an orderly and easy way. To start we only need the following tag:
<table>
</table>
Remember to write that tag inside <body> so that everything runs smoothly.
Once we have this label open, we can enter a header and also the body of the table where we will make the cells.
<thead>
</thead>
<tbody>
< /tbody >
Next we have to make the cells we need. To do this we will use the tags
<td>
for cells y
<tr>
for rows
Then we only have to add the content, in this case text and an image (for which we will use the img src tag).
<table>
<tbody>
<tr>
<td>Flowers</td>
<td>Yellow</td>
<td>Red</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</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>
After saving the html, the result looks like this:
| Flowers | Yellow | Red |
| Roses |  |
 |
| Tulips |  |
 |
Ordered task lists
This is a very basic option that almost all editors include. This tool is especially useful for example to list the advantages of a product, highlight the features of a service or even to make explanations clearer by putting each step in an orderly manner.
There are bulleted lists where all items are of equal importance, and ordered lists, for when a certain hierarchy is required.
To create a normal (unordered) bulleted list, use the tag
<ul>
From there you can use
<li>
to mark each of the points
For example this list of flowers:
- Chrysanthemum
- Camellia
- Thinking
- Geraniums
- Lilies
- Lavender
The list would look like this:
<ul>
<li>Chrysanthemum</li>
<li>Camellia</li>
<li>Thought</li>
<li>Geraniums</li>
<li>Lirios</li>
<li>Lavender</li>
</ul>
What if we need to use both? In that case you just have to be careful with the order in which you use the tags. To make a list that contains another list, you first open the list tag (in this case <ol>) to indicate that we want an ordered list type. Then, and always before closing the list with the </ol>we will use the tags we need, in our case opening an unordered list with <ul> and marking each of the points with <li>.
Taking care, our list would look as follows:
- Summer flowers
- Geranium
- Lily
- Lavender
- Winter flowers
- Chrysanthemum
- Camellia
- Thinking
And in HTML mode it would look like this:
<ol>
<li>Summer flowers
<ul>
<li>Geranium</li>
<li>Lirio</li>
<li>Lavender</li>
</ul>
</li>
<li>Winter flowers
<ul>
<li>Chrysanthemum</li>
<li>Camellia</li>
<li>Thought</li>
</ul>
</li>
</ol>
Add a touch of color to your texts
Many editors offer the option to control text size, font and color, but it is often necessary to control these elements more directly, through HTML.
In order to make changes in the text without using the editor, the tag <style will be used.>
For example, if the text we want to highlight is in a normal paragraph ( <p> ), we will use the following line:
<p style=” … “>
In the area with the ellipses points we will introduce the label corresponding to what we want to modify:
Font size: font-size
Font color: color
Typography: font-family
In this way we can convert a text and give it the characteristics we want using the style of each element. For example highlight the following sentence in green, Courier font and 15px size:
Entropy is inexorable
Adding the following line.
<p style=”font-size: 30px; color: green; font-family: courier;”>Entropy is inexorable< /p >
This is the result:
Entropy is inexorable
These are simple tricks that can help us to customize a text to our liking, without having to depend on the tools that the editor of the day lets us use. Over time, these types of changes are made more comfortably with HTML, since control over the final result is maintained in a more effective way.
