Si ya sabe cómo crear enlaces en Markdown, también puede incluir imágenes. La sintaxis es muy similar.
Las imágenes también tienen dos estilos, igual que los enlaces y ambos funcionan de manera similar.
La diferencia entre los enlaces y las imágenes es que en el código de las imágenes
están precedidas por un símbolo de exclamación ( ! ).
El primer estilo de imagen es llamado, un enlace en línea a una imagen. Para crear un enlace
en línea a una imagen, escriba primero un símbolo de exclamación ( ! ), encierre el texto entre corchetes ( [ ] ), y después encierre el enlace
entre paréntesis ( ( ) ). (El texto entre corchetes es una palabra o frase que sirve para describir la
imagen para personas ciegas.)
Por ejemplo, para crear un enlace en línea a una imagen a https://octodex.github.com/images/bannekat.png, con un texto
que diga, Benjamin Bannekat, debería escribir esto en Markdown: .
En el recuadro inferior, convierta el enlace en una imagen y rellene el texto entre corchetes para que diga "Un bonito tigre":
¡Muy bien!
Aunque no es necesario añadir el texto entre corchetes para que funcione de igual manera, hará que el contenido creado sea accesible para su audiencia, incluyendo personas que son ciegas, utilizan lectores de pantalla, o no tienen conexiones rápidas de internet.
Para las imágenes incluidas como referencia, seguiremos el mismo patrón que para los enlaces de referencia.
Deberá preceder el código de Markdown con un símbolo de exclamación,
después dos corchetes para el texto y dos corchetes más para la
etiqueta de la imagen. Al final de su página de Markdown, definirá
la imagen correspondiente para esa etiqueta, de esta manera:
![El padre fundador][Padre] Al final de su página de
Markdown, definirá una imagen para la etiqueta, de esta manera:
[Padre]:
http://octodex.github.com/images/founding-father.jpg.
En el recuadro inferior, hemos colocado algunas imágenes en
referencia; necesitará completarlas, como en la lección anterior.
Llame a la etiqueta de la primera referencia "Negro", y enlácela a
https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg;
haga que la segunda imagen apunte a
http://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/256/22221-cat-icon.png.
¡Tachán! Ha aprendido todo lo que hay que aprender sobre cómo añadir imágenes en Markdown!
¡Vamos a la siguiente lección!