#diarydoctor / Codigos y ayuda en HTML

in hive-151446 •  4 years ago  (edited)


Saludos mis queridas estrellas, a lo largo del desafio del The Diary Game impulsado por @steemitblog, se han sumado gran cantidad de participantes a la plataforma de Steemit, lo cual es muy satisfactorio, por ello muchos de los usuarios son nuevos y desconocen lo que es maquetear su post; darle belleza a un post es primordial para poder brillar en Steemit, a través del #diarydoctor he decidido compartir con ustedes los códigos de HTML que utilizo frecuentemente en mis publicaciones. No solo consta de tener el conocimiento de los códigos, sino también ser creativos con ellos y muy selectivo en ¿qué es lo que quieres para tu post?.


Una explicación simple de: ¿Para qué sirven los códigos HTML o Markdown?

Estos códigos le permiten a los Blogger: crear y estructurar cada parte de su publicación (párrafos, encabezados, subtitulos, enlaces y elementos de cita en el bloque), con estos códigos podrás ordenar tus publicaciones. En sí HTML, es el lenguaje que se utiliza para crear páginas web. Estos códigos son necesarios y de gran utilidad para los steemians.



Aquí estan los códigos HTML que más utilizo:



1- Para Centrar:

<center> LO QUE QUIERES CENTRAR </center>

Nota: Esta publicación esta centrada, como ejemplo.


2- Para Justificar el Texto:

<div class="text-justify">Párrafo Aquí</div>

Nota: Al justificar el texto es más fáciles de leer, porque el texto queda sin espacio en las terminaciones de cada línea. Una publicación con este código se ve muy bonita.


3- Para organizar el texto con diferentes puntos:

Un guión (-) con espacio luego de el.

Ejemplo: (guión espacio frase) - El The DiaryGame ha cambiado mi vida.

Se verá así:

  • El The Diary Game ha cambiado mi vida.

4- Para crear citas:

(>) El símbolo que ven de "mayor que" y la frase que deseen usar seguida de él entre un espacio.
Más claro: (MayorQue Espacio Frase)

Se verá así de profesional:

La sencillez es una gran virtud.


5- Para crear hipervinculos:

Así de fácil: [El nombre del Vínculo](El link)

Así se verá:
Crissanch

Nota: Con este código puedes colocar los enlaces de imágenes que provengan de otras páginas.


6- Para escribir en Negrita:

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

Ejemplo: **Negrita** __Negrita__

Lo cual se vería: Negrita en ambos casos


7- Para escribir en Cursiva:

Igual que negrita pero se utilizaría solo un (1) asterisco o guión bajo.

Ejemplo: *Cursiva* _Cursiva_

Sería: Cursiva en ambos casos


8- Para escribir en Negrita Cursiva:

Igual que en negrita, pero en lugar de utilizar dos asteriscos o guiones bajos son tres (3).

Ejemplo: ***negrita cursiva*** ___negrita cursiva___

El resultado: negrita cursiva


9- Para escribir en barras:

