Insertar imágenes en nuestra página web

Habiendo finalizado el primer modulo del curso HTML desde cero, comenzamos ya con el segundo modulo. Este modulo va a ser mucho menos extenso que el primero y está centrado en aprender a crear enlaces o insertar imágenes entre otros. Nosotros vamos a empezar insertar imágenes en nuestra página web.

Pero antes de empezar a insertar imágenes en nuestra página web, es necesario hablar de la organización de un proyecto web. Tranquilos que no me voy a extender ni a divagar sobre el tema, solo os voy a hacer unas recomendaciones.

Recomendaciones importantes

• Nombra todos los archivo en letra minúscula.
• Si el nombre del archivo contiene mas de una palabra, sepáralos con guiones intermedios. [Ejemplo] servicio-integral.html.
• Con las carpetas sucede lo mismo, deben nombrarse en minúsculas y de la manera más corta y descriptiva posible.

La estructura que yo uso es muy básica, lo sencillo es lo mejor.

• [Carpeta] Proyecto web (Donde estan almacenados los archivos y carpetas de todo el proyecto).
  • [Archivo] index.html
  • [Carpeta] images (Donde almacenamos las imágenes)
  • [Carpeta] css (Donde estan los archivos de estilos)
  • [Carpeta] js (Donde se guardan los archivos Javascript)
  • [Carpeta] font (Donde se guardan las fuentes)

Como has podido comprobar, no me he extendido mucho. Así que, habiendo hecho ya las recomendaciones que he creído importantes, vamos a aprender como insertar imágenes en nuestra página web. La verdad es que no voy a enrrollarme con chorradas históricas que no quiere saber nadie y voy a ir lo más al grano posible.

Quiero que tengas en cuenta que la clase Las etiquetas <figure> y <figcaption> en html5, está muy relacionada con esta clase que se está desarrollando. Si le dais un vistazo, os servirá de repaso.

La etiqueta básica para insertar imágenes es <img>. A diferencia de la gran mayoría de etiquetas o elementos, no lleva etiqueta de cierre y va acompañada de diferentes atributos que vamos a ver a continuación. Su sintaxis es la siguiente:

<img src="url o enlace de la imagen" alt="Texto descriptivo">

Como puedes ver nada del otro mundo, bastante sencilla su sintaxis.

Atributos que soporta

• src="" : Este es un atributo imprescindible para que el elemento <img> funcione. Es el que contiene la ruta o url del archivo que queremos insertar en nuestra página.


• align : Con este atributo y agregándoles valores como “left” (derecha), “right” (izquierda), “top” (arriba), “bottom” (abajo) o “middle” (en medio), conseguiremos alinear nuestra imagen como más nos guste.


• alt=" : Nos sirve para incluir un texto descriptivo. Esto biene muy bien sobre todo, para cuando por cualquier motivo, no se puede cargar la imagen. Entonces en lugar de la imágen, aparecerá este texto.


• height y width : Con estos atributos definiremos la altura con height y la anchura con width. Es recomendable definir las medidas ya que así ayudamos al navegador a la hora de mostrar nuestras imágenes.


• border : Este atributo nos permite aplicar un borde a nuestras imágenes, solo bastaría con incluirle el valor del grosor deseado. Aunque yo la verdad esto ultimo prefiero añadirlo posteriormente con CSS3.

Ejemplo de inserción de imágenes

Si el archivo .html y la imágen están en la misma ubicación:

<img src="restaurante.jpg" alt="Salón restaurante">

Si el archivo .html y la imágen NO están rn la misma ubicación:

<img src="images/restaurante.jpg" alt="Salón restaurante">

Otro ejemplo asumiendo que restaurante.jpg este dentro de una carpeta llamada "fotos", y esta, este dentro de la carpeta "images".

<img src="images/fotos/restaurante.jpg" alt="Salón restaurante">

Si la el archivo index.html estuviera dentro de la carpeta css y quisiéramos que index.html buscase restaurante.jpg. Para que index.html encuentre la imágen deberíamos subir un nivel. Tendrámos que decirle que subiera a la carpeta del proyecto y entonces busque la carpeta images. La ruta sería la siguénte: Con ../ le decimos al navegador que suba un nivel.

<img src="../images/restaurante.jpg" alt="Salón restaurante">

Conclusiones

En serio, no tienes que saber nada más, con esto ya sabes insertar imágenes en tu web. Hemos aprendido a organizar un proyecto, ha definir la etiqueta <img>, hemos aprendido cuales son sus atributos y por ultimo una serie de ejemplos muy útiles.

Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018