Este post va dedicado a varios amigos que me han preguntado cómo hago para darle formato a mis post específicamente a este último. Espero que sea de mucha utilidad para todos, recuerden que steemit es una comunidad y como comunidad debemos crecer juntos.
También está inspirado gracias a las palabras de @Bitcoinroute en el Meet-UP Maracay @Cervantes no duden en seguirla siempre tiene muy buenos tips de como crecer y ser mejor en este hermoso océano.
HTML
Primero lo primero, el HTML es el lenguaje que rige al internet, todos los navegadores entienden y usan este lenguaje que da formato a las páginas web. El Markdown, es el tipo de formato utilizado por el editor de Steemit y se podría decir que este tipo de estilo es una manera de simplificar el HTML.
Al momento de realizar nuestras publicaciones podemos utilizar cualquiera de estos dos elementos para darles formato y hacerlos más llamativos, en este Post compartiré algunas de las que yo utilizo, siéntanse libres de probarlas y utilizar las que se les haga más cómodas.
Etiquetas
Todos los elementos de HTML están especificados por etiquetas. Las etiquetas están formadas por los símbolos de “menor que” . Entre estos símbolos escribimos la palabra o palabras de cada función que queremos mostrar en nuestro código.
Por lo general queremos aplicar una determinada función a un elemento o párrafo específico por eso existen 2 tipos de etiqueta, una de apertura (que inicia la función) y otra de cierre (que la limita hasta determinado punto).
Así se vería una etiqueta de apertura: <Etiqueta>
Así se vería una etiqueta de cierre: </Etiqueta>
Títulos y Subtítulos
Para escribir títulos y subtítulos para tus artículos solo tienes que utilizar el signo de # al principio de la línea, dejar un espacio y luego escribir el texto y obtendrás diferentes tamaños dependiendo de cuantos signos utilices al principio de esa línea. Otra forma es usar la etiqueta donde la "N" varía según tamaño e intensidad de la letra .
CÓDIGO:
<HN>Título Etiqueta</HN>
# Título H1
## Título H2
### Título H3
#### Título H4
RESULTADO:
Título H1
Título H2
Título H3
Título H4
Para crear un párrafo
Para crear un párrafo o separar dos cuerpos de texto con interlineado es tan simple como el uso de las etiquetas para abrir y para cerrar el mismo.
CÓDIGO:
<p> Inserte texto aquí para crean un párrafo. </p>
RESULTADO:
Inserte texto aquí para crean un párrafo.
Para hacer énfasis
En el cuerpo de nuestros párrafos vamos a necesitar enfatizar algunos elementos ya sea usando Negrita, Cursiva, Tachado para hacer esto tenemos dos opciones distintas en markdown y en html:
NEGRITAS: Para escribir en negritas en MARKDOWN solo tenemos que utilizar dos asteriscos ** o dos guiones bajos __ o aplicando la etiqueta strong de la siguiente manera:
CÓDIGO:
**Texto de ejemplo en negritas con asteriscos dobles**
__Texto de ejemplo en negritas con guion-bajo doble__
<strong>Texto de ejemplo en negritas con etiqueta</strong>
RESULTADO:
Texto de ejemplo en negritas con asteriscos dobles
Texto de ejemplo en negritas con guion-bajo doble
Texto de ejemplo en negritas con etiqueta
CURSIVAS: Para escribir en cursiva es igual, pero con asteriscos sencillos o guion-bajo sencillo, o usando la etiqueta <em>.
CÓDIGO:
*Texto de ejemplo en cursivas con asteriscos sencillo*
_Texto de ejemplo en cursivas con guion-bajo sencillo_
<em>Texto de ejemplo en cursivas con etiqueta</em>
RESULTADO:
Texto de ejemplo en cursivas con asteriscos sencillo
Texto de ejemplo en cursivas con guion-bajo sencillo
Texto de ejemplo en cursivas con etiqueta
TACHADO: Para tachar tu texto utilizas el signo de ~~ de la siguiente forma
CÓDIGO:
~~Texto Tachado~~
RESULTADO:
Texto Tachado
**_También pueden combinarlas_**
También pueden combinarlas
Para organizar el párrafo
Acá les enseñaré como centrar y justificar el texto.
Para centrar el texto sólo tenemos que utilizar la siguiente etiqueta <center> con su respectivo cierre </center>.
CODIGO:
<center> Y de esta forma su texto queda centrado. </center>
RESULTADO:
Y de esta forma su texto queda centrado.
Para justificar nuestro texto a ambos lados del párrafo usamos <div class="text-justify"> y para cerrarlo </div>.
CODIGO:
<div class="text-justify"> En este ejemplo podemos ver como el texto queda alineado a ambos lados del párrafo, lo que le da más estética a nuestras publicaciones y las hace llamativas. </div>
RESULTADO:
Otros elementos para organizar el párrafo
Espacio entre parrafos
Un simple numeral con espaciado arriba y abajo.
Para crear citas
Se usa el símbolo de “Mayor que” (>) seguida de un párrafo.
Ejemplo:
Texto de cita
> Texto de cita
Para crear hipervínculos
[Blog de Jogreh](https://steemit.com/@jogreh)
<a href=”https://steemit.com/@jogreh”>Blog de Jogreh</a>
RESULTADO:
Para separar un párrafo en 2 Columnas
Con éstos códigos podrán colocar el texto a la izquierda o derecha según lo necesiten.
CÓDIGO:
<p><div class="pull-left"><div class="text-justify">Texto de la primera columna, así se formarán dos barras de texto lo que le premite jugar con el espacio</div></div></p>
<p><div class="pull-right"><div class="text-justify">Texto de la segunda columna, así se formarán dos barras de texto lo que le premite jugar con el espacio</div></div></p>
RESULTADO:
NOTA: También se lo pueden aplicar a imágenes para que queden a un lado del texto.
Ejemplo:
\<div class="pull-left">Link de la imagen\</div>
<div class="text-justify">Cuerpo del texto que quieren colocar a un lado, pueden cambia los valores para izquierda y dercha y no olviden justificar el texto.</div>
Ya por último si quieren agregar Emojis pueden encontrar muchos en el siguiente link y solo basta con copiar y pegar. 🚀 😝 🌍 🍒 Plantilla de Emojis 👍 😎 👀 💃
Unas recomendaciones que nos deja nuestra amiga
Fotos tomadas por mi con mi Xperia SL