To read this post I recommend a notebook and rest every three sections.

Para leer esta publicación, recomiendo un cuaderno y descanso cada tres secciones.

A. Titles/ Header

Headers or Titles are written that way:

<h1>Title</h1>

<h2>Title</h2>

<h3>Title</h3>

<h4>Title</h4>

And it looks this way:

Title

Title

Title

Title

B, C and D. Text align to the left, to the right and text centered

B. The Text align to the left is written this way:

<div class="text-left>This text is align to the left</div>

And it looks this way:

<div class="text-right>This text is align to the right</div>

And it looks this way:

<div class="text-left>This text is align to the left</div>

And it looks this way:

E. Bold text

The bold Text is written this way:

**text**

And it looks this way:

text

F. Italic text

The Italic Text is written this way:

_text_

And it looks this way:

text

G. The line through text

The line through text is written this way:

~~text~~

And it looks this way:

text

H. The code box (or at least this how I called it)

The code box text is written this way:

<code>Text</code>

And it looks this way:

text

In this way:

<center>All this text has been written between those grave accents 👉`` </center>

H.Caja de código (o al menos así la llamo yo)

la caja de códigos se usa de la siguiente manera:

<code>código</code>

Y luce de esta manera:

código

Si deseas que se muestren los comandos de la forma en que yo lo hago acá, debes escribirlo entre estas tildes 👉``

De esta manera:

<center>Todo este texto ha sido escrito entre estas tildes 👉 ``</center>

I. Adding Images

You just have to copy and paste the link of the pic here or drag it from your computer

This how the link looks:

<center>https://cdn.steemitimages.com/DQmenC8GZHgG9AMjjj2i9uBDNwhWpcWy1po2x3UNUfteUFY/united-kingdom.png</center>

And this is how the image looks:

I. Agregando imágenes

Solo tienes que copiar y pegar el enlace de la imagen acá, o arrastrar la imagen desde tu computadora al editor de texto

Así es como luce el enlace:

<center>https://cdn.steemitimages.com/DQmTjjjYRjcFfvqxVYuff5gL8awdoQi7WewvSj1FXsyVqmZ/spain.png</center>

Y así es como luce la imagen:

Para poner las imágenes al centro, la izquierda o la derecha se sigue la misma regla que para los textos, tal como se ve en la caja de códigos:

<center>aquí-se-pone-el-enlace</center>

<div class="text-left">aquí-se-pone-el-enlace</div>

<div class="text-right">aquí-se-pone-el-enlace</div>

J. Adding Images and text

This is how you have write the code for images and text:

<h2>Let Me Introduce Myself!</h2><br /><div class="pull-right (or-left)"><center>https://cdn.steemitimages.com/DQmYYLBFJcmRTmonoWZNW5bK9zuVAn3G3buY4xYh4uaa4nk/Agustin-1.png<a href=copy the link of the image sorce>source</a></center></div><div class="text-justify"><br/>As you can read in my profile, my name is **Agustín Contreras**, I'm 22 years old and I'm a law student from **Venezuela**, diplomated in High Marketing Management by the UNESCO center for peace and Venezuelan Asociation of United Nations. I'm a self-taught cartoonist and illustrator, with over three years of experience as freelancer online, I practiced martial arts since a was a child till my adultness, I'm an entrepreneur in his incubator (Yes!, incubating because all we are eternal learners, and I think I have A LOT to learn) I like to be so busy and sometimes I'm too grumpy.</div>

And this is how it looks like :

Let Me Introduce Myself!

source

J. Agregando imágenes con texto

Así es como se copian el enlace y el texto a la izquierda o a la derecha :

