Dar formato a los textos e imágenes de tus publicaciones 👩🏻‍💻 [ Tutorial ]

🎉 Feliz 2018 Amigos, lectores y comunidades de Steemit 🎉

Hemos empezado el año con buen pie, Steem está subiendo y eso es una buenísima noticia.

Desde que empezó el año y en pocos días he visto como el valor de mi cuenta ha ido aumentado notablemente debido a esto. Además, no ha sido lo único que ha subido. Para mi sorpresa el upvote también lo ha hecho, un poquito más.😃

---

---

Para comenzar el año, he preparado un post algo más educativo.

---

Steemit está teniendo un gran crecimiento y aceptación. Cada día se registran nuevos usuarios. Personas que llegan con miles de dudas. Y que menos que hacerles el camino más fácil.

Uno de los retos al cual nos enfrentamos al entrar en Steemit, es formatear o dar formato a nuestros contenidos. Para ello contamos con dos opciones: Crear la publicación en Markdown o usar el editor.

Desde el principio comencé con Markdown. No tenía ni idea de su funcionamiento, pero la guía me ayudó lo suficiente para avanzar un pasito más. También investigué como alinear imagen al texto y descubrí que Html era la solución.

Todo lo investigado y aprendido en este corto camino he intentado plasmarlo en las publicaciones. Y como el conocimiento hay que compartirlo he hecho una lista explicativa y detallada de los códigos que he usado hasta el momento.

---

Imagen centrada con texto debajo

---

Este es un ejemplo de imagen centrada con texto debajo.
Para ello abrimos < center > insertamos la imagen y cerramos con < / center >

Puedes copiar el código aquí 👇

<center>IMAGEN</center>

💡 Recuerda borrar la palabra IMAGEN. Ahí debe de ir tu foto.

📌Para centrar el texto que está debajo se hace del mismo modo. Solo que en vez de insertar una imagen, escribimos el texto entre las dos etiquetas.

Imagen a la derecha del texto

Este es un ejemplo de como quedaría una imagen alineada a la derecha de un texto.

Tenemos que escribir un código diferente al anterior.
En este caso abrimos con < div class="pull-right" >< img src= insertamos la imagen y cerramos con ></ div>

Copia el código aquí 👇

<div class="pull-right"><img src=IMAGEN></div> Presiona dos veces Enter y escribe el texto.

---

Imagen a la izquierda del texto

Para alinear la imagen a la izquierda del texto usamos el mismo código.

Lo único que tenemos que hacer es remplazar Right por Left.

Abrimos con la etiqueta < div class="pull-left">< img src= insertamos la imagen y cerramos con >< /div>

Copia el código 👇

<div class="pull-left"><img src=IMAGEN></div> Presiona dos veces Enter y escribe el TEXTO.

---

Lista vertical de imágenes y texto

	Esto es un ejemplo de lista de imágenes y textos.
	Para hacerla usaremos los siguientes símbolos.
	Barra y guion
	Copia el código 👇

|||
|---|---| 
|imagen|texto|
|imagen|texto|
|imagen|texto|
|imagen|texto| Pulsar dos veces Enter para salir del cuadro.

📌Si por el contrario queremos la lista de imágenes a la derecha y el texto a la izquierda, solo tenemos que cambiar el orden imagen/texto.

|||
|---|---| 
|texto|imagen|
|texto|imagen|
|texto|imagen|
|texto|imagen| Pulsar dos veces Enter para salir del cuadro.

💡 Es recomendable que todas las imágenes sean del mismo tamaño. De esta manera el cuadro quedará compensado.

Alineación horizontal de 2 imágenes y texto

	Esto es un ejemplo de como queda dos imágenes horizontales			con texto a la derecha.

Copia el código 👇

|||
|---|---| 
|imagen|texto||imagen|texto|
Pulsar dos veces Enter para salir del cuadro.

📌 También podemos cambiar el orden como en la tabla anterior, quedando las imágenes a la derecha del texto.

|||
|---|---|
|texto|imagen||texto|imagen|
Pulsar dos veces Enter para salir del cuadro.

3 Imágenes horizontales

Este es un ejemplo de cómo quedaría tres imágenes alineadas en horizontal.

Para hacerlo, copia aquí el código 👇

||||
|---|---|---|
|imagen|imagen|imagen|

Fuentes

Todas las fotos han sido tomadas con Samsung S7 edge. Autoría @reimerlin.
Separador editado en Adobe Illustrator.
Original, de libre descarga y uso: https://www.vecteezy.com

Bueno amig@s espero que estos ejemplos sirvan de ayuda e inspiración para vuestras publicaciones. Respecto a las fotografía de estos mismos…he tomado como modelos al adorable Porg y valiente Rocket.

¿A que son simpáticos? 😄

🤗Feliz día de Reyes y gracias por pasarte por aquí 🤗