`Saludos amigos Steemers!`

Si ya tienes tiempo publicando artículos en Steemit de seguro has tenido que investigar sobre lo que es el "MarkDown" y el "HTML" esto debido a que para poder dar formato a tus publicaciones con el fin de embellecerlas es necesario que manejes sus sintaxis.

En Steemit para crear un articulo puedes usar como bien sabes cualquiera de estos dos lenguajes, incluso puedes combinarlos, existe el debate de cual de los dos es mas fácil de usar, si eres como yo de la era dinosaurica de "Word Perfect" y del mundo antes del "WYSIWYG" 😜 entonces no tendrás ningún problema con HTML, si no te agrada escribir tanto código usando etiquetas y eres capaz de recordar símbolos como *, # etc, entonces debes usar "MarkDown". este articulo por los momentos no tocaremos este ultimo.

Mi opinión muy personal:Debes aprender "HTML", Por que?

Es el lenguaje original y universal de marcas de la Web.
Es reconocido por todos los navegadores sin excepción.
Conocer el HTML te inicia de alguna manera en el diseño Web.
También porque es mas fácil recordar palabras que símbolos.

Hoy voy a brindarte una forma sencilla y simple de como aprenderlo específicamente para Steemit, usando lo que yo llamo una plantilla estándar como la que ves aca abajo.

Obtener el código de la Plantilla

Básicamente debes copiar el código he insertarlo en el "Raw Editor" de Steemit y modificar en donde te indico.

Ahora voy a describir cada una de las etiquetas usadas en la plantilla. Con estas puedes hacer bastante para darle el formato deseado a tu publicación.

`Etiqueta: <html> </html>`

Aunque en el editor de steemit no la necesites o no sea necesaria lo mas recomendable es ponerla, esta etiqueta es la principal porque es la que define que estamos usando este lenguaje de marcas, todo el código o el conjunto de las demás etiquetas deben ir dentro de ellas.

`Etiqueta: <div class=text-justify> </div>`

El enunciado de esta etiqueta permite acceder a una clase que permite justificar (text-justify), centrar (text-center), poner a la izquierda (text-left) o la derecha (text-right) todo el texto que este dentro de ella. Es la segunda etiqueta a usar en el caso de la plantilla, puedes usar tantos <div> como sea necesario dentro de un documento html. También puedes usarlo en cualquier parte dentro del mismo documento.

`Etiqueta: <h1> </h1>`

Esta etiqueta es la mas usada, por que ella te permite convertir tu texto en un titulo, es decir, con esta puedes poner diferentes tamaño al las letras para usarlas como títulos o sub-títulos.. Ejemplo:

<h1> </h1>	Titulo Nro. 1
<h2> </h2>	Titulo Nro. 1
<h3> </h3>	Titulo Nro. 1
<h4> </h4>	Titulo Nro. 1
<h5> </h5>	Titulo Nro. 1
<h6> </h6>	Titulo Nro. 1

`Etiqueta: <code> </code>`

Permite insertar código de la mayoría de lenguajes de programación, en el caso de esta publicación la usamos para sombrear los títulos de cabeceras.

`Etiqueta: <p> </p>`

Nos permite dividir el texto en párrafos, cada vez que esto ocurre hace un salto de linea. A la hora de escribir una publicación es la forma mas ordenada de trabajar.

`Etiqueta: <hr>`

Inserta una linea horizontal que generalmente se usa para separar o seccionar trozos de texto dentro de un documento html. Existe también una etiqueta parecida bastante útil <br> esta hace un salto de linea. Cabe mencionar que estas etiquetas no tienen etiqueta de cierre como la mayoría de las etiquetas en html.

`Etiqueta: <ol> </ol>`

Genera una lista numérica. Esta también pertenece al conjunto de etiquetas <ul> </ul>

Tipo de listado	Código	Resultado
Numérico	<ol> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ol>	Uno Dos Tres
Simbolos	<ul> <li>Símbolo 1</li> <li>Símbolo 2</li> <li>Símbolo 3</li> </ul>	Símbolo 1 Símbolo 2 Símbolo 3

`Etiqueta: <center> </center>`

Permite centrar tanto un texto como una imagen dentro de un documento. Básicamente tiene la misma funcionalidad de centrar que tiene la etiqueta <div>

Este texto esta al centro.

`Etiqueta: <img src="url.png">`

Esta etiqueta nos permite insertar una imagen, donde "img" es el nombre de la etiqueta, "src" es la abreviatura de "source" y "url.png" representa la dirección donde tu imagen esta alojada, cabe destacar que los principales formatos de imágenes que soportan los navegadores son .png, .gif, .jpg

`Etiqueta: <a href="url"> </a>`

Importante etiqueta que nos permite enlazar un texto o una imagen, donde "a" es el nombre de la etiqueta, "href" es la abreviatura de "Hipertext reference" que nos permite colocar la url a enlazar.

<a href="url-de-la-plantilla">Plantilla</a>

El resultado es un Texto enlazado: Plantilla

`Etiqueta: <sub> </sub>`

Generalmente usada para agregar notas al final de un párrafo o documento, define un fragmento de texto que se debe mostrar, por razones tipográficas, más bajo, y generalmente más pequeño, que el tramo principal del texto, es decir, en subíndice. Caso contrario a la etiqueta <sup> que muestra el texto mas alto es decir en superíndice

Este es un texto en _subíndice

Este es un texto en ^superíndice

`Etiqueta: <blockquote> </blockquote>`

Esta etiqueta crea una cita en bloque, generalmente usada para destacar alguna cita propia o de otro autor, en este caso de la plantilla la usamos para destacar la conclusión.

En HTML recordar palabras en menos difícil que recordar símbolos como en Markdown!

`Etiqueta: <strong> </strong>`

Etiqueta que permite colocar un texto en Negrita, también puedes usar como <b> </b> tiene el mismo efecto, "b" es la abreviatura de "bold"

Usando <strong> </strong>	Usando <b> </b>
Este texto esta en Negrita	Este texto esta en Negrita

`Etiqueta: <em> </em>`

Nos permite hacer "Énfasis" en el texto, es decir, permite colocar el texto en "Italic", tambien se puede usar la etiqueta <i> </i> tiene el mismo efecto.

Usando <em> </em>	Usando <i> </i>
Este texto esta en Italic	Este texto esta en Italic

<--- Últimos Post --->