#diarydoctor / Codigos y ayuda en HTML

in Stars of Steemlast month (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

Sort:  

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

 last month 

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

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

 last month 

Gracias @franyeligonzalez seguimos sumando 😉

 last month 

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

 last month 

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

 last month 

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

 last month 

Que bueno que te sirva @eglis, saludos!

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

 last month 

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

 last month 

Vamos por más @edlili24...

 last month (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.

 last month 

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

 last month 

Gracias por esta informacion es muy util para mi que estoy empezando 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

 last month 

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

Coin Marketplace

STEEM 0.16
TRX 0.03
JST 0.026
BTC 13047.31
ETH 415.59
USDT 1.00
SBD 1.00