<h2>Let Me Introduce Myself!</h2><br /><div class="pull-right (or-left)"><center>https://cdn.steemitimages.com/DQmYYLBFJcmRTmonoWZNW5bK9zuVAn3G3buY4xYh4uaa4nk/Agustin-1.png<a href=Aquí va el link de la fuente>fuente</a></center></div><div class="text-justify"><br/>Así como dice mi perfil, mi nombre es **Agustín Contreras**, tengo 22 años de edad a la fecha y soy Venezolano, estudiante de Derecho en la UBA, diplomado en Alta Gerencia de Marketing por el CENTRO UNESCO y la Asociación de las Naciones Unidas de Venezuela. Soy caricaturista e ilustrador digital autodidacta, con unos tres años aprox. como freelancer o autónomo en la internet, hice artes marciales de "carajito" hasta hacerme adulto, un emprendedor en incubadora (si, incubando, porque todos somos eternos aprendices, y considero que aunque he madurado en muchas cosas, me falta MUCHO por conocer y aplicar) me gusta atarearme y aveces muy malhumorado.</div>

Y así es como luce:

Let Me Introduce Myself!

fuente

K. Adding Separators and spaces

This is pretty simple, you just have to add "<hr>" between the lines or paragraphs you are separating. and for spaces add "<br/>" in the same way

In this way:

This is a line of text or a paragraph
<hr>
This is another line of text or paragraph

and this is how it looks:

This is a line of text or a paragraph

In this way:

This is a line of text or a paragraph
https://cdn.steemitimages.com/DQmTuzjUAY48bcu6a9sKfjbXv6QZWmaPwTTrRrQxCmdrwd9/separador.jpg
This is another line of text or a paragraph

and this is how it looks:

This is a line of text or a paragraph

This is another line of text or a paragraph

K. Agregando separadores y espacios

Esto es muy simple, solo debe agregar "<hr>" entre la línea o sección que estas separando, y para agregar espacio solo debes poner "<br/>" de la misma manera

De esta forma:

Esto es una línea de texto o un párrafo
<hr>
Esto es otra línea de texto o un párrafo

Y así es como luce:

This is a line of text or a paragraph

De esta forma:

Esto es una línea de texto o un párrafo
https://cdn.steemitimages.com/DQmTuzjUAY48bcu6a9sKfjbXv6QZWmaPwTTrRrQxCmdrwd9/separador.jpg
Esto es otra línea de texto o un párrafo

Y así es como luce:

Esto es una línea de texto o un párrafo

Esto es otra línea de texto o un párrafo

L. For quotes

This is even more simple, just write this ">" before the quote you want to use.

In this way:

> _"Try Not to Become a Man of Success. Rather Become a Man of Value."_ -Albert Einstein-

And this is how It looks:

"Try Not to Become a Man of Success. Rather Become a Man of Value." -Albert Einstein-

L. Para citas textuales o frases

Esto es mucho más simple solo escribe ">" antes de la frase que quieras compartir con tus lectores.

De esta forma:

> _"No intentes convertirte en un hombre de éxito, sino en un hombre de valor."_ -Albert Einstein-

Y se ve de esta forma:

"No intentes convertirte en un hombre de éxito, sino en un hombre de valor." -Albert Einstein-

Bonus # 1 How did I write the list?

Here is a sample:

<div class="pull-left">

A. sample

B. Sample

C. Sample

</div>
<div class="pull-left">

D. sample

E. Sample

F. Sample

<div class="pull-left">
https://cdn.steemitimages.com/DQmc4T1h1UBaKfvriXCBUtaY9bVpn4b5FNetXY36G2dZjvh/little%20Bolivar.png
</div>
<div class="pull-left">
https://cdn.steemitimages.com/DQmc4T1h1UBaKfvriXCBUtaY9bVpn4b5FNetXY36G2dZjvh/little%20Bolivar.png
</div>
<div class="pull-left">
https://cdn.steemitimages.com/DQmc4T1h1UBaKfvriXCBUtaY9bVpn4b5FNetXY36G2dZjvh/little%20Bolivar.png
</div>

I hope this could help you and you like it. Feel free to make questions

Espero que esto los haya ayudado. Son libres de hacer cualquier pregunta.¡ Abrazos!