<p><div class="text-justify">Cuando inicié steemit desconocía completamente lo que es HTML y Mark Down. Para realizar mis post tuve que acudir a muchos tutoriales y guías, los cuales agradezco muchísimo. Pero hace unos meses empecé a trabajar con ciertas páginas que también usan este lenguaje (HTML), y me di cuenta de que muchas de las cosas que había aprendido  realmente estaban incompletas. Entonces empece investigar, buscar otros lugares para aprender. Cuando volví a steemit a escribir, mientras usaba los códigos que había aprendido en otros lados me tope con la sorpresa de que ¡steemit no los procesaba!</div></p>
<p><div class="text-justify"> Por eso decidí hacer este pequeño tutorial o guía para entender mejor el HTML. No soy experta en el tema, más bien me he dado cuenta que es un mundo inmenso del que poemos aprender y que tiene tanto por enseñarnos. Espero que esta primera parte les sea de ayuda .</p></div>


<strong><h1><p>¿QUÉ ES HTML?</p></h1> </strong>	
<p><div class="text-justify">Este es un lenguaje de marcado o también conocido como lenguaje de marcas, más no un lenguaje de programación como muchos piensan. Consiste en una serie de elementos que encierran o envuelven diferentes partes del texto para que éste actúe de cierta forma. Estos elementos están constituidos por una etiqueta de apertura, el contenido y una etiqueta de cierre. </p></div>

<p>Por ejemplo, si queremos identificar un párrafo usamos <strong> < p> </strong> para abrir y <strong>< /p></strong> para cerrar:<p>

https://cdn.steemitimages.com/DQmc1srrpRhL7Rm6G8TWecyuA1HUZEgjDTJVDCsrL7SEPun/HTML.png


<p><h1>ATRIBUTOS</h1></p>

<div class="text-justify"><p>Los elementos también pueden tener atributos. Los atributos son aquella información adicional que no se muestra en el texto real. Permiten modificar la estructura de este, su color el tamaño y tipo de letra etc. </p> </div>

<li>Los atributos deben tener un espacio entre él y el nombre del elemento. </li>
<li> Un signo igual seguido al nombre del atributo. </li>
<li> El valor de dicho atributo encerrado entre comillas. </li>
<br>



https://cdn.steemitimages.com/DQmY11NqvZcabVCvMR3H97MZK3X4Svx2vN7Tpew2Xtd2aPQ/11667409_1049025131798008_6207860357585228665_n.png

<div class="text-justify">Sin embargo, por razones que desconozco, el <strong>código fuente</strong> de steemit no está hecho para captar elementos "< p>". No podemos, por ejemplo, justificar un texto colocando < p align="justify"> sino a través del elemento de división < div class="text-justify"> . Los elementos de división o < div> se utilizan en la creación páginas web como elementos de agrupación en secciones. </div>

> <strong> El código fuente</strong> es una serie de líneas que indican los pasos que debe seguir un ordenador para poder ejecutar el programa. 


<h2> LOS ELEMENTOS EN BLOQUE Y LOS ELEMENTOS EN LÍNEA. </h2>

<div class="text-justify">Los <strong> elementos elementos en bloque</strong>, en las paginas web suelen ser elementos estructurales que  representan párrafos, listas, etc. Los contenidos que se encuentren antes y después estarán en diferentes líneas, ocupando todo el espacio del elemento principal como un "bloque". </div>

Por  ejemplo:
<br>
>Primero < p> Segundo </ p> < p> Tercero < /p> < p>Cuarto </ p>

>Primero <p> Segundo </p> <p> Tercero </p> <p> Cuarto</p>

Los <strong>elementos en línea</strong> son aquellos que están contenidos en un nivel de bloque, solo ocupan el espacio que limita con las etiquetas.

Por ejemplo: 

> < strong>Primero</ strong>< em>Segundo</ em> < strong> tercero </ strong> :

> <strong>Primero</strong><em>Segundo</em><strong>Tercero</strong>

<H1> ELEMENTOS PARA EDITAR TEXTOS EN STEEMIT </H1>
 
<h3>TAMAÑO DE LETRAS</h3>

Para asignar un tamaño específico a las letras de nuestro texto, usaremos el elemento <strong>< Hx> </ Hx></strong> en donde <strong> x </strong>  será un número que podrá optar valores del 1 al 6, siendo el primero más grande que el ultimo. 

https://cdn.steemitimages.com/DQmUU1uBb8nGF8LWF2EzNmTbowGMTx3WBWxxjKd4ib78qom/jsdkjasd.png
<h1>Texto de prueba</h1>
<h2> Texto de prueba </h2>
<h3> Texto de prueba </h3>
<h4> Texto de prueba </h4>
<h5> Texto de prueba </h5>
<h6> Texto de prueba </h6>
<br>

<h3> JUSTIFICAR TEXTOS </h3>

Usaremos el siguiente elemento con su respectivo atributo y la forma en que queremos que "actúe" nuestro texto <strong> < div class="text-justify"> </ div> </strong>

