Markdown y HTML: códigos básicos para darle estilo a un post.

in #spanish6 years ago (edited)
Hola a todos chicos, hoy hablare un poco sobre markdown y HTML, o al menos de los mas básico, ya que en varias de las comunidades que frecuento aun veo muchas dudas sobre el tema, como se hacen algunos códigos, o porque hay diferentes formas de llegar a un mismo fin, en este caso haciendo referencia a las formas de obtener un texto en "Negrita" y las formas de tener texto de manera "Cursiva"

baner markdown2.jpg

¿Que es el markdown?

Es la forma en la que agregamos formato o características al texto, se le conoce como el medio de diseño de texto para redacción Web el cual es muy usado para blogs y paginas web en cuanto a como se maneja el texto.

¿Que es HTML?

Sus siglas significan HyperText Markup Language o lenguaje de marcas de hipertexto, Es muy parecido al Markdown, con la diferencia en el uso códigos entre signos de mayor que y menor que, para el desarrollo de paginas web

Realmente no es nada complicado manejarlos, solo se trata de agregar cogidos a lo largo de tu redacción para agregar estilo a tu post, de esta forma será mas atractivo visualmente, e incluso puedes agregar un toque artístico a tu blog.


Negrita

Hablemos primero sobre las distintas formas de agregar negritas a un párrafo o a una palabra en especifico, y porque son varias formas, ya que existe código básico y códigos especiales para aplicar la característica dentro de otro código, poco a poco iré explicando.

Primer código

El primero seria usando dos asteriscos antes y después de la frase o la palabra a la que deseas dar formato, de esta forma podrás colocarlo en negritas

Ejemplo:

Codigo: Captura de pantalla 2018-07-03 a la(s) 16.37.08.png
Resultado: Todos los perros van al cielo

pero si nos encontramos dentro de otro código como por ejemplo, un código para justificar el párrafo, que pasaría?

Captura de pantalla 2018-07-03 a la(s) 16.42.37.png

todos los perros **van al cielo**

El código se vuelve inútil, para eso existe otro código que se usa en estos casos especiales.

Segundo código

El segundo código se basa en ubicar una simple B entre los símbolos mayor que y menor que, de esta manera tendremos un formato en negrita sin ningún problema.

Ejemplo:

Codigo: Captura de pantalla 2018-07-03 a la(s) 16.45.03.png
Resultado: Todos los perros van al cielo

De esta manera podrás usar el formato Negrita en cualquier lugar sin importar el código que uses en ese momento.


Cursiva

Algo que mucha gente quiere en sus textos es usar letras cursivas, ya sea para remarcar una palabra o para un párrafo entero como el de una cita, sin importar que, es muy popular usar este tipo de formato de texto, al igual que la Negrita tiene varios códigos según su uso.

Primer código

El primero seria usando un asterisco antes y después de la frase o la palabra a la que deseas dar formato, de esta forma podrás colocarlo en cursiva

Ejemplo:

Codigo: Captura de pantalla 2018-07-03 a la(s) 17.03.56.png
Resultado: Todos los perros van al cielo

pero si nos encontramos dentro de otro código como por ejemplo, un código para justificar el párrafo, que pasaría?

Captura de pantalla 2018-07-03 a la(s) 17.03.34.png

todos los perros *van al cielo*

El código se vuelve inútil, para eso existe otro código que se usa en estos casos especiales.

Segundo código

El segundo código se basa en ubicar una simple i entre los símbolos mayor que y menor que, de esta manera tendremos un formato en cursiva sin ningún problema.

Ejemplo:

Codigo: Captura de pantalla 2018-07-03 a la(s) 17.03.10.png
Resultado: Todos los perros van al cielo

De esta manera podrás usar el formato cursiva en cualquier lugar sin importar el código que uses en ese momento.


Hablemos un poco sobre los códigos para centrar y justificar párrafos o títulos, ya que en parte es algo muy importante para estilizar la redacción de tu post, la visualización y el efecto que quieras darle.

Solo hay una forma de hacer cada una, no existen varios códigos, así que debería ser menos complicado de hacer, ya queda a tu criterio personal como lo puedas usar y porque, yo por lo general tengo todos mis párrafos justificados y mis títulos centrados.


Centrado

Al igual que con los últimos códigos de cursiva y negrita, este formato se obtiene al escribir "center" entre símbolos de mayor que y menor que, no tiene nada de complicado, así que debería ser fácil recordarte el código de memoria.

Ejemplo:

Codigo: Captura de pantalla 2018-07-03 a la(s) 17.19.39.png
Resultado:

Todos los perros van al cielo

Justificado

Para justificar un párrafo se usa un código un tanto mas complicado para memorizar y usar cada vez que quieras, yo por lo menos lo tengo guardado en una nota y lo copio y pego cada vez que lo voy a usar.

Código: Captura de pantalla 2018-07-03 a la(s) 17.22.29.png

Ejemplo:

Codigo: Captura de pantalla 2018-07-03 a la(s) 17.22.29.png
Resultado:

Todos los perros van al cielo



Ahora queda de tu parte inventar distintas formas de usar estos códigos, maneras creativas que puedan ayudarte a hacer mejores post, con mas estilo y mas llamativos, combinar códigos siempre es de gran ayuda, mas adelante les traeré mas códigos de cosas importantes, y otras muy rebuscadas, desde como crear tablas, hasta como crear botones de invitación.






Sort:  

Hey i gave you an upvote dont forget to follow me for future upvotes & i always follow back
fb/john.thephotoeditor.56

Hola amigo, muy buen post! Gracias por aclararme esa duda de usar correctamente los códigos de HTML... Aunque me queda una duda mas, ¿como puedo colocar dos o mas párrafos justificados sin que se me "unan" los dos? ya que se me pegan los dos párrafos, y no se separan o dejan una linea de por medio como es lo normal... Te agradecería que me solucionaras ese pequeño error... Saludos!

Usalo de esta manera, para poder separar los párrafos justificados

Captura de pantalla 2018-07-03 a la(s) 18.10.02.png

Hola @moissrams , gracias por esa aclaración de un código dentro de otro código, era una de mis dudas.
Saludos

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Moissrams 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.

Coin Marketplace

STEEM 0.28
TRX 0.13
JST 0.032
BTC 60918.56
ETH 2919.11
USDT 1.00
SBD 3.56