Las imágenes se introducen con la etiqueta <img>. Es una etiqueta "vacía", no tiene etiqueta de cierre. Solo hay dos atributos obligatorios, la src (del ingés source, fuente u origen) que es la URL donde se encuentra la imagen. Y el alt que es el texto alternativo que describe la imagen. Este texto alternativo es lo que se mostrará si, por alguna razón, la imagen no se ha podido cargar. También es lo que leen los motores de lectura de las web para las personas con discapacidad visual.
Así, podemos introducir la imagen:
Ver la imagen en página emergenteEste es el código inicialmente necesario:
<img src="imag/riglos.jpg" alt="Imagen de los mallos de Riglos">
Lo que ocurre es que, aunque no es obligatorio, es conveniente decirle al navegador algo con respecto al tamaño en ancho (width) y alto (height) de la imagen.
Técnicamente la imagen no se inserta en la página, lo que hace es que se vincula o embebe, desde el sitio en el que está, hasta la página en la que la queremos colocar. Por eso, es una buena idea declarar el ancho y el alto para que el navegador reserve un espacio en el que colocar la imagen mientras se carga el resto de la página.
Esto se puede hacer de dos formas:
1.- Con los atributos width y height:
En un programa gráfico podemos obtener estos datos y colocarlos con la siguiente sintaxis:
<img src="imag/riglos.jpg" width="600" height="401" alt="Imagen de los mallos de Riglos">
Este es el resultado:
Ver la imagen en página externa2.-Con el atributo <style>
Con la siguiente sintaxis:
<img src="imag/riglos.jpg" style="width:600px;height:401px;" alt="Imagen de los mallos de Riglos">
Este es el resultado:
Ver la imagen en página externa¿Qué opción es mejor
Sin lugar a dudas, es la opción style porque nos aseguramos que esa declaración de tamaños no va a interferir con otras posibles declaraciones en el CSS interno o en la hoja de estilos externa.
De todas formas, las tres soluciones anteriores, aún siendo correctas todas, no son responsivas. Es decir va a haber problemas al ver la página con una resolución inferior al ancho de la imagen.
La primera solución para evitar este problema es poner el ancho al 100%.
De esta forma la imagen se va a adaptar al 100% del tamaño del ancho disponible.
Este es el código que he escrito:
<img src="imag/riglos.jpg" style="width:100%;" alt="Imagen del pueblo y los mallos de Riglos en la provincia de Huesca">
Hay otras posibilidades para hacer que la imagen sea responsiva pero esta, por su sencillez, es una de las más eficaces. Veremos esas otras posibilidades más adelante.
Podemos cargar la imagen desde una URL externa:
En este caso en el atributo src pegamos la URL completa, la URL absoluta. Hay que tener cuidado con los derechos de autor de las imágenes que usemos. En este caso, esta imagen ha sido obtenida de la web pixabay que proporciona imágenes de uso libre.
Este es el código que he escrito:
<img src="https://cdn.pixabay.com/photo/2017/07/21/03/32/crayon-2524562_1280.jpg" style="width:100%;" alt="Lápices de colores">
Podemos emplear imágenes como fondo de un documento html.
Ver la imagen en página externa
body { background-image: url('imag/riglos.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100%; }
También hemos modificado las cuestiones del texto, en concreto del párrafo en el que hemos escrito la información proporcionada por la Wikipedia.
p{ padding:20px 35px; font-size: x-large; color:white; }