https://cdn.steemitimages.com/DQmRWAA8Cuet9VHB3zuYwTiEohZ64NVj57Lfnk7rGVV1DvE/jkasdjas.png
<br>
<div class="text-justify"> Texto de prueba Texto de Prueba Texto de Prueba Texto de Prueba Texto de prueba Teto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de pruebaTexto de pruebaTexto de prueba.</div>
<br>
<h3> CENTRAR TEXTOS E IMÁGENES </h3>
<br>
 Usaremos el elemento <strong> < center> </ center> </strong> para centrar tanto imágenes como textos.

https://cdn.steemitimages.com/DQmacyWYcDsoRQoVKGWoBWgnXr6HVoTJmpu5xzsacQ7fByZ/textodeprueba.png

<strong><center> Texto de prueba </center></strong>
<br>
<center> https://quintacoquimbo.cl/wp-content/uploads/2017/10/imagen-de-prueba-320x240.jpg </center>
<br>
<h3> COLOCAR UNA IMAGEN A LA IZQUIERDA </h3>
Colocaremos el siguiente código: <strong>< div class="pull-rigth"> < imag src="Link de la dirección de la imágen"> < /div></strong> y seguido de esto, escribiremos el texto que queramos.  Si queremos que el texto esté justificado, colocaremos el código. 
<br>
https://cdn.steemitimages.com/DQmcBWKVktb1ge75qjCcnfp4bhUK4XvEi6G31VBVduyvqGS/tex.png
<br>
<div class="pull-right"> 
<img src="https://quintacoquimbo.cl/wp-content/uploads/2017/10/imagen-de-prueba-320x240.jpg"> </div> <div class="text-justify"> Texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba  texto de prueba  texto de prueba  texto de prueba  texto de prueba  texto de prueba  texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba.</div>
<br>
<br>
<br>
<h3> COLOCAR UNA IMAGEN A LA DERECHA</h3>
<br>
<p>Para colocar la imagen a la derecha, colocaremos el mismo código de la imagen a la izquierda, pero en vez de usar "pull-rigth", usaremos "pull-left".</p>
<br>
https://cdn.steemitimages.com/DQmPVqxdLmkH4hKpb6V5vYPVRxmYH5LYZ3w7e4QSNBB8Yzw/tett.png
<div class="pull-left"> 
<img src="https://quintacoquimbo.cl/wp-content/uploads/2017/10/imagen-de-prueba-320x240.jpg"> </div> <div class="text-justify"> Texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba  texto de prueba  texto de prueba  texto de prueba  texto de prueba  texto de prueba  texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba.</div>
<br>
<br>
<br>
<h3> DOS COLUMNAS DE TEXTOS </h3>
<br>
Usaremos los códigos:  <strong> < div class="pull-left"> </ div> < div class="pull-right"> </ div> </strong>
<br>
https://cdn.steemitimages.com/DQmPoYfh3Fm8ehmPU1XTnaHQabGhX9RYnoLWNqaupeeNxgY/borrar.png

Se vería así: 

<div class="pull-left"> Texto de prueba columna 1</div> 
<div class="pull-right"> Texto de prueba columna 2 </div>
<br>
<br>
<br>
<h3> LISTAS </h3>
<br>
La forma más rápida en steemit de hacer listas es colocando un asterisco (*) seguido de un espacio. Sin embargo, para creaciones de páginas web, el elemento usado en HTML es  <strong> < li> < /li></strong>
<br>

https://cdn.steemitimages.com/DQmYw7mqBtr3ZdXwjuUnFRkiNHnntRB7XDQj7ZebEZ3EQrh/borrar.png
<br>
Se ve de esta manera:
<li> Primero</li>
<li> Segundo</li>
<li> Tercero </li>
<li> Cuarto </li>
<br>
<h3>NEGRITAS Y CURSIVAS</h3>
<br>
<p><strong> Negritas </strong>: para resaltar el texto en negrita con lenguaje al HTML,  usaremos el elemento <strong>< strong> </ strong></strong></p>
https://cdn.steemitimages.com/DQmZbP8eE7CaBP6y1znWwRn7tR3vPXQJ1bMq8uyJUNpGYnB/borrarr.png

<p><strong> Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba  </strong></p>

<p><strong> Cursiva </strong>: el elemento a usar será <strong>< em>< /em></strong> </p>

https://cdn.steemitimages.com/DQmQ5WDzebqRSA5xYhoa2aSypeaPLo8fkf75t2VTMZurDDh/sdsdffg.png

<em>Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba </em>

https://cdn.steemitimages.com/DQmfHtzPmW8CyTVPabyzSj8Ff372JnVJz7a1QF1viDUdzfw/eparador.jpgR

Rcuerden que  si al comenzar sus publicaciones usan el elemento < html>, deberan cerrarlo </ html> 

<br>
<p><strong><center>Espero  que sea de utilidad para ustedes. Comenten sus opiniones y sugerencias, si saben alguna información que pueda ser útil o algún otro código.</center> </strong></p>