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.
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:
| |
| |
| |
| |
| |
|
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> |
|
| Simbolos |
<ul> <li>Símbolo 1</li> <li>Símbolo 2</li> <li>Símbolo 3</li> </ul> |
|
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 ---> |
|---|
Qué gran post amigo! Un millon de gracias por la importantisima información que nos brindas al respecto. En lo particular he usado markdown porque no conocía este otro lenguaje pero voy a usar este porque me parece mucho más fácil de recordar. Voy a restemear este post porque es de mucho valor. Te encontré en el grupo steemit mutual que me parece de verdad un excelente grupo. Saludos!...
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Muchísimas gracias por tu comentario y por compartir mi publicación en tu perfil!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Información muy útil, buen post!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Gracias amigo!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Que buen articulo quw buenisimo articulo gracias
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Gracias amigo, saludos
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hay veces que uso ambos, pero debo admitir que prefiero el HTML. Me gusta más.
Gracias por la información, con esto amplío mi vocabulario HTML :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Me contenta que te haya gustado, si prefiero html porque al final usando markdown en algún momento tendrás que usar alguna etiqueta html, entonces lo que recomiendo es aprenderlo por completo.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Este post me ha caído como anillo al dedo porque hace unos días estaba buscando esto! Mil gracias esto nos ayudará a muchos :D
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Muchas gracias por comentar, un abrazo!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Buen artículo, me gustó... saludos
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Me contenta que te haya gustado, saludos!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Muy bueno tu post compañero sigue así, mucho éxito. Saludos y un fuerte abrazo :D
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Gracias amigo por comentar y leer mi post!!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Tu articulo ha sido votado por el equipo Cooperacion.
"La recompensa viene del esfuerzo".
Atentamente:
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Muchísimas gracias amigos, un fuerte abrazo!!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Excelente aporte para los usuarios que estamos comenzando es una joya muy valiosa, thank you so much friend.
upVote, reSteem and Follow
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Muchas gracias amigo por comentar!!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Que excelente post! Gracias por difundir esta valiosa información que, para los que apenas empezamos a caminar en esta plataforma, es de vital importancia. Me permito darle reesteem y seguirte desde ya. Saludos y exitos.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Muchas gracias por tu apoyo, estoy siempre a la orden si tienes alguna duda! Un fuerte abrazo!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Excelente post amigo, muy instructivo y sencillo.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Gracias muy agradecido por tu comentario!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit