😻Para mis amigos que lo pidieron: Guia para darle formato a tu Post HTML y MARKDOWN ✌

jogreh (54) in spanish • 7 years ago (edited)

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” < y “mayor 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:

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.

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:

Blog de Jogreh

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:

Texto de la primera columna, así se formarán dos barras de texto lo que le premite jugar con el espacio

Texto de la segunda columna, así se formarán dos barras de texto lo que le premite jugar con el espacio

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 @bitcoinroute

Fotos tomadas por mi con mi Xperia SL

spanish cervantes blog steemit busy

7 years ago by jogreh (54)

$0.34

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:

Trending

[-]

emilymorua (41) · 7 years ago

@jogreh gracias por las recomendaciones, nos conocimos ayer en el Meet-UP Maracay @Cervantes
me parece excelente tu aporte ! un abrazo!

$0.00

[-]

jogreh (54) · 7 years ago

Holaaa jaja muchas gracias ^^ Saludos

$0.00

[-]

eleyda78 (54) · 7 years ago

Hola @jogreh, esas guias son muy útiles pues siempre hay gente nueva que le cuesta mucho hacer los post, buen aporte

$0.00

[-]

jogreh (54) · 7 years ago

Muchas gracias, así es quizá mas adelante haga otro con más tips.. hay mucho que se puede hacer todavía.

$0.00

[-]

nicash14 (35) · 7 years ago

¡Hola, master! Buena data para los que recién arrancan. Vi que pusiste 100% PowerUp. Te aconsejo que no lo hagas porque no te conviene... en mi último post explico más o menos porqué.

https://steemit.com/steemit/@nicash14/consejo-no-elijan-power-up-100-nunca

Espero te sirva.

¡Saludos! :D

$0.00

[-]

jogreh (54) · 7 years ago

Gracias! ahorita lo reviso. Mas que todo este post es para quien lo necesite no espero ganancias por el de igual forma gracias por tu aporte.

$0.00

[-]

josemiguel (55) · 7 years ago

excelente!

$0.00

[-]

jogreh (54) · 7 years ago

Muy bueno tu aporte, lección aprendida.

$0.00

[-]

josecito (44) · 7 years ago

Muy buena guía, saludos estimado.

$0.00

[-]

jogreh (54) · 7 years ago

Saludos, muchas gracias.

$0.00

[-]

gacorniel (51) · 7 years ago

una gran guía para los que estamos comenzando... y si lo pedí bastante :P gracias.

$0.00

[-]

jogreh (54) · 7 years ago

Lo siento jaja tarde pero seguro.

$0.00

[-]

josemiguel (55) · 7 years ago

Excelente Herramienta, cada día aprendemos más y es gracias a publicaciones como estas...que aportan mucho a la comunidad. Gracias por compartir tus conocimientos, las semillas que siembras hoy darán buenos frutos!

$0.00

[-]

jogreh (54) · 7 years ago

Gracias, espero que puedan sacarle provecho

$0.00

[-]

minnowsupport (70) · 7 years ago

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Jogreh from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

$0.00

[-]

laloretoyya (63) · 7 years ago

Muy bien explicado. Gracias. Es muy útil.

$0.00

[-]

jogreh (54) · 7 years ago

De nada! espero que te sirva ^^

$0.00

[-]

kurtringimages (48) · 7 years ago

Post de los barbaros. Excelente. Y saludos futuro colega de la UCSA.

$0.00

[-]

jogreh (54) · 7 years ago

Hey! otro Ucista que bien! jaja nos vemos en el hospital.

$0.00

[-]

emilymorua (41) · 7 years ago

@jogreh gracias por las recomendaciones, nos conocimos ayer en el Meet-UP Maracay @Cervantes
me parece excelente tu aporte ! un abrazo!

$0.00

[-]

mvelazco (42) · 7 years ago

Necesitaba esta guía gracias!

$0.00

[-]

jogreh (54) · 7 years ago

Espero que te sea muy útil. Saludos

$0.00

[-]

jcalero (57) · 7 years ago

Buen articulo, llevo tiempo siciendome que debería aprender mejor estas cosas pero la pereza me gana. Al final, desarrolle mi propio método donde sólo uso una etiqueta para todo el post, pero es limitado porque me impide hacer cosas como encajar fotos en medio del texto o separar por columnas, aunque tampoco es necesite hacer eso con frecuencia.