Curso HTML: Mostrar imágenes y rutas

26/Ago/2018 Curso-html

Toda pagina web necesita imagenes, estas le dan vida a todo, por eso ahora vamos 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 (si, 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 tu haces eso logras que tu pagina se posicione un poco mejor en los resultados de busquedas de Google.com

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

Para probar el código anterior necesitas tener una imagen llamada laptop.jpg en la misma carpeta en donde esta tu pagina 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

Al hacer eso puedes tener problemas si cambias de ruta o de servidor a tu pagina 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 tu imagenes, imagina que tienes tu pagina web y una carpeta llamada imagenes 

HTML - trabajar con rutas
Estructura de carpetas

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

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:

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

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 tenias y agrega una imagen en tu pagina web. Si no sabes donde buscar y descargar imagenes, 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



Ir a la barra de herramientas