¿Cómo embellecer tus publicaciones? / Guía de Códigos HTML



PicsArt_04-20-02.11.06.jpg


Saber cómo maquetar u ordenar tus publicaciones es de suma importancia para un steemian, por ello conocer los códigos HTML o Markdown (lenguaje para la creación de páginas web y diseñar blogs) son una clave para estructurar de la mejor manera tus publicaciones y que resalten en calidad de contenido. Siempre he pensado que estos códigos también nos ayuda a expresarnos dentro de Steemit y le dan valor a nuestros posts. Los códigos HTML se utilizan para organizar párrafos, imágenes, encabezados, subtitulos, enlaces, elementos de cita en el bloque o frases, listados...

Me inquieto una pregunta que realizó @ajosefina hace unas horas por la comunidad Stars Of Steem que más utilizó y con los que podrás resaltar tus publicaciones.

IMG_20210420_142537.jpg


¿Cuál es el secreto para maquetar correctamente?

El secreto está en ser creativo y darle el uso correcto a cada código, en saber ubicar bien la información e imágenes; por ejemplo una publicación justificada ayuda mucho al lector a entender lo que el emisor desea transmitir (las mejores publicaciones están justificadas). ERROR Una publicación siempre debe poseer una imagen de portada porque así será visible, las publicaciones que no contienen ninguna imagen tienden a ser invisibles dentro de la plataforma. Empiezar justificando es una buena recomendación.


¿Cómo justificar?

𝐏𝐚𝐫𝐚 𝐣𝐮𝐬𝐭𝐢𝐟𝐢𝐜𝐚𝐫 𝐝𝐞𝐛𝐞𝐬 𝐮𝐭𝐢𝐥𝐢𝐳𝐚𝐫 𝐞𝐥 𝐬𝐢𝐠𝐮𝐢𝐞𝐧𝐭𝐞 𝐜𝐨𝐝𝐢𝐠𝐨:
Lo que deseas justificar

Al justificar el texto es más fáciles de leer, porque el texto queda sin espacio en las terminaciones de cada línea. Si deseas justificar una publicación por completo debes colocar al inicio: y al finalizar o pie de la publicación (para cerrar el código):

Otra pregunta que me han realizado constantemente es: ¿Por qué a veces no me justifica todo el post? Esto sucede porque hay otro código interfiriendo (podríamos decir) como sucede con el de centrado y con los vídeos (luego de los enlaces de vídeo no se justifica), para solucionar esto solo tienes que agregar después de ello, una vez más:

¿Cuál es el código para centrar una imagen o texto?

Este es otro código muy importante y fácil de memorizar para maquetar tus publicaciones; en lo me gusta usarlo para centrar los títulos principales, subtítulos y los poemas que escribo. En lo personal no recomiendo usar este código para toda la publicación. También es excelente para centrar las imágenes.

𝙿𝙰𝚁𝙰 𝙲𝙴𝙽𝚃𝚁𝙰𝚁: <center> LO QUE QUIERES CENTRAR (imagen o texto) </center>

Es muy sencillo, para abrir el código es <center> y para cerrarlo: </center> .

Se verá así:

El código de centrado es muy utilizado en los títulos de las publicaciones.

¿Para las reseñas de mis imágenes cuál código utilizó?

Debajo de las imágenes es recomendable sellar las imágenes propias con una reseña o subtítulo. Si la imágen no es de tu autoría recuerda colocar el enlace o link, de lo contrario será visto como plagio. Este código también sirve para subtítulos y es el siguiente:

<sub> Reseña o subtítulo a colocar. </sub>

Para abrir el código debes colocar: <sub> y para cerrarlo: </sub>

Se verá así de pequeño:
Sirve para colocar enlaces y subtítulos de las imágenes.


¡Para crear hipervínculos!

Un hipervínculo es un texto que te dirige a otra parte (elemento de un texto o multimedia) podría decir que sirve para esconder los enlaces. Esto es conocido también como REDIRECCIONAR.

El código es así de fácil: El nombre del Vínculo

Entre "[]" vas a colocar lo que deseas que sea visible ,(el nombre del vínculo por ejemplo) y entre "()" debes colocar el enlace o link.

