1 00:00:03,250 --> 00:00:07,080 Ningún diseñador de páginas web de respeto propio, 2 00:00:07,080 --> 00:00:10,990 hoy diseñaría páginas web sin incluir 3 00:00:10,990 --> 00:00:15,665 alguna forma de imágenes o medios en sus sitios web. 4 00:00:15,665 --> 00:00:19,055 Los profesores de informática son una excepción. 5 00:00:19,055 --> 00:00:23,390 En esta etapa, probablemente esperes que diga esto, 6 00:00:23,390 --> 00:00:26,270 pero eso no es lo que voy a decir. 7 00:00:26,270 --> 00:00:29,255 Voy a decir que, 8 00:00:29,255 --> 00:00:33,425 «Una imagen vale $12 en iStockphoto.com. 9 00:00:33,425 --> 00:00:38,060 Bootstrap proporciona un amplio soporte para incluir 10 00:00:38,060 --> 00:00:42,800 imágenes y varios tipos de medios en sus sitios web y sus páginas web. 11 00:00:42,800 --> 00:00:49,040 La etiqueta HTML de la imagen obviamente se va a utilizar para incluir imágenes en sus páginas web. 12 00:00:49,040 --> 00:00:55,170 Bootstrap también proporciona un montón de clases que puede aplicar a 13 00:00:55,170 --> 00:01:02,215 la etiqueta de imagen para mejorar aún más la forma en que las imágenes se incluyen en su página web. 14 00:01:02,215 --> 00:01:08,535 Por lo tanto, podría usar una clase de imagen llamada img-fluid que hará que sus imágenes respondan, 15 00:01:08,535 --> 00:01:15,195 lo que significa que el tamaño de la imagen se ajustará automáticamente a diferentes tamaños de pantalla. 16 00:01:15,195 --> 00:01:22,585 También puede usar una miniatura img-thumbnail que colocará un borde blanco alrededor de su imagen. 17 00:01:22,585 --> 00:01:29,480 También puede tratar las formas y tamaños de las imágenes como se 18 00:01:29,480 --> 00:01:36,635 ve en esta imagen aquí para que pueda tener imágenes para las que cree esquinas redondeadas, 19 00:01:36,635 --> 00:01:38,995 ya sea las cuatro esquinas, 20 00:01:38,995 --> 00:01:42,020 o cualquier par de esquinas elegidas. 21 00:01:42,020 --> 00:01:45,595 Así que puede aplicar la clase a su alrededor para 22 00:01:45,595 --> 00:01:49,450 crear una imagen con esquinas redondeadas o puede ver 23 00:01:49,450 --> 00:01:53,130 un guión redondeado arriba abajo a la izquierda o a 24 00:01:53,130 --> 00:01:57,905 la derecha para colocar las esquinas redondeadas en cualquiera de estos cuatro bordes de su imagen. 25 00:01:57,905 --> 00:02:02,780 También puede aplicar un círculo redondeado para crear imágenes circulares. 26 00:02:02,780 --> 00:02:05,170 Por lo tanto, cuando visita sitios web, 27 00:02:05,170 --> 00:02:10,310 verá imágenes que ya se utilizan de muchas de estas maneras. 28 00:02:10,310 --> 00:02:16,000 Recordarás que vimos la clase de Tarjeta en la lección anterior y en el ejercicio. 29 00:02:16,000 --> 00:02:21,085 Aquí, ilustro el uso de la clase Card con una imagen incluida. 30 00:02:21,085 --> 00:02:27,320 Así que en este caso, incluimos una imagen con la imagen de la tarjeta de clase superior y si se 31 00:02:27,320 --> 00:02:30,760 incluye el tamaño lo suficientemente grande la imagen que imagen se incluirá 32 00:02:30,760 --> 00:02:35,030 en la parte superior y luego se encerrará dentro de una tarjeta como esta. 33 00:02:35,030 --> 00:02:36,860 Si la imagen es demasiado pequeña, 34 00:02:36,860 --> 00:02:41,245 entonces puede colocarse en una esquina de su tarjeta. 35 00:02:41,245 --> 00:02:47,315 Así que usa una imagen lo suficientemente grande como para poder definir una tarjeta limpia como esta. 36 00:02:47,315 --> 00:02:52,030 Así que aquí verá la imagen que se describe con, 37 00:02:52,030 --> 00:02:56,035 las clases aplicadas a eso, incluyendo la parte superior de la imagen de la tarjeta 38 00:02:56,035 --> 00:03:00,510 e img-fluid para hacer que la imagen responda automáticamente. 39 00:03:00,510 --> 00:03:04,470 Por lo tanto, así es como puedes usar las imágenes con la clase Card 40 00:03:04,470 --> 00:03:08,525 para definir las tarjetas que usas en tus páginas web. 41 00:03:08,525 --> 00:03:16,605 Otra forma de incluir imágenes y contenido relacionado en sus páginas web es un objeto multimedia. 42 00:03:16,605 --> 00:03:20,740 Un objeto multimedia le permite especificar una imagen que puede colocar 43 00:03:20,740 --> 00:03:26,225 a la izquierda o a la derecha de la descripción. 44 00:03:26,225 --> 00:03:29,690 Además, puede incluir un cuerpo de medios que 45 00:03:29,690 --> 00:03:32,880 contenga la descripción que va junto con la imagen. 46 00:03:32,880 --> 00:03:35,110 Así que como puede ver en este ejemplo aquí, 47 00:03:35,110 --> 00:03:41,270 el cuerpo del medio contiene cualquier contenido con formato HTML aquí. 48 00:03:41,270 --> 00:03:44,820 Así que aquí estoy usando un h2 y h4 junto con 49 00:03:44,820 --> 00:03:49,755 una clase p dentro del cuerpo de los medios para definir el contenido real. 50 00:03:49,755 --> 00:03:54,240 Utilizaremos el objeto multimedia en el ejercicio que sigue. 51 00:03:54,240 --> 00:03:57,670 También puede hacer una incrustación sensible de contenido. 52 00:03:57,670 --> 00:04:03,360 Así, por ejemplo, si tiene un video que desea incluir en su página web, 53 00:04:03,360 --> 00:04:07,690 entonces puede usar una clase iframe para enmarcar el video, 54 00:04:07,690 --> 00:04:10,760 y luego encerrarlo dentro del div con las clases 55 00:04:10,760 --> 00:04:16,410 incrustadas adaptables dando tamaños para que pueda 16by9, 56 00:04:16,410 --> 00:04:21,020 4by3 o video, contenido que se mostrará. 57 00:04:21,020 --> 00:04:27,630 Por lo tanto, puede usar las 58 00:04:27,630 --> 00:04:34,450 etiquetas HTML de incrustar o iframe o vídeo u objeto y luego encerrarlo dentro de un div. 59 00:04:34,450 --> 00:04:41,345 Aplicando la respuesta de inserción y también junto con la respuesta de inserción, 60 00:04:41,345 --> 00:04:47,295 especificando las dimensiones que desea utilizar para las dimensiones 4by3 o 16by9. 61 00:04:47,295 --> 00:04:53,685 Así es como también puedes incluir contenido de vídeo en tus páginas web. 62 00:04:53,685 --> 00:04:57,570 Ahora, que hemos visto el apoyo a las imágenes y los medios, 63 00:04:57,570 --> 00:05:02,230 es hora de pasar a un ejercicio donde veremos cómo podemos incluir 64 00:05:02,230 --> 00:05:07,310 imágenes en la página web o en el sitio web en el que hemos estado trabajando. 65 00:05:07,310 --> 00:05:11,345 Vamos a hacer algunos cambios en la página index.html 66 00:05:11,345 --> 00:05:17,200 incluyendo algunas imágenes y contenido utilizando el objeto multimedia.