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
https://upload.wikimedia.org/wikipedia/commons/4/4f/Kitty_emoji.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!