Aplica formato con Markdown & HTML

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!

H2
H3
H4
3 columns
2 columns
1 column
29 Comments