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.
Hello again Steemians! IT’s been three days since I started using @Steemit. I am really cautivated with this blockchain platform. I felt in love in the way of "the post estructure", of the Font “Source Sans Pro Regular” and “Semibold”. I even felt in love with the “line spacing” 😍, you have no idea how much (P.S.: I would like to write a book that looking like this – Or, am I already doing it? - 🤔) And finally! Since I started using this “social media platform” I’ve only been doing what I most like to do “LEARNING” -that’s why the Marvel reference in the title of my post- NOW I’m a “MARKDOWN WRITER” 😎 (LOL).
Althoug I’m thinkig about many things about Steemit, the idea under which Steemit was created is very noble… But among so many things to think about, I have decided to share a “little” tutorial about writing with Markdown. “EVERYTHING” you need to know!
"and help you master the infinity gems of steemit!"
¡Saludos de nuevo a toda la comunidad de steemians! ya van tres días utilizando la plataforma, y me encuentro realmente cautivado por esta "red social" de la Blockchain. Me enamoré de la forma de maquetar los post, de la fuente "Source Sans pro regular" y "semibold", me enamoré del interlineado 😍, realmente no tienen idea (Pd.: me gustaría escribir un libro con ese aspecto - ¿O quizás ya lo estoy haciendo? - 🤔) ¡En fin! desde que comencé a utilizar @Steemit, solo he hecho lo que más me gusta hacer APRENDER - Por eso la referencia y el "cameo" de nuestro amigo Thanos allá arriba! - y aunque ya estaba un poco familiarizado con el HTML, no fue este código el que utilicé para redactar, me hice todo un "MARKDOWN WRITER"😎 (LOL).
Han pasado varias cosas por mi mente, la idea bajo la cual fue creado Steemit es muy noble, pero entre tantas cosas que he leído y aprendido, me gustaría compartir con los nuevos y futuros usuarios eso que aprendí debido a que para redactar en la plataforma tuve que revisar varios y diferentes post y a todos les faltaba por lo menos algo "pequeñito" pero algo que en algún momento podría funcionar o querer usar, así que ¡mi mismo! es decir, YO reuniré "todo" ¡en un post!.
Iniciaré con la tabla de contenidos en orden
Let's start with the content list
ENGLISH
A. Titles / Header
B. Text to the left
C. Text to the right
D. Center Text
E. Bold
F. Italic
G. line through text
H. Code Box.
I. Adding Images
J. Images & Text
K. Text separators
L. Quotes
BONUS!
ESPAÑOL
A. Títulos
B. Texto a la Izquierda
C. Texto a la Derecha
D. Texto centrado
E. Negrita
F. Cursiva
G. Subrayado
H. Caja de Código.
I. Agregar imágenes
J. Imágenes y texto
K. Separadores
L. Citas textuales
¡BONO!
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
A. Títulos o encabezados
Los títulos o encabezados se escriben de la siguiente manera:
<h1>Título</h1>
<h2>Título</h2>
<h3>Título</h3>
<h4>Título</h4>
Y luce de esta manera:
Título
Título
Título
Título
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:
C. The Text align to the right is written this way:
<div class="text-right>This text is align to the right</div>
And it looks this way:
D. 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:
B, C y D. Textos alineados a la izquierda, a la derecha y centrado
B. Los textos se alinean a la izquierda de la siguiente manera:
<div class="text-left">Este texto esta alineado a la izquierda</div>
Y luce de esta manera:
C. Los textos se alinean a la derecha de la siguiente manera:
<div class="text-right">Este texto esta alineado a la derecha</div>
Y luce de esta manera:
D. Los textos se centran de la siguiente manera:
<center>Este texto esta centrado</center>
Y luce de esta manera:
Este texto esta centrado
E. Bold text
The bold Text is written this way:
**text**
And it looks this way:
text
E. Textos escritos en negrita
Los textos se escriben en negrita de la siguiente manera:
**negrita**
Y luce de esta manera:
Negrita
F. Italic text
The Italic Text is written this way:
_text_
And it looks this way:
text
F. Textos escritos en cursiva
Los textos se escriben en cursiva de la siguiente manera:
_cursiva_
Y luce de esta manera:
cursiva
G. The line through text
The line through text is written this way:
~~text~~
And it looks this way:
text
G.Texto subrayado
Los textos subrayados se escriben de la siguiente manera:
~~subrayado~~
Y luce de esta manera:
subrayado
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
If you want to show a code as I did, write your text code between those "Grave accents" 👉 ``
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:
To put the images to the center, the left or the right, the same rule is followed as for the texts, as seen in the code box:
<center>put-the-link-here</center><div class="text-left">put-the-link-here</div><div class="text-right">put-the-link-here</div>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!
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.
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!
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.
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
This is another line of text or paragraph
For custom separators just copy the link or your favourite or drag the one that you designed from your computer
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
This is another line of text or paragraph
Para separadores personalizados solo copia el link de la imagen de tu separador favorito o arrastra el que tu diseñaste desde tu PC.
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!
Bonus # 1 How did I write the list?
Here is a sample:
A. sample
B. Sample
C. Sample
D. sample
E. Sample
F. Sample
This is how is made:
<div class="pull-left">
A. sample
B. Sample
C. Sample
</div>
<div class="pull-left">
D. sample
E. Sample
F. Sample
¡BONO! # 1 ¿Cómo hice la lista?
Aquí hay un ejemplo:
A. ejemplo
B. ejemplo
C. ejemplo
D. ejemplo
E. ejemplo
F. ejemplo
Y así es como esta hecho:
<div class="pull-left">
A. ejemplo
B. ejemplo
C. ejemplo
</div>
<div class="pull-left">
D. ejemplo
E. ejemplo
F. ejemplo
¡BONO #2! de igual forma se hacen las galerías
Ejemplo:
Y así es como luce el código:
<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>
BONUS #2! do the same to build a gallery
Sample:
And this how the code looks:
<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>
And That´s All Folks!
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!
Todas las imágenes de mis publicaciones son composiciones hechas o diseñadas por mi, con excepción de aquellas cuya fuente se encuentra como pie de foto; el personaje utilizado en la imagen principal es Thanos y le pertenece a Marvel Entertainment, LLC, la imagen de dicho personaje fue extraída de: AQUÍ
All images of my posts are compositions made or designed by me, with the exception of those whose source is found as a caption; the character used in the main image is Thanos and belongs to Marvel Entertainment, LLC, the image of that character was taken from this forum