A continuación vamos a revisar el ejercicio de imágenes en HTML
el objetivo del ejercicio es poner en práctica el concepto de manejo de imágenes en HTML y al finalizar
deberemos observar lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto llamado imágenes HTML lo depositamos en la ruta mostrada
y damos clic en Finalizar
posteriormente vamos a modificar nuestro archivo índex punto HTML vamos a agregar lo siguiente según
ya hemos trabajado en ejercicios anteriores agregamos el título de manejo de imágenes.
Posteriormente agregamos el body también un título de manejo de imágenes y agregamos un párrafo vamos
a indicar que este párrafo es una imagen así que directamente sobre el párrafo podemos establecer el
uso de imágenes así que por medio de la etiqueta y M.G. y posteriormente por medio del atributo es decir
el atributo de Sors o fuente especificamos la imagen que queremos utilizar en este caso la imagen de
Renacer punto JPG y similar al uso de links podemos establecer la ruta absoluta de esta imagen o si
depositamos esta imagen dentro de nuestro proyecto entonces podemos hacer referencia directamente al
nombre de la imagen.
Sin embargo en este caso no estamos descargando la imagen sino que estamos haciendo una referencia absoluta
a esta imagen así que tenemos estas dos formas para mandar a llamar una imagen utilizando el atributo
de y M.G. posteriormente el atributo de Alt se va a mostrar en caso de que el navegador no pueda visualizar
esta imagen.
Por ello ponemos el valor de Renacer foto.
Posteriormente indicamos de manera opcional el ancho y el alto de esta imagen.
Esto es opcional pero con estos valores podemos modificar tanto el ancho como el alto de la imagen y
también podemos agregar un título a esta imagen.
En algunos navegadores en caso de que posicionamos el cursor sobre la imagen nos va a mostrar el título
de la imagen y podemos observar que esta imagen se encuentra directamente donde está este párrafo así
que vamos a tener el texto.
Posteriormente la imagen y también más texto y de esta manera es como podemos combinar imágenes con
textos cerramos nuestro párrafo y vamos a mostrar otro ejemplo en este caso es una imagen la cual también
vamos a utilizar una ruta absoluta.
Establecemos los valores para el atributo de Alt el cual es el logo de Global mentoring y establecemos
el ancho y el alto de esta imagen.
Estos valores son opcionales si no los establecemos va a tomar los valores por default de la imagen
pero en este caso podemos indicar también algunos otros atributos.
Por ejemplo podemos indicar a este atributo de imagen que alinee la imagen hacia la izquierda y que
además también agregue un espacio a esta imagen para que no se muestre directamente sobre el margen
sino que nos agregue un espacio entre el margen y la imagen que se va a mostrar.
Así que son algunos de los atributos que podemos utilizar cuando estamos trabajando el atributo de MG
y agregamos el texto de inclusión de una imagen en un párrafo
así que dentro de este párrafo esta imagen se va a alinear a la izquierda y va a agregar un espacio
de diez píxeles para que tenga un cierto espacio esta imagen y esté despegada 10 pixeles de la región
donde se establece este párrafo
agregamos dos bregaron dos saltos de línea
y agregamos un último ejemplo en este caso va a ser un link que va a abrir el sitio de Global mentoring
en un nuevo tabulador pero en lugar de tener texto lo que vamos a hacer es que va a ser un botón y este
botón va a ser una imagen.
Para ello vamos a utilizar en lugar de texto el atributo de MG y establecemos la ruta donde se encuentra
esta imagen ya sea relativa o absoluta indicamos algunos atributos más de esta imagen.
Por ejemplo el valor de Halt el valor de ancho el valor de alto y también si se va a alinear.
También indicamos si va a tener un borde esta imagen por medio del atributo Border podemos indicar que
no tenga borde por medio del valor de cero también podemos indicar el título de esta imagen y con eso
terminamos de definir la imagen y también cerramos la etiqueta de hipervínculo y esta es una imagen
que es un link y al dar clic te lleva al sitio de globalmente ahí y con eso cerramos nuestro párrafo
cerramos también tarde body y el tag de HTML.
Recuerden que cualquier problema pueden dar clic en el nombre del archivo.
Sin embargo se le solicita codificar línea a línea para que quede claro este ejercicio de manejo de
imágenes HTML como siguiente paso.
Ejecutamos nuestro proyecto y el resultado es como sigue.
Podemos observar que tenemos la etiqueta de imagen dentro de un párrafo.
También podemos observar que en este caso hemos incluido una imagen pero no está directamente sobre
el margen del párrafo sino que hemos agregado un espacio entre el margen del párrafo y el margen de
la imagen y esta es una inclusión de una imagen de un párrafo que está alineada hacia la izquierda.
Y finalmente agregamos también otra imagen pero si damos clic sobre esta imagen es un link y al dar
clic nos lleva al sitio de Global mentoring.
Así que de esta manera es como podemos hacer uso de imágenes dentro de nuestros documentos HTML y en
el último caso en el caso de la imagen que es un link si damos clic nos lleva al sitio de Global mentoring
como conclusión del ejercicio.
Con este ejercicio hemos puesto en práctica el uso de imágenes en HTML.
Incluso hemos visto cómo podemos crear links a otras páginas utilizando como Link una imagen.
También es posible utilizar una imagen como un botón o cualquier otra imagen que sea representativa
de la acción que queremos convertir en un link.
Esto lo vamos a ver en ejercicios posteriores pero con esto concluimos el ejercicio de imágenes en HTML.