Aplica formato con Markdown & HTML

in spanish •  7 years ago 

Sin título-1.jpg
Es importante hacer saber a los usuarios nuevos los códigos Markdown y HTML para escribir los post con un buen formato y así sea más legible la información.

Cuando hablamos de formato, me refiero al aspecto que el texto tiene. Como en el paquete de Office, que tiene sus botones para dar formato al texto. Este campo donde escribimos nuestros post también lo tiene, pero debemos aplicarlos de forma manual.

Estas herramientas son importantes para el lector, imagínate que abras un post y te encuentres un párrafo de 300 líneas sin punto y aparte, sin negrita, o alguna referencia en el texto. Yo, cerraría enseguida la pestaña. No tanto porque no se mira bien, si no porque la vista del lector se cansa. Llega un momento en esas 300 líneas que los ojos buscan alguna referencia importante en el texto para terminar de leer.

¿Qué es Markdown?

Es un procesador de textos muy simple, para aplicar formato al contenido en la web.

Si nunca has visto programación, tranquilo. El lenguaje de programación Markdown es muy simple y fácil de aprender, basta con colocar 5 post aplicando distintos códigos y te los aprenderás de memoria.

¿Qué es HMTL?

Es un lenguaje utilizado para crear páginas web. Este lenguaje es un poco más "complicado" de entender pero no es difícil. Con la práctica diaria y el uso de sus etiquetas te los aprenderás muy rápido.

Ahora bien, saca lápiz y papel o sencillamente guarda este post en marcadores. Repasaremos los códigos más utilizados para crear los post en Steemit. ;)


Títulos o cabeceras

Para hacer un texto más grande se debe colocar el signo # seguido de un espacio antes del texto.
Por ejemplo:

# Título

Título

Mientras más coloques el signo # más pequeño será el texto. Solo es posible colocar hasta 6 signos.
# Título
## Título
### Título
#### Título
##### Título

Ejemplo:
###### Título

Título

También es posible utilizar el código HTML utilizando, <h1>Texto</h1> de igual forma como el código Markdown es posible solo 6.
<h1>....</h1>
<h2>....</h2>
.
.
<h6>....</h6>

Ejemplo:
<h1>Título</h1>

Título


Citas

Para crear el formato de cita en el texto sencillamente coloca el signo > seguido de un espacio y luego el texto.

Por ejemplo:

Este es un ejemplo de cita.

Si quiere combinar una cita con otra, debe colocarlo de la siguiente manera:

> Este es un ejemplo de cita.
> > Esta cita pertenece a la primera

Este es un ejemplo de cita.

Esta cita pertenece a la primera


Viñetas o Listas

La viñetas sirven para ordenar o enumerar el contenido. Solo basta con teclar - o 1. seguido de un espacio y luego el texto.
Por ejemplo:
- Texto

  • Texto

1. Texto

  1. Texto

Bloques de códigos

