Imagen dentro de una página web
Para insertar una imagen dentro de una página debemos utilizar la etiqueta <img>, la cual no tiene marca de finalización (similar a la etiqueta <br>).
Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.
La sintaxis de esta etiqueta es:<img src="nombre foto.jpg" alt="texto ">
Como mínimo, debemos inicializar las propiedades src y alt de la etiqueta HTML "img".
En la propiedad src indicamos el nombre del archivo que contiene la imagen (en un servidor Linux es sensible a mayúsculas y minúsculas por lo que recomiendo que siempre utilicen minúsculas para los nombres de archivos).
Como la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas).
Los navegadores no siempre muestran la imagen a la que el elemento hace referencia. Sí el navegador es incapaz de mostrarla porque no es válida o soportada, en ese caso, el navegador la reemplazará con el texto definido en el atributo alt .
Ejercicio 1
Descarga una imagen en la carpeta de la Tarea 9. Crea un archivo para que la imagen se vea en la web
Enlace mediante una imagen
Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero, en vez de mostrar un texto, mostraremos una imagen.
La solución es simple y consiste en disponer la etiqueta <img> encerrada entre la marca de comienzo y fin del enlace(<a>): <a href="dirección web"><img src="foto.jpeg" alt="texto alternativo"> </a>
Ejercicio 2
Descárgate una imagen de un cuadro de Sorolla y otra de un cuadro de Picasso. Crea una página que tenga por título "PINTORES ESPAÑOLES" donde aparezcan las imágenes de los dos cuadros, de manera que al clickar sobre ellas, nos enlacen con la información del autor en wikipedia.
Apertura del enlace en otra pestaña del navegador
El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra pestaña.
Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que la página sea abierta en otra pestaña: <a href="dirección web" target="_blank"><img src="foto.jpeg" alt="texto alternativo"> </a>
Ejercicio 3
Realiza las modificaciones oportunas sobre el ejercicio 2 para que la información de wikipedia se abra en otra pestaña.