# <center>Cómo utilizar MarkDown Parte 2</center>

![mini imagen.png](https://steemitimages.com/DQmW4Z6Nwq3q1kxpwFu62FrefZdgE3Z1UMF6yCeyzbY66V1/mini%20imagen.png)
<sub>Foto por 3mikey5000 [Fuente](https://pixabay.com/es/de-fondo-circuito-gris-digitales-2426328/)</sub>

Hola que tal Steemianos, hoy les dejare la Parte 2 de la guía de cómo utilizar Markdown, estos nuevos comandos los podrán ir aplicando en sus post, para hacerlos más atractivos visualmente.

***

> Antes de Empezar

* Si aun no revisan la primera parte de cómo utilizar markdown, les dejare el siguiente link para que r]evisen el post. [Cómo utilizar Markdown](https://steemit.com/spanish/@makemoneynow/como-utilizar-markdown)

***

>¡Empecemos!

Para que explicar nuevamente que es MarkDown y HTML, si hemos visto eso en el capítulo anterior de esta guía, por lo tanto, pasaremos a explicar qué etiquetas utilizaremos y aprenderemos hoy, las siguientes etiquetas nombradas serán las que aprenderemos: 
* Cómo colocar un texto en lado derecho o izquierda y una Imagen.
* Como hacer una pequeña galeria de imagenes.

***

## Etiqueta Texto al lado de Imagen

<div class="text-justify">

Esta etiqueta funciona complementando Etiquetas de Markdown y HTML, les enseñare la etiqueta de la forma más práctica posible para que puedan aplicar a futuros post de ustedes. Adicionalmente agregaremos la fuente sobre la imagen insertada al lado del texto, para atribuir créditos al autor de dicha imagen, sin importar el tipo de fuente de donde venga. Ya que estamos generando ingresos y una mínima gota de agradecimiento al autor vale. Esta etiqueta funciona de la siguiente manera:</div>

### Primer Paso

<div class="text-justify">

* Les mostrare la etiqueta por parte y como la iremos complementando entre cada una, Lo primero es que tendremos una etiqueta compuesta por `<div class="pull-left">< img src="image"></div>` Algo larga, pero sencilla de entender. En la Parte donde dice `"Pull-Left"` es la orden que se le entrega a la imagen agregada. Esta función puede ser o `"Pull-Left"` o `"Pull-Right"`, Por ende ustedes serán los que indicarán la orden a la imagen.</div>

***

### Segundo Paso

<div class="text-justify">

*  La siguiente parte de esta etiqueta `<div class="pull-left">`
`< img src="image"></div>` es, `src="image"` En la parte donde dice `"image"`, agregaran el link de la imagen para así insertarla en el. Este link de imagen debe ser copiado directamente de la dirección. Si no copian el link de forma directa, no saldrá la imagen.</div>

* Un link completo es asi; `https://pixabay.com/es/le%C3%B3n-africano-melena-cerrar-los-ojos-2888519/`

* Un link directo de Imagen es asi: `https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_960_720.jpg`

<div class="text-justify">

El detalle se notara en cómo termina qué es el tipo de formato de la imagen en este caso es JPG, también puedes encontrar las siglas del final como formato PNG. </div>

***

## Tercer Paso

<div class="text-justify">

* El texto agregado a los lados, deberá ir en la parte de abajo de la etiqueta y automaticamente se vera en la parte derecha o izquierda de ella.
* Bueno, ya sabes como utilizar los 2 comandos de la etiqueta, por ende mostrare los ejemplo con códigos: </div>

### <center>Codigo</center>

<center>`<div class="pull-left"><img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_960_720.jpg"></div>`</center>

Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,

***

### <center>Resultado</center>

<div class="text-justify">

<div class="pull-left"><img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_960_720.jpg"></div>
Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo.</div>

***

### Agregar Etiqueta de Autor

<div class="text-justify">

* Para agregar la etiqueta de autor a la imagen y poder atribuirle un agradecimiento con su link insertado, debemos agregar la siguiente etiqueta en la parte superior de la escrita anteriormente.  `<sub>Autor IanZA [Fuente](https://pixabay.com/es/le%C3%B3n-africano-melena-cerrar-los-ojos-2888519/)</sub>` Esta etiqueta contiene el link de fuente de la imagen y el nombre del autor, si ustedes lo desean escribir.  En el siguiente ejemplo les mostrare como ira escrito el codigo complementado con la imagen a la izquierda y el autor.</div>

***

### <center>Codigo</center>

<center>`<sub>Autor IanZA [Fuente](https://pixabay.com/es/le%C3%B3n-africano-melena-cerrar-los-ojos-2888519/)</sub>`</center>
<center>`<div class="pull-left"><img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_960_720.jpg"></div>`</center>

### <center>Resultado</center>

***

<sub>Autor IanZA [Fuente](https://pixabay.com/es/le%C3%B3n-africano-melena-cerrar-los-ojos-2888519/)</sub>
<div class="pull-left"><img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_960_720.jpg"></div> 

<div class="text-justify"> Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo,Esto es un ejemplo.</div>

***

<div class="text-justify">

* Como pueden ver de esta manera, tenemos un párrafo agregado de una imagen y adicional a eso agregamos la etiqueta de atribución al autor de dicha imagen.</div>

***

## Como Crear una Galeria de imagenes

<div class="text-justify">

Una galería de imágenes, es una tabla e la cual pueden ir incorporando imágenes, para que el seguidor de ustedes o visita pública, revise cada imagen subida por ustedes de manera más ordenada o por secuencia.</div>

<div class="text-justify">

* La etiqueta de galería de imágenes, funciona de la siguiente manera:</div>

### <center>Codigo</center>
<center>`||||`
<center>`|---|---|---|`
<center>`|Link imagen|link imagen|link imagen|`</center>

***

<div class="text-justify">

* Como pueden en donde dice Link imagen deberán agregar el link de cada imagen, para así poder utilizarla en la galería. En el siguiente ejemplo les mostrare como hacerlo:</div>

### <center>Codigo</center>

<center>`||||`
`|---|---|---|`
`|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|`</center>

### <center>Resultado</center>
||||
|---|---|---|
|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|

***

### Agregar información y titulo a cada imagen

<div class="text-justify">

Para agregar un titulo a cada imagen deberán escribir, donde dice titulo en el código del siguiente ejemplo, el que ustedes deseen.

Para que podamos agregar información a cada imagen debemos agregar, una siguiente pestaña de la misma manera que imágenes, como el siguiente ejemplo;</div>

### <center>Codigo</center>

<center>`|titulo|titulo|titulo|`
<center>`|---|---|---|`
<center>`|Link imagen|link imagen|link imagen|`
<center>`|Informacion|Informacion|Informacion|`</center>

<div class="text-justify">

* En la parte donde dice "titulo" deberan agregar el respectivo título de la imagen.

* En la parte donde sale "informacion" podran agregar lo que ustedes quieran a la imagen.</div>

### <center>Código completo</center>

<center>`|titutlo|titulo|titulo|`
`|---|---|---|`
`|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|`
`|informacion|Informacion|Informacion|`
</center>

### <center>Resultado</center>


|makemoneynow|makemoneynow|makemoneynow|
|---|---|---|
|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|
|Aca podran agregar la información que deseen|Aca podran agregar la información que deseen|Aca podran agregar la información que deseen|

***

> A la galería le podras agregar mas cantidad de imagenes, solo agregando mas casillas de `||` Por lo tanto queda a su imaginación seguir agregando de ellas.

***

<div class="text-justify">

Espero que les alla servido de gran ayuda, las siguientes etiquetas, que podrán utilizar para sus post, si te gusto la guia " Como utilizar Markdown parte 2" , te agradeceria bastante un upvote, resteem o comentario. Saludos soy @makemoneynow.</div>

>ANALIZANDO, PENSANDO Y ACTUANDO, SE PUEDE LOGRAR UN MEJOR RENDIMIENTO.

![mini imagen 2.png](https://steemitimages.com/DQmVM1zEAKbqSvV2Eh1qDwCCXi8QBzx8Up8MS9Uu3EicKp3/mini%20imagen%202.png)