Los bloques de códigos permiten formatear el lenguaje para que no tengan efecto. Tecleamos `` entre los dos ` escribir el texto.

Por ejemplo:
Texto normal en negrita
**Texto formateado**


Enlaces

Para ocultar los enlaces debemos escribir [](), entre los corchetes escribimos lo que queremos que se visualice y entre paréntesis pegamos la dirección URL.
Por ejemplo:
[Steemit](https://steemit.com)
Steemit
Nota: Es importante no dejar espacio entre ](

También es posible utilizar los códigos HTML para ocultar los enlaces.
<a href="https://steemit.com" title="Title">Steemit</a>
Steemit


Énfasis

Los énfasis es de utilidad para resaltar nuestro texto. Existen varios tipos:

*Texto cursiva*
**Texto en negrita**
***Texto negrita cursiva***
Texto cursiva
Texto en negrita
Texto negrita cursiva

<em>Texto cursiva html</em>
<strong>Texto negrita html</strong>
<em><strong>Texto negrita cursiva html</strong></em>
Texto cursiva html
Texto negrita html
Texto negrita cursiva html

<div class="phishy">Texto rojo html</div>

Texto rojo html

<strike>Texto tachado html</strike>
Texto tachado html

<sup>Reducir texto hacia arriba</sup>
Reducir texto hacia arriba

<sub>Reducir texto hacia abajo</sub>
Reducir texto hacia abajo


Tablas

Creamos una tabla de la siguiente manera:

|Post|Usuario|
|---|---|
|[Feliz Navidad](https://steemit.com/christmas/@oscarcc89/feliz-navidad-or-merry-christmas)|@oscarcc89|

PostUsuario
Feliz Navidad@oscarcc89

Agregue más barras verticales (or) para insertar más columnas.


Párrafos

Para saltar a otra línea basta con teclear Enter pero cuando utilizamos códigos html debemos insertamos un salto de línea con <p> y luego enter. Si no, nuestro texto quedará pegado al siguiente párrafo.

Para insertar una línea separadora de texto solo teclamos --- y enter.


Para centrar el texto tecleamos <center>Texto centrado</center>

Texto centrado

Para colocar nuestro texto a la izquierda tecleamos lo siguiente.
<div class='pull-left'>Texto</div> y si es a la derecha <div class='pull-right'>Texto</div>

Texto a la izquierda Texto a la izquierda Texto a la izquierda Texto a la izquierda

Texto a la derecha Texto a la derecha Texto a la derecha Texto a la derecha


Para colocar nuestro texto justificado tecleamos lo siguiente.
<div class='text-justify'>Texto justificado</div>

Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificado Texto justificadoTexto justificadoTexto justificadoTexto justificado Texto justificadoTexto justificado Texto justificado Texto justificadoTexto justificado


Imagen

Para colocar nuestra imagen a la izquierda tecleamos lo siguiente.
<div class='pull-left'>Link de la imagen</div>
y si es a la derecha <div class='pull-right'>Link de la imagen</div>


Así finalizo este post. Existen muchos códigos pero estos son los más utilizados en Steemit, y por supuesto lo que yo utilizo. Espero que esta información sea de mucha utilidad tanto para los nuevos usuarios como para los que ya tienen algún tiempo aquí. Si he olvidado colocar un código por favor compártelo en los comentarios.

Realza tus post para que dé gusto leerlos. Comparte con tus seguidores esta publicación para que así puedas ayudar a que los post sean mejores cada día.

¡Saludos amigos!

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:  

Excelente guía. Bastante completa. Muchas gracias.

Que bueno que te haya gustado amigo. Saludos.

Gracias por la información @oscarcc89, muy valiosa para ser más amigable la vista de nuestras publicaciones. Éxito

muy bueno, gracias

Gracias, que información tan importante. Me llama la atención , que escribiste : "guarda este post en marcadores" , cómo se hace eso? Créeme este post será de mucha ayuda para mí.

Si utilizas Google Chrome como navegador veras en la barra de direcciones al final una estrella. Clic allí con este post abierto y luego Listo para guardar. Incluso le puedes colocar un nombre al marcador para identificarlo más rápido.
¡Saludos!

Gracias.

Buen post @oscarc89. Una información muy útil.

Me alegra que te haya servido. Saludos.

Buenos días @Oscarcc89 excelente informaciòn gracias lo necesitamos no solo para dar formato a nuestros textos, sino tambíen para mejorar la calidad y presentaciòn de los post😊👍

Claro que sí. Esa es la idea principal mejorar la calidad y presentación de los post. Saludos

Muy útil.
Se alguito de HTML pero me cuesta ponerme a hacerlo de esa forma xD
Aquí se ve fácil jaja

Porque los que utilizamos en steemit son fáciles de aprender, y en mi opinión con estos códigos que he dado basta para crear excelentes post con una buena presentación.

Gracias oscar, no sabía que podía hce tablas.

Si, y son muy útiles para ordenar información. Casi siempre las utilizo.

Yo más que nadie se que esta información es sumamente valiosa. Gracias por tomarte el tiempo para compartirla @oscarcc89

Hola, me ha encntado esta publicacion, es de gran ayuda para los nuevos y no tan nuevos que a veces se nos escampan los pequeños detalles. Fabuloso, gran manera de contribuir con los stimians. Saludos.

justamente queria saber varias cosas, y justo colocas este post, gracias oscar valiosa informacion. ya rees y vot.

Gracias, me alegra que te haya servido. Saludos!

Mejor imposible Oscar muchísimas gracias, feliz día.

Excelente Post.

Excelente ya tomé nota, muchas gracias.

Ok es una guía de mucha utilidad estoy trabajando en mi siguiente post, gracias por la información jeje

Excelente post @oscarcc89, de mucha utilidad, ya voy hacer mis anotaciones

Excelente post, facil de entender!

bien!!

me gusto lo del texto de color rojo aunque me gustaría saber para otros colores ¿sabrías colocar otros colores?

Gracias tocayo por el aporte...

excelente! para los que comenzamos en esto de steemit es muy buena informacion