Dar formato a los textos e imágenes de tus publicaciones 👩🏻💻 [ Tutorial ]
spanish·@reimerlin·
0.000 HBDDar formato a los textos e imágenes de tus publicaciones 👩🏻💻 [ Tutorial ]
## <center>🎉 Feliz 2018 Amigos, lectores y comunidades de Steemit 🎉 </center>
###### <center>Hemos empezado el año con buen pie, Steem está subiendo y eso es una buenísima noticia.</center>
###### <center>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.😃</center>
***
***
### <center>Para comenzar el año, he preparado un post algo más educativo. </center>
***
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](https://guides.github.com/features/mastering-markdown/) 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.
***
#### <center>Imagen centrada con texto debajo</center>
***
<center></center>
<center>Este es un ejemplo de *imagen centrada* con texto debajo.
Para ello abrimos **< center >** insertamos la imagen y cerramos con **< / center >**</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.
<center></center>
#### <center>Imagen a la derecha del texto</center>
<center></center>
<div class="pull-right"><img src=!(https://steemitimages.com/DQmedWSe7SKzj3youR53jrLTvBcUwjhPdayaWRtSSGZCo5E/A%20la%20derecha.jpg)></div>
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.`
***
<center></center>
#### <center>Imagen a la izquierda del texto</center>
<center></center>
<div class="pull-left"><img src=!(https://steemitimages.com/DQmcwPDNoZ3zSotozMay23LtUS1kc3yUuQsDATLDZHRXkAj/a%20la%20izquierda.jpg)></div>
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.`
***
<center></center>
#### <center>Lista vertical de imágenes y texto</center>
<center></center>
|||
|---|---|
||<center>Esto es un ejemplo de lista de imágenes y textos.</center>|
||<center>Para hacerla usaremos los siguientes símbolos.</center>|
||<center>**Barra y guion**</center>|
|| <h6><center>Copia el código 👇</center></h6>|
|||
|---|---|
|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.
<center></center>
#### <center>Alineación horizontal de 2 imágenes y texto</center>
<center></center>
|||
|---|---|
||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.
<center></center>
#### <center>3 Imágenes horizontales</center>
<center></center>
||||
|---|---|---|
||||
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|
<center></center>
#### <center>Fuentes</center>
<center></center>
><center>Todas las fotos han sido tomadas con Samsung S7 edge. Autoría @reimerlin.</center>
><center>Separador editado en Adobe Illustrator.
Original, de libre descarga y uso: https://www.vecteezy.com</center>
### <center>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? 😄</center>
### <center>🤗Feliz día de Reyes y gracias por pasarte por aquí 🤗</center>
👍 pits7, crisangel, danesan, industrialvarez, maastro, pepiflowers, tcpaikano, anomadsoul, gabox, breili, cervantes, gargon, pgarcgo, jgcastrillo19, dulcinea, wartrapa, titin, juliamateo, teo, albagargon, mdcomes, noticias, reimerlin, aidarojaswriter, ibiza, neymarjr, spanishchef, aneblueberry, magoia, dresden, alfredozofio, aniestudio, ivan-perez-anies, teacher, carlos-cabeza, heiditravels, luisucv34, fidel-castro, kilianmiguel, mpandrew, magia, francis228, soymanu, coliraver, introspectiva, kranga, drmaizo, ficciones, dinocreative, pharesim, wackou, torkot, nelyp, loreennaa, tincho, lucio.seneca, carloshernandez, genetf, david.delatierra, criptorafa, jocra, jackelinlopez, rubo, mballesteros, ibaf04, orez, melendesigns, mendezand, jmourad, tranceart, critic-on, ropaga, mystic-natura, alexisochoa, unicornprincese, gabystories, galberto, sweetdesserts, anaiscarolina03, jeadeg, lafona-miner, israelbass, graceleon, gmario935, henryn2020, azdary310591, yrmaleza, juliolezama, interestelar, marijo, dretimax, jhoennydg, ang3l.geo, pedrolrc, marula, juliomendoza01, laucaba, tanusk, belial2412, maggata, jourbina, tccgb, vigardius, genesisgabriel,