Esta semana el tema de la revista seguirá siendo diferente al mío. Afortunadamente, cada día hay más usuarios nuevos y, siendo mi sección de ayuda para principiantes, me gustaría continuar y hacer una segunda parte sobre el uso del Markdown. No me extenderé mucho más, ya que hay bastante por contar aún, así que voy directamente a las sintaxis de esta semana. Espero que a todos les sea útil.

Primera parte

1. Formato básico de texto
2. Encabezamientos
3. Citas o bloques de texto
4. Listas con viñetas
5. Líneas horizontales
6. Tablas

7. Hipervínculos

Markdown tiene una sintaxis muy sencilla para los hipervínculos. Existen dos estilos, en línea y por referencia.

• En línea

Son aquellos enlaces que ponemos dentro de una misma frase o párrafo.
El texto del enlace se escribe entre corchetes ([Texto del Enlace]) y la URL inmediatamente después entre paréntesis ((http://ejemplo.com)). Por ejemplo, si quiero integrar un enlace a Steemit dentro de una frase o párrafo, tendría que poner [Steemit](https://steemit.com). Como ven, puedo seguir escribiendo normalmente, la palabra Steemit es un enlace y pinchando en ella nos llevará, en este caso, a la página de inicio.

• Referencia

Hemos repetido hasta el cansancio que cuando una imagen o texto no es de nuestra propiedad, hay que citar siempre al autor ¡¿verdad?!
Pues con esta sintaxis queda muy bien visualmente. Lo suyo sería ponerlo justo debajo de la imagen/texto al cual debemos citar la fuente. Se hace así:

[Fuente](link de la imagen/texto)

Ejemplo:

Fuente: Dimitry Anikin en Unsplash

Aunque muchas veces utilizo imágenes de Unsplash o Pixabay, que son libres de derechos de autor bajo Creative Commons, siempre me gusta nombrar al autor, como gesto de agradecimiento.

• Con imagen

También podemos crear hipervínculos con una imagen. Las sintaxis para ello son estas (2):

[<img src="https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">](https://www.google.es/)

[![Foo](https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)](https://www.google.es/)

Resultados:

Si pinchan en cualquiera de las dos imágenes, les llevará, en este caso, a Google.

8. Imágenes

Antiguamente, añadir imágenes a Steemit no era tan sencillo como ahora, que tan sólo hay que arrastrar y soltar, no señoras y señores, antes teníamos que subir las fotos a algún sitio de alojamiento de imágenes, por ejemplo Img Safe, para que se pudiera generar un link que luego teníamos que copiar y pegar aquí. Por supuesto, cuando teníamos la imagen con enlace, era (y es) tan simple como copiar y pegar en nuestro post.
Sin embargo, hay varias cosas que se pueden hacer con una imagen que aún siguen sin ser sencillas, como centrar imágenes, poner una imagen junto a otra, texto junto a una imagen...
Para ello, tenemos que utilizar estas sintaxis:

• Centrar imagen

Ya lo vimos en el anterior artículo, se hace igual que con el texto: <center>IMAGEN</center>

Imagen sin centrar:

Imagen centrada:

• Una imagen junto a otra

Esto es algo que me han pedido mucho durante la semana, aquí está la sintaxis :)

<div class="pull-left">IMAGEN QUE QUIERO QUE VAYA A LA IZQUIERDA</div>

<div class="pull-right">IMAGEN QUE QUIERO QUE VAYA A LA DERECHA</div>

Resultado:

IMPORTANTE: A veces, las sintaxis se pueden romper por algo tan simple como un punto o un paréntesis de más. Yo lo que hago es probar, probar y probar maneras diferentes, hasta que lo consigo.

En este caso, tenemos que tener cuidado con una cosa, el título de la imagen.
Recordemos que, algunas veces, las imágenes que utilizamos tienen título, pues bien, para que funcione la sintaxis de arriba, hay que borrar el título y todos los corchetes y paréntesis, SIEMPRE, de lo contrario, no funcionará.

La imagen que estoy utilizando desde el principio como ejemplo es esta:

Su link original es este: ![dimitry-anikin-383611.jpg](https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg)

Para utilizar esta sintaxis, dejaremos solo esta parte: https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg.

Como ven, no tiene nada más que el link. Si lo dejara como originalmente era, quedaría mal. Pongo el ejemplo con todo para para que lo vean:

![dimitry-anikin-383611.jpg]()

I![dimitry-anikin-383611.jpg]()

¿Lo ven?

• Texto junto a una imagen:

La sintaxis es exactamente igual a la anterior, pero en una de las partes en lugar de poner una imagen, lo que ponemos es nuestro texto, así:

<div class="pull-left">IMAGEN QUE QUIERO QUE VAYA A LA IZQUIERDA</div>

<div class="pull-right">TEXTO QUE QUIERO QUE VAYA A LA DERECHA</div>

Quedará así:

Para indicar que quieren dejar de escribir junto a la imagen, hay que poner <br><br><br>, de lo contrario, no parará nunca y todo el texto a partir de aquí se quedaría siempre a la derecha.

• Texto junto a texto:

Por supuesto, esto también lo podemos hacer sólo con texto, la sintaxis vuelve a ser la misma.

Si ponemos:

<div class="pull-left">TEXTO QUE QUIERO QUE VAYA A LA IZQUIERDA</div>

<div class="pull-right">TEXTO QUE QUIERO QUE VAYA A LA DERECHA</div>

Se verá:

• Redimensionar imágenes:

Como ya mencionamos anteriormente, cuando subimos una imagen a un post, Steemit automáticamente nos genera un link. Por ejemplo, al arrastrar y soltar la imagen que estoy utilizando como ejemplo, se me ha generado este link: ![dimitry-anikin-383611.jpg](https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg)

Básicamente sería: ![NOMBRE DE LA IMAGEN](LINK)

Para redimensionar esa imagen, lo que tenemos que hacer es añadir al link el tamaño que queremos, así:

https://steemitimages.com/300x250/https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg

Resultado:

En este caso, el tamaño que he seleccionado es 300x250
¿Lo ven? Está justo después de https://steemitimages.com/300x250/...

Hay que tener en cuenta que al redimensionar, la imagen normalmente pierde calidad, pero puede ser útil en algunas ocasiones, por ejemplo, si queremos hacer una tabla donde uno de los datos que contiene sea esa foto. También nos sirve si queremos hacer un post con muchas imágenes, pero no queremos que se haga tan largo.

Más ejemplos de tamaños de imágenes:

9. Nota al pie

Al igual que la anterior, esta sintaxis es de las que hay que guardar en algún sitio, porque no es tan fácil de recordar, al menos para mi :)

Supongamos que en uno de nuestros textos hemos utilizado una palabra que consideramos que necesita definición, ya que no estamos seguros de que todos saben lo que significa. En este caso le llamaremos "Palabra a definir"; pues bien, junto a esa palabra y SIN espacios ponemos la primera sintaxis y luego, al final del post, la segunda sintaxis y la definición de la palabra. Así:

Palabra a definir<A NAME="Palabra a definir_1"></A><A HREF="#nota1"><SUP>1</SUP></A><BR><P>

Al final del post pondremos:

**Palabra a definir**<A NAME="nota_1"></A><A HREF="#Palabra a definir_1"><SUP>1</SUP></A>: **Definición de la palabra**

El resultado en el párrafo del post será este:

Palabra a definir¹

Imaginando que aquí estaría el final de nuestro post, lo que se vería sería esto:

Palabra a definir¹: Definición de la palabra

Si tuviéramos más de una palabra para definir, simplemente cambiamos TODOS los números por el que corresponda, el 1 por un 2, 3, 4... y así sucesivamente, tanto en la sintaxis que va junto a la palabra como en la que va al pie de la página.
Pongamos otro ejemplo y así lo ven mejor. Por ejemplo, para una segunda nota tendría, tendría que cambiar todos los números 1 de la sintaxis por el número 2, así:

En el post: Palabra a definir 2<A NAME="Palabra a definir 2_2"></A><A HREF="#nota2"><SUP>2</SUP></A><BR><P>

Al final del post: **Palabra a definir 2**<A NAME="nota_2"></A><A HREF="#Palabra a definir 2_2"><SUP>2</SUP></A>: **Definición de la palabra**

Resultado:

En el post: Palabra a definir 2²

Al final del post: Palabra a definir 2²: Definición de la palabra

Puede ser que aquí vean el ejemplo del final del post un poco más claro:

Palabra a definir¹: Definición de la palabra 1
Palabra a definir 2²: Definición de la palabra 2

¡Hasta la próxima!

[Volver a Portada]

• Cervantes Magazine - Vol. 1

• Cervantes Magazine - Vol. 2

• Cervantes Magazine - Vol. 3

• Cervantes Magazine - Vol. 4

• Cervantes Magazine - Vol. 5

• Cervantes Magazine - Vol. 6

• Cervantes Magazine - Vol. 7