Cómo utilizar MarkDown Parte 2

in #spanish7 years ago

Cómo utilizar MarkDown Parte 2

mini imagen.png
Foto por 3mikey5000 Fuente

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

¡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

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:

Primer Paso

  • 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.

Segundo Paso

  • 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.

  • 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

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.


Tercer Paso

  • 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:

Codigo

<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,


Resultado

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.

Agregar Etiqueta de Autor

  • 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.

Codigo

<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>

Resultado


Autor IanZA Fuente

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.

  • 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.

Como Crear una Galeria de imagenes

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.

  • La etiqueta de galería de imágenes, funciona de la siguiente manera:

Codigo

||||
|---|---|---|
|Link imagen|link imagen|link imagen|

  • 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:

Codigo

||||
|---|---|---|
|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|

Resultado


Agregar información y titulo a cada imagen

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;

Codigo

|titulo|titulo|titulo|
|---|---|---|
|Link imagen|link imagen|link imagen|
|Informacion|Informacion|Informacion|
  • 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.

Código completo

|titutlo|titulo|titulo|
|---|---|---|
|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|https://i.imgur.com/L2rfgIG.png|
|informacion|Informacion|Informacion|

Resultado

makemoneynowmakemoneynowmakemoneynow
Aca podran agregar la información que deseenAca podran agregar la información que deseenAca 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.


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.

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

mini imagen 2.png

Sort:  

Excelentes tips! Gracias por ayudar a los hispanohablantes! XD

De nada @janswill, seguire subiendo informacion para ayudar a la comunidad de stemit. Saludos

¡Buenísimo! Me servirán mucho estos consejos para mejorar mis artículos. Tienes mi apoyo.

Gracias @luisvy, esa es la idea. Que el contenido que suba, sea de ayuda para todos. Saludos

Que bueno es conseguir este tipo de post que nos van ayudando a conocer cada día más la mejor manera de publicar post que sean no sólo atractivos por el contenido sino también por la manera en que se visualiza el mismo.

Gracias por brindar ayuda a todos en Steemit.

Gracias, seguire subiendo contenido jeje. Saludos @crisgauna

Es justo lo que estaba buscan @makermoneynow queria ponerle orden y vistocidad a los post, aunque se descuadran unos parrafos pero ya estoy en la solución.

Por cierto, cambiaron el estilo en el que se publican ahora los post? no me aparece la barra de herramientas o el markdown, hay ciertas funciones que no me funcionan, seguire intentando sino le inyectare solo HTML .

Agradecido compañero.

El estilo de Markdown sigue funcionando y HTML igual. Gracias por comentar, Saludos.

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

Este Post ha recibido un Upvote desde la cuenta del King: @dineroconopcion, El cual es un Grupo de Soporte mantenido por 5 personas mas que quieren ayudarte a llegar hacer un Top Autor En Steemit sin tener que invertir en Steem Power. Te Gustaria Ser Parte De Este Projecto?

This Post has been Upvote from the King's Account: @dineroconopcion, It's a Support Group by 5 other people that want to help you be a Top Steemit Author without having to invest into Steem Power. Would You Like To Be Part of this Project?

brutal este post y me cae como anillo al dedo para el concurso de fotografia que estoy haciendo ...que bien , mil gracias bro!

De nada @ubikalo, ahora podras utilizar mas tipos de ediciones en tus post de fotografia. Saludos y gracias por comentar.

Muy buen post como siempre, muy didáctico e ilustrativo. Esta información es realmente muy útil para hacer que nuestros post sean mas estructurados y estéticos.
Saludos amigo!

Gracias @raiser, un aporte a la comunidad de steemit. Saludos amigo.

Me encanta.. muchas gracias por esta genial aportación....!!!!

genial, gracias por comentar @rosangls-alexa. Saludos

Al detalle, excelente... 😎 @makemoneynow !!!

firmaPieSteemitMar2018.png

jeje, gracias bro! Saludo @dgcarlosleon.