Pude hacer todas esas barras grises usando simples tildes: ` 3 veces cada lado. Este sin duda es un codigo que le da belleza a las frases:

Se vería asi: Hola a todos


10- Para escribir en un bloque y hacer una lista: Solo debes usar esta barra: "|" Tanto para iniciar, separar y terminar.

Ejemplo:
| Post | Día |
| --------|---------|
| Venezuela | 3:00pm |
| Brasil | 6:00pm |

Se verá así:

LugarHora
Venezuela3:00pm
Brasil6:00pm

Es bastante fácil y se ve realmente fantástico así. Puedes hacer todas las celdas que desees, sé creativo.


11- El texto puede estructurarse con encabezados:

Colocas un numeral o varios, un espacio y luego tu texto. También puedes realizarlo con el código: <h1> Lo que vas a encabezar </h1>

Solo debes cambiar el número, por ejemplo en vez de 1 colocas h2, mientras menos sea el número, mayor será el tamaño.

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####

Nota: Este código lo utilizo mucho para resaltar los títulos de mi post.


12- Escribir en Tachado:

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

Ejemplo: ~~tachado~~

Sería asi: tachado


13- Para realizar la linea separadora:

Yo utilizo mucho esta línea en mis post para separar, solo debes colocar tres guiones "-" entre espacios de cada párrafo.

Así: ---


14- Para hacer dos columnas de texto:

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

Quedará así:

Es una forma muy atractiva para redactar tu post en dos idiomas.
It is a very attractive way to write your post in two languages.


15- Para colocar imágenes a la derecha e izquierda:

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

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

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

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

Se verá así, por ejemplo si utilizas el código hacia la izquierda:

"Las estrellas con su luz propia alumbran sin parar, las personas brillan cuando conocen que son únicas."



Te invito a brillar en el The Diary Game, ya tienes una base de códigos HTML para mejorar tus publicaciones. Si tienes alguna duda, puedes contactarme, porque sé que vamos por más...


¡Puedes ayudar a otros!

Agrega el link de este post en los comentarios #diarydoctor que realices, si lo deseas...


TE INVITO A FORMAR PARTE DE
"STARS OF STEEM."
"Eres una estrella para Steemit."


PicsArt_06-23-04.46.37.png

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Muy útil tu información, asi todos los que apenas nos estamos introduciendo en este mundo de steemit podemos mejorar nuestra redacción y poder personalizar mejor nuestros textos, así aunque sean palabras escritas con esto cara uno tendrá su toque personal. Gracias

#onepercent #venezuela

Que bueno que te sirva @mariamarquezvox, saludos y un gran abrazo virtual...

Excelente información, gracias. Muy útil.

Hola querido amigo, excelente post es bueno que quieras transmitir esa información tan valiosa a los demás usuarios!! Es de gran ayuda.

Te felicito a ti y a los creadores de la comunidad @sampraise @edlili24, me alegra que esten creciendo y además apoyando a todos!! :)

Un gran saludos!!

Gracias @franyeligonzalez seguimos sumando 😉

Gracias @franyeligonzalez, bueno amigo estamos trabajando para que la Blockchain de Steem siga creciendo.

Muchas gracias amiga @franyeligonzalez, eres una estrella para Steemit...
Vamos por más!

Primo @crissanch muy util tu información. Saludos
#onepercent #venezuela

Que bueno que te sirva @eglis, saludos!

Que genial me encanto este post, me aclaro dudas respecto a comando que aun no sabia usar!

Gracias
#onepercent
#venezuela
#affable

Hola @crissanch, Dios te bendiga, un gran saludo... Que bueno, está interesante los códigos, lo tendré en práctica para mejorar mi publicación en Steemit 🤗 gracias por el material de la publicación👍🏻
#onepercent
#venezuela

Súper útil, muchas gracias por compartir ésto, lo necesitaba 😅

Muy buena información, ya estaré practicando estas estrategias para mejorar mis publicaciones! Muchas gracias!

Mam look at this to write Barr tips no 10 under justify and without justify .
How to write bar under justify i tried but no performs could you elaborate
IMG_20220325_180618.png

@crissanch

@crissanch 👆👆

Muy bueno, me gustó mucho.

Excelente de gran ayuda gracias

Excelente información, gracias por aportar este contenido a la comunidad!
Saludos!
#twopercent
#venezuela
#affable

Gracias por esta informacion es muy util para mi que estoy empezando bendiciones!!

Muy bueno con estos tips nuestras piblicaciones seran mejores ..

muy buena la informacion, tomare en cuenta muchas cosas de ahora en adelante

Muy buena informacion, me sirve de mucho a la hora de redactar!!
¡Muchas Gracias!

Gracias por la información, me hacia mucha falta.

🙋saludos y muchas gracias, para mí es de mucha ayuda ya que apenas estoy iniciando, y me gustaría mejorar, bendiciones.

Lee esto @anadeliagil

graaciiaass @josevbc

Muchas Gracias Por Esta Valiosa Información, Soy Nueva y Quiero Conocer Mas De Esta Plataforma...

Muy buena la información 🙏 ya que soy nueva en esta comunidad y deseo aprender 💓 espero tu apoyo en mis post y así mismo te estaré apoyando 🙂

Hola @crissanch muy descriptivo tu post con información muy útil para el maqueteo de las publicaciones sobre todo para aquellos que están empezando en este mundo de Steemit, sigue adelante contribuyendo al crecimiento de cada usuario, de la comunidad y de Steemit. Vamos por más ⭐
#onepercent
#venezuela

Vamos por más @edlili24...

Excelente @crissanch, te felicito y se que irás por más. No dejes de creer en tí. Y sobre todas las cosas guardadas, guarda tu corazón; solo para el SEÑOR. Bendiciones

excelente post es de mucha ayuda gracias

Gracias por la información me servirá de mucho

Excelente aporte y aprendisaje para los que estamos comenzando dentro de la Pataforma gracias @crissanch por compartir tu esperiencia.

mil gracias Amigo, de verdad, andaba como san nicolas en semana santa, super perdia,,,

Aquí tengo la guía más reciente, respondiendo a tu pregunta:

https://steemit.com/hive-151446/@crissanch/como-embellecer-tus-publicaciones-guia-de-codigos-html

Excelente Aporte Hermano Gracias Por Ayudarnos A Crecer.

Uy!
Muchas gracias por esta guía! @crissanch
Gracias!!!

No sabía que se podía hacer esto, soy nueva y en realidad me estoy empezando a empapar sobre todo. Gracias por la información, saludos

Gracias. Muy valiosos consejos, son utiles para mi, pues apenas tengo unos dias que me uni a la red.

Hola @crissanch espero que te encuentres bien, una pregunta para colocarle el nombre, la identificacion o pie a las fotos como haria?

Hola muy buena esta guía ciertamente estoy indagando por estaa comunidad.... y asi voy conociendo herramientas para mis publicaciones posteriores.... mil gracias....

Genial! por acá te dejo la actualización de esta publicación que te servirá: https://steemit.com/hive-151446/@crissanch/como-embellecer-tus-publicaciones-guia-de-codigos-html

✨Eres una estrella para Steemit...

Que bien esta publicación hace que tu post se vea genial.

Este post es un salva vidaaas, ¡muchas gracias! Siempre pensé que la 9 y la 10 eran difíciles de hacer, ya entiendo cómo hacerlas claramente. Gracias.

Saludos @danilop! Por acá te dejo la actualización de este post para que te instruyas: https://steemit.com/hive-151446/@crissanch/como-embellecer-tus-publicaciones-guia-de-codigos-html

Te invito a formar parte de Stars Of Steem.

Vamos por más!

  ·  3 years ago (edited)

¡Muchas gracias por actualizarme con esta información mucho más completa!


¿Qué debo hacer para formar parte ?

Me encanto, tu post, no sabes como me ayudo, fue sencillo la manera en como lo sintetizaste, y la forma de explicarlo.. Gracias

viejito pero super interesante este post 🥰

  ·  4 years ago (edited)

Que gran aporte estás dando a la comunidad, muy importante todos esos códigos y ayuda en HTLM, si los ponemos en práctica podemos embellecer nuestros post y dar un estilo más propio y con una mejor presentación. Muchas gracias.

@crisaanch excelente información muchas gracias. Comenzare a aplicarlos.

Excelente post ¡Me gusta mucho cómo lo explicó todo!

Me encantó esta información, gracias me sirve por qué estoy relativamente nueva.

Excelente información que me ayudara de mucho un abrazo Bendiciones.

Hola @crissanch no te imaginas lo valioso para los que estamos comenzando aquí en la plataforma steemit tener este blog de apoyo para nuestras publicaciones muchisimas gracias.

#onepercent
#venezuela

Que bueno que te sirva @juliosanz...
¡Vamos por más!

Excelente amigo @crissanch muy útil la información, muchísima gracias por compartir. Bendiciones... #affable #oneporcent #venezuela

Excelente información. Muchas gracias por compartirla. Es bueno saber todo esto, no es tan sencillo pero con una guía así se ayuda bastante.

Así es @kealeortiz!