Un ejemplo de como se verá:

Crissanch

Nota: Recuerda tener mucha precaución con los hipervínculos, principalmente los que te aparezcan en comentarios, muchos pueden ser una trampa para robar tu cuenta.

¿Cuál es el código para las citas?

Este código me gusta mucho utilizarlo para los textos adicionales o que no son de mi autoría, incluso para frases que deseo resaltar en mi publicación.

(>) El símbolo de "mayor que" y luego un espacio y la frase o cita que deseen.
Más claro: > Frase

Se verá así:

Seguimos aprendiendo sobre códigos HTML.


Cómo hago para escribir en Negrita?

Se agregan 2 guiones bajos (__) o 2 asteriscos ()** al inicio y al final de la frase o palabra a resaltar.

De esta forma: **Lo que deseas resaltar**

Se verá así: Esto está en negritas.


Cómo hago para escribir en Cursiva?

Igual que negrita pero se utilizará un (1) asterisco o guión bajo (_).

Ejemplo: *Cursiva* _Cursiva_

Sería: Cursiva en ambos casos.


¡Quiero escribir en negritas y cursivas al mismo tiempo!

En lo personal está fusión me encanta utilizarla para resaltar algunos párrafos en mis posts.

Igual que en negrita y cursiva, pero en lugar de utilizar dos asteriscos () o guiones bajos () son tres (3) al principio y al final de la frase o palabra a resaltar.

Así mismo: ***negrita cursiva*** ___negrita cursiva___

Una muestra de como se ve: cursiva negrita


Cómo se escribe en barras?

