Es hora de pasar al siguiente ejercicio.
En este ejercicio vamos a tratar las imágenes,
cómo incluimos imágenes en nuestras páginas web
y cómo podemos hacer uso del objeto multimedia en nuestra página web.
Como primer paso,
vaya a las instrucciones de ejercicio y descargue el archivo image.zip,
y luego guárdelo en su carpeta de confusión.
Y luego descomprima el archivo para obtener una carpeta llamada, img,
y dentro de ella encontrarás
algunas imágenes que vamos a utilizar en este ejercicio.
Todas las imágenes están en formato png en esa carpeta.
Ahora vamos a trabajar para añadir algunas imágenes a la página.
Primero, agreguemos el logotipo de nuestro restaurante.
Entonces, yendo a la página index.html, en el Jumbotron,
verás que el segundo div aquí tiene el col-sm.
Por lo tanto, vamos a arreglar eso agregando a este div,
y alinear el auto centro a este div.
Ahora, a este div,
vamos a agregar una imagen.
Entonces, déjame usar la imagen con la fuente, img.
Ya hemos puesto la carpeta de imágenes que contiene las imágenes en nuestro proyecto.
Entonces, a partir de ahí, agregaré el archivo logo.png como la imagen aquí.
Además, voy a agregar la clase como fluido de imagen, para
que esta imagen responda automáticamente y se adapte al tamaño de la pantalla.
Vamos a guardar los cambios.
Vamos a aplicar el mismo cambio a la página aboutus.html,
y también a la página contactus.html en el Jumbotron.
Ahora, cuando eches un vistazo más de cerca a tu página web,
verás que en el Jumbotron,
justo después de estas palabras,
verás la imagen de nuestro restaurante insertada allí.
A continuación, vamos a ir a la barra de navegación,
y luego donde tenemos esto para la marca navbar,
voy a reemplazar estas palabras para el restaurante con el logotipo correspondiente.
Entonces, estas palabras voy a reemplazar eso con img,
y la fuente es logo.png.
Además, voy a especificar un atributo de altura de 30
y un atributo de ancho de 41 a este logotipo.
Este tamaño es adecuado para la marca navbar allí.
Por lo tanto, vamos a guardar los cambios.
Voy a ir y hacer el mismo cambio en la página aboutus.html,
y también en la página contactus.html.
Echando un vistazo a la página web ahora,
verá que el nombre del restaurante ha sido
reemplazado por el logotipo del restaurante en tamaño pequeño allí.
Ahora verá que cuando navegue a la página Acerca de,
verá la imagen que se incluye allí
y, de manera similar, en la página Contacto,
verá que la imagen se ha actualizado volviendo a la página principal.
Ahora, lo que vamos a hacer,
es usar un objeto multimedia en lugar de estas descripciones que tenemos aquí,
y luego usar el objeto multimedia para reemplazarlos
con la descripción y también una imagen a incluir.
Eso da una mejor vista de nuestra página web.
Entonces, sigamos adelante y hagamos ese cambio.
Para hacer uso del objeto multimedia en nuestra página index.html,
iremos a la primera fila de contenido aquí.
Y luego, justo allí, en el segundo div,
voy a introducir un nuevo desarrollo con los medios de la clase,
y encerrar el contenido dentro de este div allí,
cerrando el div.
Ahora, dentro de este div,
voy a introducir una imagen para ser usada allí.
Aquí entro y digo clase de imagen,
y para usar una imagen en un objeto multimedia,
necesitamos aplicar algunas clases relacionadas con flex adicionales aquí,
así que aplico el d-flex, y luego mr-3.
Entonces, M significa margen derecho con el número 3.
Esto da suficiente margen a la derecha de esta imagen, de
modo que la descripción está ligeramente separada de la imagen en la página web.
Y luego usaré la miniatura de la imagen para esta imagen,
y luego también usaré align-self-center para la imagen,
y luego escribiré el origen de la imagen, que es img,
y puedes
buscar el nombre de la imagen en la carpeta img,
y déjame darle una alternativa allí,
y cerrar la imagen.
Esto ahora incluirá la imagen en mi objeto midi.
Además, voy a crear el cuerpo de los medios para esta imagen
diciendo cuerpo de medios de la clase div,
y luego encerré este h2 y p que contiene la descripción dentro de este div allí.
Entonces, déjame sangrar el contenido allí,
y luego cerrar ese div aquí.
Con eso, mi descripción está encerrada dentro del cuerpo de los medios de comunicación.
Además de este h2,
voy a introducir una clase como mt-0.
Con esto, esta clase dice margen superior cero.
Este título se alineará con la parte superior de este objeto multimedia en particular aquí.
Con estos cambios, vamos a guardar los cambios y
luego ir y echar un vistazo rápido a nuestra página web. Al
ir a nuestra página web,
usted notará inmediatamente el cambio en la página web.
Ahora puede ver que hay una posición de imagen aquí,
y luego la descripción
que estaba antes en esa ubicación se ha colocado correctamente aquí.
Contraste esto con las dos filas restantes,
y ahora empezarás a ver cómo el objeto multimedia nos ayuda
a transformarlo en algo más vibrante.
Voy a hacer lo mismo en la tercera fila.
La segunda fila se dejará como un ejercicio para usted en la asignación. Al
ir a ese tercer ejercicio,
voy a aplicar un cambio similar a esta tercera fila para introducir el objeto multimedia aquí.
Permítanme presentar el objeto multimedia allí,
y luego a este div,
vaya al objeto multimedia
y luego introduzca la imagen que voy a usar aquí.
Uso la clase como d-flex mr-3.
Si está posicionando la imagen hacia el lado derecho,
entonces necesita dar un margen como ml-3 para ella.
Además, voy a agregar en la clase de miniatura de imagen a esto,
y luego también decir, alinear-auto-centro.
Estas son las clases que voy a agregar a esta imagen.
Y luego, especifiquemos el origen de esta imagen,
img y alberto.png, y luego especificaré la alternativa.
Y después de esto, este h2 y h4 y el p,
voy a cerrarlos dentro de un div de cuerpo de medios aquí,
cerrando el div del cuerpo de los medios.
Ahora hemos completado el objeto multimedia en la tercera fila.
Vamos a guardar los cambios,
y luego ir y echar un vistazo a nuestra página web a continuación.
Ahora, echando un vistazo a nuestra página web,
notarás que tenemos la descripción del plato allí.
Ahora, si se mueve a la tercera fila,
ahora verá cómo también se ha redefinido la tercera fila.
Tenga en cuenta el uso del medio izquierdo,
lo que significa que la imagen se coloca en el lado izquierdo de este objeto multimedia
y, a continuación, la página media coloca la imagen en el centro de la descripción.
También puede utilizar los medios superior e inferior,
para alinear la imagen con la parte superior e inferior de esta descripción.
Con esto, completamos este ejercicio.
En este ejercicio, analizamos el uso de imágenes y objetos multimedia en nuestra página web.
Este es un buen momento, de nuevo,
para hacer un buen comentario,
con el mensaje, las imágenes y los medios de comunicación.