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

in Stars of Steem22 days ago

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, así que decidí renovar mi publicación referente a los códigos HTML 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?

𝐏𝐚𝐫𝐚 𝐣𝐮𝐬𝐭𝐢𝐟𝐢𝐜𝐚𝐫 𝐝𝐞𝐛𝐞𝐬 𝐮𝐭𝐢𝐥𝐢𝐳𝐚𝐫 𝐞𝐥 𝐬𝐢𝐠𝐮𝐢𝐞𝐧𝐭𝐞 𝐜𝐨𝐝𝐢𝐠𝐨:
<div class="text-justify"> Lo que deseas justificar </div>

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: <div class="text-justify"> y al finalizar o pie de la publicación (para cerrar el código): </div>

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: <div class="text-justify">

¿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](el link)

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: <div class="phishy">
Y para cerrarlo es igual que el de justificar: </div>

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í:

PersonaNacimiento
Mauricio13 de Mayo
Laura10 de septiembre
Carlos25 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:

<div class="pull-left">Texto de la primera columna</div>
<div class="pull-right">Texto de la segunda columna</div>

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:

<div class="text-justify"><div class="pull-right">LA IMAGEN QUE QUEREMOS COLOCAR</div>

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

<div class="text-justify"><div class="pull-left">LA IMAGEN QUE QUEREMOS COLOCAR</div>

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

Sort:  
 21 days ago 

Que bueno y muy necesario aporte amigo saludos

 19 days ago 

🤗😊✨

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.

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

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

 21 days ago 

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

 19 days ago 

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

 21 days ago 

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

Compartida!

 19 days ago 

👍👍👍

Excelente z, una guía muy completa

 19 days ago 

Saludos @felyess, que sea de provecho...

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

 19 days ago 

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

 21 days ago 

¡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! 😉

 19 days ago 

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.

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

 19 days ago 

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

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

 19 days ago 

Amén, saludos!

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

 19 days ago 

Siempre para servir, un saludo @decuartae...

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

 19 days ago 

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

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

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

 19 days ago 

Amén, amén...

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

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

Excelente guia amiga

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

 21 days ago 

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

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

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

 21 days ago (edited)

Gracias hno, muy buena tu publicación.

Interesante y formativo post!
Saludos!

Muy buena guía hermano

 21 days ago 

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

Excelente guia para formatos. 👍🏽

que util tu publicación, buenisimo!

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

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

 20 days ago 

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

Bendiciones 💞

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

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

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

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

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

Me has aclarado dudas. Gracias. Excelente post.

Esto está perfecto amiga míralo @isabelfrancis28

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

 19 days ago 

Que bueno, seguimos aprendiendo...

¡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.

 19 days ago 

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

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

¡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

 19 days ago 

😊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...

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

excelente aporte, muy bien especificado. Saludos

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

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

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

Excelente publicación hermano. 👍🏽

Muy buena explicación, gracias amigo

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

Excelente amigo @crissanch aclare muchas dudas, gracias. Saludos

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

Agradecida por el aporte

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

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

 19 days ago 

Así es, continuamos aprendiendo ...

que buena explicación muchas gracias

Amiga @yusmary99 mira este post.

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

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

Buenísimo ,muchas gracias está bien explicado

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

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

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.

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

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!

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

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.🙏🤗

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 👍

Muy completo para refrescar y para los nuevos usuarios.

 19 days ago 

Así es @ronaldjfs!!

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

Coin Marketplace

STEEM 1.01
TRX 0.13
JST 0.120
BTC 55544.70
ETH 4195.63
BNB 651.88
SBD 6.59