Imágenes

Insertar una imagen

Los archivos de imagenes son ficheros binarios que no pueden formar parte de un archivo plain text, ni en el caso de los ficheros markdown, ni en los HTML. Cuando accedemos al sitio web, las imágenes se descargan en paralelo junto al archivo HTML y nuestro navegador hará una composición “al vuelo” para mostrar la página.

El archivo HTML ha de llevar en su texto una etiqueta <img>, para indicar al navegador el punto del documento donde hay que visualizar la imagen.

Veamos un ejemplo de archivo HTML. Vamos a insertar directamente una etiqueta <img> entre párrafo y párrafo:

<p>Emoji smiley:</p>

<p><img src="../img/0409imagenes_Smiley.png" 
             alt="Smiley" 
             width="150" 
             height="150">
</p>

<p>
  Imagen con licencia de 
  <a href="https://pixabay.com/es/illustrations/smiley-emoticon-emoji-cómic-4832495/">
  Pixabay
  </a>
</p>

Lo que muestra:

Las imágenes consisten en una única etiqueta HTML <img>, sin etiqueta de cierre. Entre otros, podemos poner los siguientes atributos:

• src="nombre_archivo" - Indica el archivo a descargar y mostrar. En nuestro ejemplo, indicamos un fichero en la carpeta img/ que cuelga de la carpeta “padre” donde tenemos los documentos, es decir, en src/img

• alt="texto" - Texto alternativo cuando no se puede mostrar la imagen

• width y height permiten establecer el tamaño de visualización

• title="texto"- Recuadro a mostrar cuando pasamos el ratón sobre la imagen.

Como alternativa al uso de etiquetas HTML, la sintaxis Markdown cuenta con el siguiente formato:

![texto alternativo](../img/Smiley.png)

Véase que el formato es el mismo que para los enlaces, añadiendo un prefijo !.

Markdown no cuenta inicialmente con otras opciones, aunque podemos añadir el atributo title tras el nombre del archivo:

![texto alternativo](/carpeta/imagen.jpg "Título")

Si necesitamos especificar tamaño u otros atributos, tendremos que usar directamente una etiqueta <img> insertada en el texto markdown.

Posicionamiento de las imágenes

En el ejemplo anterior, poníamos la imagen entre párrafo y párrafo, pero podemos insertarla dentro del texto de uno de los párrafos, lo que la muestra entre carácter y carácter, alineada con el borde inferior del párrafo:

Emoji smiley
<img src="../img/Smiley.png" width="150" height="150"> 
con licencia de 
[Pixabay](https://pixabay.com/es/illustrations/smiley-emoticon-emoji-cómic-4832495/)

Esto se visualiza así:

Emoji smiley Imagen con licencia de Pixabay

Podemos usar el atributo style para llevar la imagen a la izquierda o derecha del párrafo:

Emoji smiley.

Imagen con licencia de Pixabay

La propiedad de estilo float determina si la imagen debe mostrarse a la izquierda o derecha del texto:

<img src="../img/Smiley.png" width="150" height="150" style="float:right"> 

Cambiar right por left si la queremos a la izquierda.

Imágenes como enlaces

Hay ocasiones en las que queremos que, al pulsar sobre una imagen, haga de enlace a otro documento o sección. Podemos combinar ambas sintaxis, la de los enlaces y la de las imágenes. Basta con escribir un enlace y, en lugar del texto a mostrar, poner una imagen.

En formato markdown, en lugar de:

[  texto  ](URL enlazada)

escribimos:

[  ![](archivo_de imagen)  ](URL enlazada)

Y en formato HTML, en lugar de:

<a href="URL enlazada">
   texto 
</a> 

escribimos:

<a href="URL enlazada"> 
   ![](../img/nombre_archivo.jpg) 
</a>