Curso de HTML, Tema 4

En este Tema del curso de HTML voy a tratar como incluir una imagen en una pagina web y también la posibilidad de usar dicha imagen como un hipervinculo o enlace, en vez de usar un texto. La forma de insertar una imagen en una pagina web es muy sencilla y se hace a través de la etiqueta “<img>”. Para ello vamos a crear una pagina web que nos muestre una imagen en formato jpg, que es el mejor formato ya que es un formato muy ligero y hará que la imagen se cargue mas rápido cuando alguien acceda a nuestra pagina web. Os pongo una pagina de muestra:

<html>

<body>

</body>

</html>

En la pagina que os he puesto os mostrara en el navegador web una imagen llamada “foto.jpg” y que al no indicar una ruta debe estar en el mismo directorio que la pagina web. Si el nombre de la imagen es correcto y esta en su sitio os aparecerá algo así, aunque con una imagen que hayáis elegido vosotros:

Por ahora solo con HTML no la podemos mover, aunque mas adelante os diré como hacerlo. Si no veis la imagen que habéis puesto tenéis que revisar el nombre y su ubicación. Si habéis creado la pagina y también habéis creado un directorio llamado “imágenes” en el cual habéis guardado la imagen entonces la pagina seria así:

<html>

<body>

</body>

</html>

Ahora vamos a hacer que dicha imagen nos sirva como hipervinculo para cargar otra pagina, por ejemplo la de Google en el navegador web. La pagina seria así:

<html>

<body>

</body>

</html>

Como podéis ver he puesto la etiqueta de imagen de la anterior pagina en lugar de un texto, de esa forma la propia foto nos hará de enlace a la pagina web deseada.

Creo que es bastante sencillo, lo único con lo que hay que tener cuidado es con donde ponemos la ruta de la imagen y su nombre y si todo esta correcto debería funcionar sin ningún problema. También voy a a crear un vídeo que colgare en mi canal de Youtube con este tema para que podáis ver los cambios y sus resultados mientras lo hago para ayudar a comprenderlo.

Si te ha gustado el contenido o te ha servido para algo compártelo en las redes sociales y así puede que le sirva también a otra persona, muchas gracias.