Ningún diseñador de páginas web de respeto propio,
hoy diseñaría páginas web sin incluir
alguna forma de imágenes o medios en sus sitios web.
Los profesores de informática son una excepción.
En esta etapa, probablemente esperes que diga esto,
pero eso no es lo que voy a decir.
Voy a decir que,
«Una imagen vale $12 en iStockphoto.com.
Bootstrap proporciona un amplio soporte para incluir
imágenes y varios tipos de medios en sus sitios web y sus páginas web.
La etiqueta HTML de la imagen obviamente se va a utilizar para incluir imágenes en sus páginas web.
Bootstrap también proporciona un montón de clases que puede aplicar a
la etiqueta de imagen para mejorar aún más la forma en que las imágenes se incluyen en su página web.
Por lo tanto, podría usar una clase de imagen llamada img-fluid que hará que sus imágenes respondan,
lo que significa que el tamaño de la imagen se ajustará automáticamente a diferentes tamaños de pantalla.
También puede usar una miniatura img-thumbnail que colocará un borde blanco alrededor de su imagen.
También puede tratar las formas y tamaños de las imágenes como se
ve en esta imagen aquí para que pueda tener imágenes para las que cree esquinas redondeadas,
ya sea las cuatro esquinas,
o cualquier par de esquinas elegidas.
Así que puede aplicar la clase a su alrededor para
crear una imagen con esquinas redondeadas o puede ver
un guión redondeado arriba abajo a la izquierda o a
la derecha para colocar las esquinas redondeadas en cualquiera de estos cuatro bordes de su imagen.
También puede aplicar un círculo redondeado para crear imágenes circulares.
Por lo tanto, cuando visita sitios web,
verá imágenes que ya se utilizan de muchas de estas maneras.
Recordarás que vimos la clase de Tarjeta en la lección anterior y en el ejercicio.
Aquí, ilustro el uso de la clase Card con una imagen incluida.
Así que en este caso, incluimos una imagen con la imagen de la tarjeta de clase superior y si se
incluye el tamaño lo suficientemente grande la imagen que imagen se incluirá
en la parte superior y luego se encerrará dentro de una tarjeta como esta.
Si la imagen es demasiado pequeña,
entonces puede colocarse en una esquina de su tarjeta.
Así que usa una imagen lo suficientemente grande como para poder definir una tarjeta limpia como esta.
Así que aquí verá la imagen que se describe con,
las clases aplicadas a eso, incluyendo la parte superior de la imagen de la tarjeta
e img-fluid para hacer que la imagen responda automáticamente.
Por lo tanto, así es como puedes usar las imágenes con la clase Card
para definir las tarjetas que usas en tus páginas web.
Otra forma de incluir imágenes y contenido relacionado en sus páginas web es un objeto multimedia.
Un objeto multimedia le permite especificar una imagen que puede colocar
a la izquierda o a la derecha de la descripción.
Además, puede incluir un cuerpo de medios que
contenga la descripción que va junto con la imagen.
Así que como puede ver en este ejemplo aquí,
el cuerpo del medio contiene cualquier contenido con formato HTML aquí.
Así que aquí estoy usando un h2 y h4 junto con
una clase p dentro del cuerpo de los medios para definir el contenido real.
Utilizaremos el objeto multimedia en el ejercicio que sigue.
También puede hacer una incrustación sensible de contenido.
Así, por ejemplo, si tiene un video que desea incluir en su página web,
entonces puede usar una clase iframe para enmarcar el video,
y luego encerrarlo dentro del div con las clases
incrustadas adaptables dando tamaños para que pueda 16by9,
4by3 o video, contenido que se mostrará.
Por lo tanto, puede usar las
etiquetas HTML de incrustar o iframe o vídeo u objeto y luego encerrarlo dentro de un div.
Aplicando la respuesta de inserción y también junto con la respuesta de inserción,
especificando las dimensiones que desea utilizar para las dimensiones 4by3 o 16by9.
Así es como también puedes incluir contenido de vídeo en tus páginas web.
Ahora, que hemos visto el apoyo a las imágenes y los medios,
es hora de pasar a un ejercicio donde veremos cómo podemos incluir
imágenes en la página web o en el sitio web en el que hemos estado trabajando.
Vamos a hacer algunos cambios en la página index.html
incluyendo algunas imágenes y contenido utilizando el objeto multimedia.