Curso HTML: Mostrar imágenes y rutas


Toda página web necesita imágenes, estas le dan vida a todo, por eso ahora vamos a aprender a agregar algunas imágenes usando HTML.

Para agregar una imagen usamos la etiqueta <img> esta etiqueta no necesita cerrarse y tiene 2 atributos que no deben de faltar, el primero es src aquí se define la ruta de la imagen a mostrar, el segundo es alt, aquí se coloca un texto alternativo, originalmente se diseñó para ser mostrado en los navegadores que no soportaban imágenes, en lugar de la imagen misma (sí, hace muchos años eso podía pasar!) pero ahora su uso más común es para ayudarle a los navegadores como Google a saber de qué se trata esa imagen y cuando tú haces eso logras que tu página se posicione un poco mejor en los resultados de búsquedas de Google.com

Aquí hay un ejemplo del código para mostrar una imagen en HTML

<img 
    src="laptop.jpg" 
    alt="Laptop gris, delgada, con pantalla de 14 pulgadas"
>

Para probar el código anterior necesitas tener una imagen llamada laptop.jpg en la misma carpeta en donde esta tu página web, pero este es un caso que casi nunca se dará, por lo general la imagen estará en otra carpeta o directorio. En ese caso deberás especificar el nombre de la imagen junto a su ruta completa

Trabajando con rutas

Podemos definir la ruta de un archivo de 3 formas: Relativa, Absoluta o por medio de una URL. La ruta absoluta es también la menos utilizada, ya que debes de dar la ruta completa en el disco del servidor, por ejemplo

(en Windows) 
c:\web\laptop.jpg 

(en Linux) 
/var/web/laptop.jpg

Al hacer eso puedes tener problemas si cambias de ruta o de servidor a tu página web y sus archivos. La otra forma es utilizando rutas relativas cuando creas páginas web es normal que utilices una o más carpetas para organizar tus imágenes, imagina que tienes tu página web y una carpeta llamada imágenes 

HTML - trabajar con rutas
Estructura de carpetas

Entonces inicias desde la ruta en donde esta tu página web, y cómo en ese mismo nivel está la carpeta imágenes y dentro de esa carpeta imágenes esta tu archivo laptop.jpg, la ruta se verá como esta:

imagenes/laptop.jpg

En la tercera forma vas a dar la ruta completa, pero en forma de URL, la URL es la ruta mediante un dominio, el dominio son esos nombres de sitios web como codigonaranja.com o google.com. Una ruta de este tipo se verá como esta:

https://codigonaranja.com/files/curso-html/laptop.jpg

En las rutas relativas, también puedes usar ../ para definir un salto a una carpeta superior, por ejemplo si defines la ruta como 

../img2/laptop.jpg

Entonces se irá a un nivel de carpeta superior, luego buscará una carpeta llamada img2 y dentro de ella, una imagen llamado laptop.jpg

Práctica

Ahora toma el archivo anterior que tenías y agrega una imagen en tu página web. Si no sabes donde buscar y descargar imágenes, te recomiendo mi sitio favorito pixabay.com

Elige tu siguiente tema

  1. Crea tu primera página web
  2. Cómo agregar un favicon (icono)
  3. Usar tablas y comentarios
  4. Uso de títulos y párrafos
  5. Trabajar con Listas
  6. Mostrar imágenes y rutas
  7. Enlaces o links a otras paginas web
  8. Formularios en páginas web
  9. Etiqueta textarea para ingresar textos grandes
  10. Mostrar listas desplegables
  11. Subir imagenes, números, emails, etc
Versión en video