Here I bring you a "super boring" post of codes that I use in my publications. Some people have told me that they liked the way I shape the texts and the format in which I present them with the images, more specifically in the poems.

I want to tell you that I am neither a web programmer nor an experienced web editor, but I managed a blog several years ago and most of all I "played" with the html codes of the templates I was finding and as if they were laymen I was testing and building the articles I published.

You get a lot of helpful material on the Internet, you just have to learn how to search and you can get a lot of things.

Here I will reveal the "magic" behind my publications. I didn't invent warm water but let's just say I found a combination that many XDs like, the html code I present to them already existed, only "playing" with it I found the way it worked the way I'm going to present it.

Text on one side and image on the other

In html there is a code that allows us to put an element on one side of a space or on the other side either left or right and on the other side will be placed the text or next element that we place, although for the case of images depends on their size because if the 2 images do not fit into that width of space the second one will be placed underneath and not next to it.

Example of image on the left and text on the right:

Code with highlighted elements:

Code for you to copy:
<div class="pull-left">
<center>image link
<a href="link to the page where we get the image"><strong>Origin</strong></a></center>
</div>
The paragraph to be placed to the right of the image must be placed immediately after the code in the same way as this sample.

If you want the image to be to the right you only have to change the yellow part that says left to right, the size of the image should be less than 300 pixels wide so that it is of a size that allows you to have the same size as the text and image. If you don't know how to edit images, it's time to learn. The code includes the commands to place the link where we have taken the image but if we do not want it we delete the code that goes from<a to the following > and the command <strong>.

---

You can see the above in many posts, there is nothing new in it but I wanted to put it in case you didn't know it.

---

The two columns

Already knowing which is the code that allows us to put an image on one side and the text on the other we can make the two columns that is no more than two images that must be narrow (less than 170 pixels wide each) so that there is space in between for the text. This effect is achieved by placing the code twice in a row but in one of them we configure it to be placed to the right and the other to the left, if we do everything right the text we write in the next line of the code of the columns will be placed in the middle.

Example of two images on the sides of the text in the form of columns:

Code with highlighted elements:

Code for you to copy:
<div class="pull-left">image link-column
</div>
<div class="pull-right"> link of the image-column
</div>
The paragraph to be placed to the right of the image must be placed immediately after the code in the same way as this sample.

The variations they can make are in the text that follows the codes in the columns to center or justify the text they already know. You should note that before these codes you must put a cover image or you will have the first cover column image left.
I have also been asked that where I get the images of columns because google._., we must learn to use text editors because the image must be edited so that it has the transparent background, the appropriate width and height too, the latter will depend on how much text we are going to put in between and our creativity. I use Gimp which is an image editor like photoshop but open source.

Two paragraph columns

This type of format can also be useful for you, again I didn't invent it myself but I give you the code and some tips so you can give it a different look. It consists of the same code that puts an element to the right or left of an element, but this time it is only text that we are going to put into the code, the text that we want to put to the left in the code on the left and so on, be careful, a code for the left and another for the right not one for each paragraph ok.

Example of text with two centered columns:

Code with highlighted elements:

Code for you to copy:
<div class="text-center">
<div class="pull-left">
Paragraphs on the left with centered formatting
</div>
<div class="pull-right"><i>
Paragraphs on the right with centered formatting and italics
</i></div>
The code <div class="text-center"> is highlighted in green and will give the two columns their centered character. Therefore, you should go before the code that will give the location to the side in the form of a column, if you want it justified put justify instead of center, in the second column the text is in italics thanks to the code in bright blue <i>text</i>, this must be within the code that frames the column in specific as shown, take a look at other text formatting codes in html HERE. The separators I put in there should go between each paragraph and be of a suitable size so that it doesn't get all messed up (about 250 pixels wide) and if you want it not to get so pasted place the link to the image in the following way <p>link-of-image</p>, so I did.

---

Source of the images:Cover page, the magician, monitors, final magician "edited", the rest of the images are screenshots of my other posts. This post is a translation of the original of my property: https://steemit.com/spanish/@megaela/como-hacer-pilares-y-texto-a-dos-columnas-mis-codigos-de-formato-de-publicaciones

---

---