Este código lo utilizo también para citas o frases que deseo resaltar. Pude hacer todas esas barras grises o blancas (modo oscuro) usando simples tildes: ` 3 veces cada lado, es decir al principio y al final de la frase o palabra.

Se vería así: Este código le da belleza a las frases.


Cómo hago para escribir en tachado?

Solo dos de estas ~ debes usar, al empezar y terminar lo que quieres tachar.

Así mismo: ~~tachado~~

Se verá así: tachado


¿Cómo hago la linea separadora?

Yo utilizo mucho esta línea en mis publicaciones aún más que un separador personal, aunque también los invito a realizar uno porque eso les dará más originalidad, recuerda que este separador no debe ser exagerado ni de un gran tamaño, sino creativo.

Para realizar este código debes colocar tres guiones *"-" entre espacios de cada párrafo o imagen.

Así: ---

Por ejemplo está es la línea que estoy utilizando para separar la explicación de cada código. ⬇️


¿Cómo hago para realizar una separación entre párrafos?

Muchas veces hay párrafos que quedan pegados, para dejar un espacio de por medio solo debes usar un # con espaciado entre los dos párrafos.

De la siguiente forma:
IMG_20210420_160945.jpg


¿Cómo organizar el texto con diferentes puntos?

Este código podría ayudarte si deseas realizar una lista en alguna publicación. Y es muy fácil, solo debes utilizar un - con espaciado antes de la palabra o texto.

Ejemplo: (guión espacio frase)

- Puedo realizar una lista con varios puntos a través de este código tan simple.

Se verá así:

  • Puedo realizar una lista con varios puntos a través de este código tan simple.

¿Cómo hago para colocar el texto de color rojo?

Este código lo he utilizado muy poco, pero quiero compartir con ustedes porque en algún momento nos puede servir, y consiste en colocar el texto en color rojo.

La etiqueta de apertura del codigo es: Y para cerrarlo es igual que el de justificar:

Se verá así:
Este texto está en rojo.


¿Sangría o espacio?

Si puedes dejar un espacio al comienzo de párrafo, conocida como sangría, para ello solo debes colocar este código &nbsp; antes del texto, que significa un espacio y puedes utilizarlo varias veces, hasta que logres el límite de espacios que deseas.

Se verá así (aquí use cuatro veces el código):
        Es muy fácil darle belleza a nuestras publicaciones.


¿Cómo escribo en bloques?

Este código es muy beneficioso para listas o también para ordenar estadísticas. Para escribir en bloques o hacer una lista solo debes usar esta barra: “ | ” para iniciar, terminar y separar.

De la siguiente forma:
| Persona | Nacimiento |
| --------|---------|
| Mauricio | 13 de Mayo |
| Laura | 10 de septiembre |
| Carlos | 25 de julio |


Se verá así:
Persona Nacimiento
Mauricio 13 de Mayo
Laura 10 de septiembre
Carlos 25 de julio

Nota: puedes hacer todas las celdas que desees.


¿Puedo estructurar el texto con encabezados?

Este es uno de los códigos que más utilizo, no solo para encabezados, también para resaltar algunos párrafos de mis publicaciones, con este código mi creatividad vuela. Solo debes agregar un numeral o varios (6 máximo), un espacio y luego tu texto o titulo que quieres encabezar en la publicación. También puedes realizarlo con el código: <h1> Lo que vas a encabezar </h1> solo debes cambiar el número. Mientras mayor sea la cifra de menor tamaño será la letra o texto.

H1 En cada uno puedes usar un # numeral

H2 o ## dos en este y de esta manera voy

H3 usando más numerales ###

H4 haciendo subtitulos ####

H5 Disminuye el tamaño #####
H6 Aún más pequeño ######

¡Quiero hacer dos columnas de texto!

Este muy utilizado por aquellos que redactan sus posts en dos idiomas o los que narran historias extensas. El código es el siguiente:

Texto de la primera columna
Texto de la segunda columna

Se verá así:

Una manera distinta de realizar tus publicaciones con este código.
A different way to make your publications with this code.

#
#


¿Cómo hago para colocar imágenes a la derecha e izquierda?

Este código le da mucha originalidad a las publicaciones, pero debemos equilibrar bien las imágenes con el texto, que este proporcionado correctamente para que se vea mejor.

Para colocar imagen a la derecha debemos añadir el código:

LA IMAGEN QUE QUEREMOS COLOCAR

Para colocar imagen a la izquierda debemos añadir el código:

LA IMAGEN QUE QUEREMOS COLOCAR

Se verá así (si utilizas el código hacia la derecha):

PicsArt_04-11-09.46.33.png
Imagen digital de mi autoría.

La plataforma de Steemit es un universo original dónde está prohibido copiarse, seamos estrellas que alumbren con integridad.

#


Adicional ¡Conversor de letras!

Hace unos días ví una publicación en dónde utilizaron un tipo de letras bastante peculiar, como por ejemplo: 🄲🄾🄽🅃🄸🄽🅄🄰 🄰🄻🅄🄼🄱🅁🄰🄽🄳🄾, así que investigué para saber si acaso era un código; y es aún más fácil con una gran variedad de tipos de letra. Un conversor de letras muy fácil de usar (solo tienes que colocar el texto que deseas modificar y automáticamente el conversor lo muestra en varios tipos de letra, luego solo tiene que copiar y pegar el de tu preferencia) también podrá servirte para darle originalidad a tus publicaciones, por acá te dejo uno que estoy utilizando: https://www.letrasyfuentes.com/


¡Espero que esta publicación sea de gran ayuda! Puedes darle reesteem y compartir con otros este apoyo de códigos HTML.

Es una guía y sé que vamos por más...

___

IMG-20210410-WA0001.jpg

---
---

PicsArt_06-23-04.46.37.png


Comments 103


Que bueno y muy necesario aporte amigo saludos

21.04.2021 02:50
0

🤗😊✨

23.04.2021 20:23
0

Muy buena guía amigo, está completa. Gracias

21.04.2021 04:40
0

Hola amigo de verdad que esta información es de gran ayuda para muchos de nosotros que estamos empezando.

21.04.2021 05:19
0

Así es, continuamos aprendiendo ...

23.04.2021 20:23
0

Hola amigo, esta es una información que vale la pena leer, releer y compartir, solo así creceremos en esta gran plataforma #steemit.

21.04.2021 07:04
0

Así es @naka0, sirve para todos...

23.04.2021 20:23
0

Hola amigo, grandiosa publicación, muy completa y específica.

Compartida!

21.04.2021 08:35
0

👍👍👍

23.04.2021 20:23
0

Excelente z, una guía muy completa

21.04.2021 10:29
0

Saludos @felyess, que sea de provecho...

23.04.2021 20:24
0

Hola @chissach excelente me encantó esta publicación , es gran herramienta para los que estamos comenzando en Steemit 😁

21.04.2021 10:46
0

Que bueno que te sirva @elixamar...
Saludos!

23.04.2021 20:24
0

¡Hola! Excelente post. Es muy importante tener en cuenta todos los puntos que tratastes, para lograr que nuestros publicación sea estética y a los lectores les dé gusto de ver.

Gracias por compartir! 😉

21.04.2021 11:04
0

Así es, hablando un poco de mi experiencia personal para ayudar a otros... Dar de lo que hemos recibido es una parte importante en la comunidad.

23.04.2021 20:25
0

Que maravilloso post amigo.. me has salvado el año!!!!!.

21.04.2021 11:32
0

Jejeje... Que bueno que te sirva @allbert, saludos...

23.04.2021 20:25
0

Gracias @crissanch por este aporte tan útil al realizar los post. Dios te bendiga y prospere en todo.

21.04.2021 11:41
0

Amén, saludos!

23.04.2021 20:25
0

Me encantó amigo @crissanch tu práctica y muy completa guía, muchas gracias por compartir

21.04.2021 12:02
0

Siempre para servir, un saludo @decuartae...

23.04.2021 20:25
0

Hola @crissanch espero tengas un excelente día! Super nutrida tu publicación, gracias nos servirá de mucha ayuda.

21.04.2021 12:05
0

😊🤗🤗 que bueno... Saludos @dioceidac85!

23.04.2021 20:26
0

Apreciados y retornados! Que tengas un lindo día.

24.04.2021 14:55
0

excelente trabajo.. Dios te bendiga por ello.. saludos

21.04.2021 12:31
0

Amén, amén...

23.04.2021 20:26
0

Excelente post! Super útil! Me encantó! Gracias por tan valiosa información!😊

21.04.2021 12:57
0

Muchiiiisimas gracias @crissanch, algunas no las conocía=)

21.04.2021 13:05
0

Excelente guia amiga

21.04.2021 14:24
0

Buenisima tu publicación, yo que estoy nueva me ayudo mucho. gracias

21.04.2021 16:39
0

Que excelente herramienta para todos los usuarios. Gracias por compartir @crissanch 🤗

21.04.2021 17:13
0

Me encantó como lo explicas cada uno de los códigos que podemos utilizar para mejor nuestros post

21.04.2021 18:08
0

Gracias por tu publicacion, sera de gran ayuda para todos los que estamos iniciando en esta plataforma...!

21.04.2021 18:56
0

Gracias hno, muy buena tu publicación.

21.04.2021 19:14
0

Interesante y formativo post!
Saludos!

21.04.2021 20:59
0

Muy buena guía hermano

21.04.2021 22:36
0

Vale la pena leerlo! Excelente y bien especificado, me esta ayudando mucho. Soy nueva por aca y le sacare provecho. Gracias!

21.04.2021 22:55
0

Excelente guia para formatos. 👍🏽

21.04.2021 22:56
0

que util tu publicación, buenisimo!

22.04.2021 01:53
0

Muy buena esta información sobre todo para los nuevos usuarios de Steemit, así como yo...

22.04.2021 02:03
0

Muy, muy bueno. Aprendí varios que no sabía. Gracias.

22.04.2021 02:15
0

Gracias por la información amigo @crissanch por fin aprendí a colocar las varias fotos juntas👏🎉🎉

Bendiciones 💞

22.04.2021 10:11
0

Muchas gracias, esta super completo y ordenado. Es muy facil de entender

22.04.2021 17:42
0

Excelente explicación 😎, la verdad también estaba desorientada 🤗 Gracias .

22.04.2021 18:46
0

Hola, soy nueva en la comunidad y me alegra haber encontrado es post. Me ayudó a aclarar muchas dudas. Gracias!

22.04.2021 20:17
0

Muy Buen Post!! Super completo y organizado, Felicidades 🃏💙.

22.04.2021 20:19
0

Muy completo para refrescar y para los nuevos usuarios.

23.04.2021 00:35
0

Así es @ronaldjfs!!

23.04.2021 20:27
0

Me has aclarado dudas. Gracias. Excelente post.

23.04.2021 02:34
0

Esto está perfecto amiga míralo @isabelfrancis28

23.04.2021 03:33
0

quede encantada, solo sabia algunas cositas, pero con esta maravillosa publicación aprendi un poco mas..

23.04.2021 05:18
0

Que bueno, seguimos aprendiendo...

23.04.2021 20:27
0

¡QUE GENIAL ESTA INFORMACIÓN @crissanch!

Ojalá hubiese encontrado esto antes para no pasar pena con las 2 publicaciones que he hecho ¡ja,ja,ja! Soy nueva en esta plataforma y quiero mejorar la calidad de mis publicaciones.

Pronto subiré mi presentación formal a la comunidad poniendo en práctica todo lo que nos has explicado. De verdad, muchísimas gracias! Mis respetos, saludos.

23.04.2021 15:36
0

Continuamos aprendiendo, que sea de provecho para tí... Saludos!

23.04.2021 20:26
0

gracias cariño!! muy amable de verdad muchísimas gracias por tu ayuda, practicare hasta perfeccionar mis publicaciones

23.04.2021 19:16
0

¡Hola! agradezco mucho la información que has brindado en este post :)

Aunque tengo una duda, he visto que personas usan emojis y me gustaría saber ¿Cómo lo hacen?. Eso también ayuda a embellecer los post y dar una idea del sentimiento del escrito :3

¡Saludos!

comentarios.png

23.04.2021 19:43
0

😊Hola @germani! Respondiendo a tu pregunta, muchos colocan emoticones al publicar por los teléfonos (los teclados traen esa opción integrada), sin embargo también existen páginas de listas de emojis para copiarlos y pegarlos en tus posts, por ejemplo: https://es.piliapp.com/emoji/list/

Saludos, sé que vamos por más...

23.04.2021 20:21
0

¡Muchísimas gracias!
algo así pensé en copiar y pegar. Gracias por el link

23.04.2021 22:26
0

excelente aporte, muy bien especificado. Saludos

[WhereIn Android] (http://www.wherein.io)

23.04.2021 19:55
0

Muchisimas gracias por toda esta información. Muy buen post. SALUDOS.

23.04.2021 22:43
0

Excelente post para los que estamos comenzando, me encanto.! Gracias por compartir.

23.04.2021 23:06
0

Excelente publicación hermano. 👍🏽

24.04.2021 00:55
0

Muy buena explicación, gracias amigo

24.04.2021 04:00
0

Hola @crissanch, que bueno este manual para poder hacer nuestro post con estilo para el desarrollo de nuestra narración del párrafo. Muchas gracias por esté contenido.! Dios te bendiga grandemente 🙏.

onepercent #venezuela #affable #twopercent

24.04.2021 12:28
0

Excelente amigo @crissanch aclare muchas dudas, gracias. Saludos

24.04.2021 16:36
0

Muchas gracias Dios te bendiga por está ayuda, excelente post 🙏

25.04.2021 00:20
0

Agradecida por el aporte

25.04.2021 11:16
0

El mejor post que he encotrado hasta ahora que nos ayuda a facilitar y justifucar nuestros post sinceramente agradecida @crissanch 🤗👍

25.04.2021 15:49
0

Gracias por compartir, como siempre, este tipo de contenido que nos ayuda mucho más para por mejorar nuestras publicaciones. Siempre se valora este gran esfuerzo que muchos hacen por otros.
Aprovecho para compartirla con mis amigos @jesussantana @ubel a quienes les deseo éxito dentro de esta enorme plataforma.

25.04.2021 17:02
0

Que buena información @lusequera gracias por compartirla y etiquetarme, muy valiosa

25.04.2021 18:45
0

que buena explicación muchas gracias

25.04.2021 17:27
0

Amiga @yusmary99 mira este post.

25.04.2021 20:03
0

excelente tu explicación . muy interesante. seguimos aprendiendo.@crissanch

25.04.2021 22:51
0

Está genial éste post, me encantó, muchas gracias, no sabía estas cosas.

26.04.2021 03:44
0

Buenísimo ,muchas gracias está bien explicado

26.04.2021 12:32
0

Maravilloso aporte de tu parte amigo @crissanch sera de mucha ayuda. Gracias

27.04.2021 13:46
0

Valiosa información, bastante clara.. Gracias por compartir

27.04.2021 21:30
0

Hola amigo @crissanch, es para consultar si yo podría realizar un post dando a conocer algunos códigos que no mencionaste aquí dentro de tu post y que creo que pueden ser de gran ayuda, porque en ocasiones algunos códigos no suelen "agarrar" y es otra alternativa de uso, y de esta manera también ayudar a todos los que conformamos la comunidad de #steemit.

28.04.2021 15:16
0

Excelente explicación y súper completa. Gracias por compartir

28.04.2021 22:59
0

Gracias por este compendio, tengo 4 días apenas en la plataforma y ha sido un desafío encontrar la información de cómo justificar mis 2 publicaciones. Muy completo este post. ¡Saludos!

29.04.2021 05:50
0

Muy buena información, gracias por compartir tus conocimientos. Abrazos

29.04.2021 08:49
0

Hola @crissanch muy nutritivo tu post me instruyo ahora me toca aplicarlo, gracias por la instruccion, bendiciones de lo alto, sabiduria ciencia e inteligencia para ti y todos los que te rodean, amen.🙏🤗

04.05.2021 13:36
0

Saludos @crissanch, gracias por esa tan importante información, yo estaba un poco enredada con eso de los códigos pero aclaro mucho y lo pondré en práctica 👍

06.05.2021 19:05
0

muchas gracias @crissanch por tan valiosa publicación, por tu valiosa enseñanza puedo hacer con mas facilidad mi logro numero 4. gracias!

07.05.2021 21:16
0

Gracias por la guia @crissanch muy util y necesaria realmente. Tengo una pregunta, como se puede colocar una imagen con hipervinculo?

12.05.2021 00:56
0

Gracias amigo por tu gran aporte! Excelente de verdad. A crear buenos post 💪😊

15.05.2021 11:03
0

Gracias por el contenido a Sido de mucha ayuda

15.05.2021 13:58
0

excelente publicación, explicaste de manera pedagógica cada uno de los códigos a usar para hacer un post bien diseñado. Gracias

16.05.2021 19:33
0

Aprendí mucho gracias por la información.

Bendiciones

17.05.2021 16:01
0

Excelente publicación,de gran ayuda para quiénes nos estamos iniciando en esta plataforma. Gracias por compartir.

17.05.2021 19:46
0

Saludos muy buena su publicación agradecida 😊

onepercent

venezuela

affable

19.05.2021 17:41
0

Hola crissanch. Excelente trabajo sobre la codificaciòn para una buena publicaciòn. Muy interesante ya que he tenido problemas para la codificaciòn de listas. Esto me servirà de mucho. Invito a los demàs a revisar esta importante informaciòn. Saludos.

onepercent #venezuela #affable

21.05.2021 02:07
0

Excelente ayuda para los nuevos usuarios!

21.05.2021 02:55
0

Agradecida 👏🏻 tenía días buscando una información así es específica 👍🏻

23.05.2021 00:17
0

Muy bueno lo admito y útil, también es una ayuda indispensable para mejorar gracias de antemano.

24.05.2021 03:37
0

Gracias por tu ayuda, me gustó mucho tu información, mi hijo @alejos7ven me ayuda mucho con esas interrogantes pero con tu post aprenderé muchas más, saludos!

26.05.2021 14:50
0

Gracias @crissanch por compartir tan interesante e indispensable información, éxitos!

27.05.2021 15:48
0

De verdad me encanto esta publicación, realmente útil!! GRACIAS!!!!

31.05.2021 04:20
0

Muchas gracias, si de mucha ayuda.

31.05.2021 20:10
0

ME ENCANTÓ

05.06.2021 23:21
0

Hola amigo. Gracias por la información muy bien descrita.

06.06.2021 00:34
0