Aprende a utilizar código HTML y Markdown.

in #steemit7 years ago (edited)
Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos ustedes. He estado investigando desde que inicie mi viaje por Steemit y tras ver diversos post, me fije en algo que para muchos no es muy importante, pero la verdad es que si lo es. La gramática y ortografía no lo son todo para alcanzar el éxito en esta plataforma, también lo es su diseño y estructura, tenemos que tener en cuenta que un post bien ordenadito atrae sin duda alguna, más público. Entonces me dije, la cantidad de personas nuevas en Steemit crece continuamente y no todos saben dónde buscar, por ello decidí hacer dar algunos de los códigos Markdown y HTML para que puedan escribir un post con mejor presentación. Claro está que no solo los nuevos necesitan de esta información, también hay personas que llevan cierto tiempo navegando por aquí y no saben cómo, así que sin discriminación alguna los invito a todos y espero serles de gran ayuda.

PicsArt_1522029050267.jpg


Ahora sí, comenzare a explicarles de la forma más sencilla y variada, para hacer de esto algo más simple.

Titulo.

Primero lo primero, el titulo. Este lo puedes colocar de 6 tamaños y te mostrare las dos maneras que conozco.

# Aprende a utilizar HTML y Markdown.
## Aprende a utilizar HTML y Markdown.
### Aprende a utilizar HTML y Markdown.
#### Aprende a utilizar HTML y Markdown.
##### Aprende a utilizar HTML y Markdown.
###### Aprende a utilizar HTML y Markdown.

Y este primer ejemplo se vería así:

Aprende a utilizar HTML y Markdown.

Aprende a utilizar HTML y Markdown.

Aprende a utilizar HTML y Markdown.

Aprende a utilizar HTML y Markdown.

Aprende a utilizar HTML y Markdown.
Aprende a utilizar HTML y Markdown.

Nuestra siguiente opción es esta:

<h1> Aprende a utilizar HTML y Markdown.</h1>
<h2>Aprende a utilizar HTML y Markdown.</h2>
<h3>Aprende a utilizar HTML y Markdown.</h3>
<h4>Aprende a utilizar HTML y Markdown.</h4
<h5>Aprende a utilizar HTML y Markdown.</h5>
<h6>Aprende a utilizar HTML y Markdown.</h6>

Y se verá así:

Aprende a utilizar HTML y Markdown.


Aprende a utilizar HTML y Markdown.


Aprende a utilizar HTML y Markdown.


Aprende a utilizar HTML y Markdown.


Aprende a utilizar HTML y Markdown.

Aprende a utilizar HTML y Markdown.


Separar párrafos o salto de linea.

Tienes dos opciones estas <p> o esta #estas opciones son muy útiles ya que sin esto no se puede separar el titulo del párrafo.

# Titulo *enter* <p> *enter* Texto

# Titulo *enter* # *enter* Texto

Sería algo así.

Titulo

Texto.

Titulo

Texto.

Obviamente ambas se verán igual.


Centrar.

Solo tienes que usar este código:

<center>Texto centrado</center>

Y quedara así:

Texto centrado


Justificado.

Este es el código para tu texto justificado.

<div class='text-justify'>Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos ustedes. He estado investigando desde que inicie mi viaje por Steemit y tras ver diversos post, me fije en algo que para muchos no es muy importante, pero la verdad es que si lo es. La gramática y ortografía no lo son todo para alcanzar el éxito en esta plataforma, también lo es su diseño y estructura, tenemos que tener en cuenta que un post bien ordenadito atrae sin duda alguna, más público.</div>

Y se verá así:

Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos ustedes. He estado investigando desde que inicie mi viaje por Steemit y tras ver diversos post, me fije en algo que para muchos no es muy importante, pero la verdad es que si lo es. La gramática y ortografía no lo son todo para alcanzar el éxito en esta plataforma, también lo es su diseño y estructura, tenemos que tener en cuenta que un post bien ordenadito atrae sin duda alguna, más público.

Vínculos.

Usaras estos dos señoritos juntos []()

