Imágenes - HTML5 básico - Capítulo 10


Hemos llegado al penúltimo capítulo del curso. Vas a ver cómo cargar imágenes en tus páginas web.

Insertar imágenes en html

Para insertar una imagen en tus páginas, debes hacerlo con la etiqueta <img> de image (imagen). Solo tiene apertura.

Deberás especificar dónde está la imagen con atributos. Si la imagen está en la misma carpeta que la página html dónde quieras colocar la imagen, quedaría una ruta así:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Imágenes en html.</title>
</head>
<body>

    <img src="imagen_espacio.jpg">

</body>
</html>

Resultado en el navegador

Imagen html

Esta es la carpeta donde tengo la imagen y la página html:

Ruta de imagenes html

Puedes tener estos archivos en la carpeta que quieras.

Una mejor organización para cuando nuestro sitio web vaya creciendo, es crear una carpeta solo para imágenes, en ese caso, quedaría así:

Carpeta de imagenes html

Dentro de esa carpeta, estaría la imagen del espacio o cualquier otra que tengas, quedaría así la ruta de la imagen en este caso:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Imágenes en html</title>
</head>
<body>

    <img src="imagenes/imagen_espacio.jpg">

</body>
</html>

Aviso: evita poner acentos en cualquier nombre de imagen o de carpeta.

Cambiar el tamaño de imagen en html

Si solo especificas el atributo de la ruta de la imagen, esta aparece en su tamaño real, por ejemplo, la imagen del espacio, es de 320px de ancho y 213px de alto. Si la quieres poner más grande se puede, pero se verá pixelada.
La imagen se redimensiona con width (ancho) y height (alto) y un tamaño en píxeles.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Imágenes en html</title>
</head>
<body>

    <img src="imagenes/imagen_espacio.jpg" width="900px" height="525px" >

</body>
</html>

Resultado en el navegador

imágenes redimensionadas html

Como puedes ver, al estar la imagen más grande de su tamaño natural, queda borrosa o pixelada, de modo, que conviene que respetes los tamaños de imagen. Deberías manejar Photoshop o un programa de edición gráfica similar para poder redimensionar imágenes de forma correcta, aunque eso es otro curso. De todas formas, si te queda alguna duda sobre este tema y quieres saber un poco más, déjame un comentario.

Atributo alt html

Por último, muy importante, debes poner siempre a todas las imágenes el atributo alt, que sirve para describirle a los buscadores como Google el contenido de la imagen y en caso de que falle la carga de la imagen por cualquier motivo, el usuario ve esta descripción, quedaría así:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Imágenes en html</title>
</head>
<body>

    <img src="imagenes/imagen_espacio.jpg" width="900px" height="525px" alt="Nave con vistas al espacio">

</body>
</html>

Resultado en el navegador

En caso de que la carga de la imagen sea correcta, el usuario verá la imagen y le aparecerá esta descripción si pasa el cursor por encima (no en todos los navegadores).

En caso de que la imagen no cargue por lo que sea, que se haya eliminado, que se haya especificado mal el nombre o cualquier otro motivo, quedaría algo como esto:

El atributo alt de html

Ejercicios de html

20- Crea una carpeta en tu ordenador y nómbrala como quieras. En ella, crea otra carpeta llamada img. En esta carpeta (img) guarda tres imágenes cualquiera, puedes bajarlas de internet o copiarlas de tu equipo. En la carpeta principal crea una página html que lleve dentro estas tres imágenes. No te olvides de poner la descripción a las imágenes.

21- Crea una subcarpeta dentro de la carpeta img (llámala como quieras) y añade dos de las tres imágenes a esta. Modifica la página html creada en el ejercicio anterior para que se visualicen correctamente. No te olvides de poner la descripción a las imágenes.

22- Redimensiona desde html el ancho y alto de las imágenes, todas a 300px de ancho por 175px de alto (da igual si quedan mal proporcionadas).

23 (Opcional)- Si dominas un programa de edición de imágenes como Photoshop o Gimp, redimensiona las imágenes anteriores para que queden todas en un ancho máximo de 300px (el alto déjalo en proporción). Al dejarlas redimensionadas, quita la redimensión desde html, ya no la necesitas.
Si te parece complicado el ejercicio y quieres hacerlo de todas formas, no te lo pienses, déjame un comentario y te iré ayudando.

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.