Micro guías: Lecciones prácticas de Markdown en Steemit #1

Saludos Steemianos y Steemianas quiero darles a todos un gran saludo. Espero que todos la estén pasando muy bien. Si estás llegando a la plataforma el día de hoy recibe mi cordial bienvenida, y te invito, a mirar con detalle este artículo para que vayas "corriendo" a escribir tu artículo de presentación. Si ya tienes tiempo en Steemit y aún sigues "peleando" con el lenguaje HTML al momento de centrar imágenes y alinear textos, estas prácticas pueden ayudarte mucho. Ante cualquier duda de como colocar el editor de steemit en modo Markdown lee la imagen a la derecha.

Imágenes en Markdown. Las múltiples maneras.

A continuación iré detallando, de manera muy práctica, las diferentes alineaciones que puedes realizar para el tratamiento de las imágenes en tu artículos cuando utilices Markdown.

Imagen centrada a tamaño original, sin fuente:
<center> link</center>. En el caso del ejemplo estoy utilizando como "link", el siguiente enlace. El resultado sería la imagen centrada, en su tamaño original:

Centrada / Tamaño original / Con enlace a fuente:
<center> link<br>[Fuente](link)</center>. Como puedes notar, link es el enlace directo a la imagen y Fuente es el texto que le colocas que se convertirá en "cliqueable" de color azul. Utilizando el mismo enlace, anteriormente mencionado, tenemos:

Fuente

Alineada a la derecha tamaño original (se reducirá automáticamente):

<div class="pull-right">

<center> link</center>
</div>

Puedes ver la imagen a un lado derecho. Cuando veas espacios en blanco, debes respetarlos para no tener errores cuando utilices este código en tus artículos.

Venga Hive account@theghost1980, una imagen un poco mas "seisi" y atrevida. Esos cachorros me producen un ataque ternuro-agresivo-post-traumático...

Fuente | Source

Alineada a la derecha / Con enlace de fuente:

<div class="pull-right">

<center> link<br>[Fuente | Source](link)</center>
</div>

Puedes notar la misma imagen "traumática" del canino pero con su enlace de fuente.
Nota: Dicho enlace de fuente puede ser anidado, es decir, en vez de Fuente, colocas una imagen pequeña tipo icono. Os pido que utilicen otras imágenes y no "mis iconos". Revisen una fuente de iconos gratuitos aquí.

Alineada a la derecha / Con imagen de icono como enlace de fuente:

<div class="pull-right">

<center> link<br>[![](link-icono)](link)</center>
</div>

Puedes notar la misma imagen con su fuente, pero esta vez, el enlace de fuente es un icono "cliqueable".

Fuente | Source

Alineación a la izquierda / Con enlace de fuente:

<div class="pull-left">

<center> link<br>[Fuente](link)</center>
</div>

Puedes notar que os he cambiado la imagen, a una mucho más sugestiva y "seisi".

Fuente | Source

Varias imágenes con alineación a la derecha y fuente de imagen, separadas por un <hr>:

<div class="pull-right">
 
<center> link<br>[Fuente | Source](link)</center></div>
<hr>
 
<center> link<br>[Fuente | Source](link)</center></div>                 
</div>

Puedes utilizar diversas cantidades de imágenes y hacer galerías de fotos o gifs animados. Os recomiendo utilizar imágenes en buena resolución para óptimos resultados.

Ahora bien, ¿qué sucede si jugamos un poco con las divisiones o <div>?.
Para finalizar les dejaré dos imágenes dentro de un <div>. Dichas imágenes están "renderizadas" dentro de otros dos <div>. Uno alineado a la derecha y otro a la izquierda. Dicha fuente de imagen esta aquí.

<div class="pull-right">
<div class="pull-right">
<center> link</center></div>
<div class="pull-left">
<center> link</center></div>
</div>

Espero que este artículo te sea de mucha ayuda. En las próximas entregas continuaré profundizando en otras areas dentro del lenguaje Markdown. STEEM ON, muchachON.