Como podras ver en mi anterior post de [Dismenorrea](https://steemit.com/health/@canelita/dismenorrea-un-trastorno-de-cierta-relevancia-dolor-menstrual)

Y veras algo así:

Como podras ver en mi anterior post de Dismenorrea


Citar texto.

">" o ">>" Ejemplo.

>Se le llama así cuando el dolor es más fuerte y permanece.

>Se le llama así cuando el dolor es más fuerte y permanece.
>>Suele aparecer antes de la menstruación y puede disminuir o aumentar durante la misma, o continuar en todo el ciclo.

Se vera así:

Se le llama así cuando el dolor es más fuerte y permanece.

Se le llama así cuando el dolor es más fuerte y permanece.

Suele aparecer antes de la menstruación y puede disminuir o aumentar durante la misma, o continuar en todo el ciclo.


Texto a la izquierda y a la derechas.

Izquierda.

<div class='pull-left'> Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos usted.</div>

Derecha.

<div class='pull-right'> Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos usted.</div>

Izquierda. --- Derecha.

Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos usted.
Un gran saludos a todos ustedes comunidad y bienvenidos a este post que espero y sea de gran ayuda para todos usted.

Listas.

Estas son muy importantes a la hora de enumerar o clasificar varias cosas, incluso mencionas tus canciones favoritas.

* Primero.
* Segundo.
* Tercero.

- Primero.
- Segundo.
- Tersero.

1. Primero.
1.Segundo.
1.Tercero.

Resultado:

  • Primero.
  • Segundo.
  • Tercero.
  • Primero.
  • Segundo.
  • Tersero.
  1. Primero.
  2. Segundo.
  3. Tercero.

Línea divisoria.

Así podrás dividir los párrafos a tu gusto, así como llevo rato haciendo.

-------


Texto rojo

Cuando quieras resaltar algo, este será el código ideal para ti.

<div class="phishy">El código ideal para ti.</div>

¿Cool verdad?

El código ideal para ti.

Texto tachado.

Ni la más remota idea para que es este código, si alguien sabe, por favor hágamelo saber
<strike> Texto tachado.</strike>
Texto tachado.


Tablas.

Código a utilizar:

| Síntomas | Nivel (Muy alto, alto, medio, bajo) |
|-----| ----- |
| - Náuseas y vomito. | Alto |

Tabla.

SíntomasNivel (Muy alto, alto, medio, bajo)
- Náuseas y vomito.Alto

Negrita, cursiva y negrita-cursiva.

Para esta te tengo tres formas.

**Negrita**

__Negrita__

<strong>Negrita</strong>

*Cursiva*

_Cursiva_

<em>Cursiva</em>

***Negrita-cursiva***

___Negrita-cursiva___

<em><strong>Negrita-cursiva</em></strong>

Se ve así:

Negrita - Negrita - Negrita

Cursiva - Cursiva - Cursiva

Negrita-cursiva - Negrita-cursiva - Negrita-cursiva

De acuerdo, seré sincera, tras haber hecho todo esto puedo ver que colocar tantos códigos me ha puesto con los pelos de punta, pero no es nada difícil amigos, espero y les resulte de gran ayuda, posteriormente veré si ya lueguito les enseño códigos para sus imágenes, espero y no me resulte tan difícil de hacer, porque es algo que sin duda me gusta hacer, colocar una imagen aquí y por allá, es fantástico.


Dirección

Bueno mi gente, me despido y espero tengan un feliz día. Besos y abrazos electrónicos para todos.

Sort:  

excelente post, bastante completo y de mucha ayuda, gracias por tomarte el tiempo de escribirlo, mucho exito.

Gracias @jescrip ;) La verdad espero ser pieza de ayuda para quien lo necesite, teniendo en cuenta que la union en esta plataforma es fundamental.

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

muy buen post @canelita lo estare visitando muy amenudo, GRACIAS.

Que bueno rusito

gracias por la ayuda, esta excelente. 😉

Un placer ayudar amiga ;)

Hola @canelita, muchas gracias por compartir, me había dado la tarea días atrás para aprender, pero aún me faltaban y faltan algunos códigos más he anotado varios de tu lista. ¿Solo puede cambiarse a rojo? ¿No permite otros colores? La opción que copié de HTML, la probé y no me funcionó