¿Cómo embellecer tus publicaciones? / Guía de Códigos HTML
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.
¿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í:
¿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á:
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:
¿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í:
¿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 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:
<div class="pull-left">Texto de la primera columna</div>
<div class="pull-right">Texto de la segunda columna</div>
Se verá así:
¿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):
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...
Que bueno y muy necesario aporte amigo saludos
🤗😊✨
Si, que buen aporte me ha gustado mucho ya que soy nueva y puedo aplicar estos tops en mis publicaciones. Muchas gracias
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
Buena información hermano, vengo llegando a la comunidad y no tenia idea de como lograr estas personalizaciones, Gracias a ti muchos de nosotros tendremos una mejor vista de nuestras publicaciones.
Muchas gracias Dios te bendiga por está ayuda, excelente post 🙏
Esta era la guía que estaba buscando desde hace días. Muy útil, hay que tomar notas y estudiar para hacer correctamente e impecable nuestras publicaciones. Muchas gracias y buenas noches.
Excelente z, una guía muy completa
Saludos @felyess, que sea de provecho...
Hola @chissach excelente me encantó esta publicación , es gran herramienta para los que estamos comenzando en Steemit 😁
Que bueno que te sirva @elixamar...
Saludos!
¡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! 😉
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!!!!!.
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.
Amén, saludos!