1
00:00:03,250 --> 00:00:07,080
Nenhum auto-respeito designers de páginas web,

2
00:00:07,080 --> 00:00:10,990
seria hoje projetar páginas web sem incluir

3
00:00:10,990 --> 00:00:15,665
alguma forma de imagens ou mídia em seus sites.

4
00:00:15,665 --> 00:00:19,055
Professores de ciência da computação são uma exceção.

5
00:00:19,055 --> 00:00:23,390
Nesta fase, você provavelmente está esperando que eu diga isso,

6
00:00:23,390 --> 00:00:26,270
mas não é isso que eu vou dizer.

7
00:00:26,270 --> 00:00:29,255
Eu vou dizer que,

8
00:00:29,255 --> 00:00:33,425
“Uma foto vale $12 no iStockPhoto.com.

9
00:00:33,425 --> 00:00:38,060
Bootstrap fornece suporte extensivo para incluir

10
00:00:38,060 --> 00:00:42,800
imagens e vários tipos de mídia em seus sites e suas páginas da web.

11
00:00:42,800 --> 00:00:49,040
A tag HTML de imagem é obviamente vai ser usado para incluir imagens em suas páginas web. O

12
00:00:49,040 --> 00:00:55,170
Bootstrap também fornece um monte de classes que você pode aplicar à

13
00:00:55,170 --> 00:01:02,215
tag de imagem, a fim de melhorar ainda mais a forma como as imagens são incluídas em sua página web.

14
00:01:02,215 --> 00:01:08,535
Assim, você pode usar uma classe de imagem chamada img-fluid que fará suas imagens responsivas,

15
00:01:08,535 --> 00:01:15,195
o que significa que o tamanho da imagem se ajustará automaticamente a diferentes tamanhos de tela.

16
00:01:15,195 --> 00:01:22,585
Você também pode usar uma miniatura img-que irá colocar uma borda branca em torno de sua imagem.

17
00:01:22,585 --> 00:01:29,480
Você também pode lidar com as formas e tamanhos de imagens como você

18
00:01:29,480 --> 00:01:36,635
vê nesta imagem aqui para que você possa ter imagens para as quais você cria cantos arredondados,

19
00:01:36,635 --> 00:01:38,995
todos os quatro cantos,

20
00:01:38,995 --> 00:01:42,020
ou qualquer par de cantos escolhido.

21
00:01:42,020 --> 00:01:45,595
Assim, você pode aplicar a classe em torno dela para

22
00:01:45,595 --> 00:01:49,450
criar uma imagem com cantos arredondados ou você pode ver

23
00:01:49,450 --> 00:01:53,130
um hífen arredondado superior esquerdo ou direito para colocar

24
00:01:53,130 --> 00:01:57,905
os cantos arredondados em qualquer uma dessas quatro bordas da sua imagem.

25
00:01:57,905 --> 00:02:02,780
Você também pode aplicar círculo arredondado para criar imagens circulares.

26
00:02:02,780 --> 00:02:05,170
Então, quando você visita sites,

27
00:02:05,170 --> 00:02:10,310
você veria imagens sendo usadas de muitas dessas maneiras já.

28
00:02:10,310 --> 00:02:16,000
Você vai se lembrar que vimos a aula de cartas na lição anterior e no exercício.

29
00:02:16,000 --> 00:02:21,085
Aqui, ilustro o uso da classe Card com uma imagem incluída.

30
00:02:21,085 --> 00:02:27,320
Então, neste caso, nós incluímos uma imagem com a imagem do cartão de classe superior e se você

31
00:02:27,320 --> 00:02:30,760
incluir tamanho grande o suficiente a imagem que a imagem será incluída

32
00:02:30,760 --> 00:02:35,030
na parte superior e, em seguida, fechada dentro de um cartão como este.

33
00:02:35,030 --> 00:02:36,860
Se a imagem for muito pequena,

34
00:02:36,860 --> 00:02:41,245
ela pode ser posicionada em um canto do cartão.

35
00:02:41,245 --> 00:02:47,315
Então use uma imagem grande o suficiente para ser capaz de definir um cartão limpo como este.

36
00:02:47,315 --> 00:02:52,030
Então, aqui você verá a imagem que está sendo descrita com,

37
00:02:52,030 --> 00:02:56,035
as classes aplicadas a que, incluindo topo da imagem do cartão

38
00:02:56,035 --> 00:03:00,510
e img-fluido para tornar a imagem responsiva automaticamente.

39
00:03:00,510 --> 00:03:04,470
Então, é assim que você pode usar as imagens com a classe Card

40
00:03:04,470 --> 00:03:08,525
para definir cartões que você usa em suas páginas web.

41
00:03:08,525 --> 00:03:16,605
Outra maneira de incluir imagens e conteúdo relacionado em suas páginas da Web é um objeto de mídia.

42
00:03:16,605 --> 00:03:20,740
Um objeto de mídia permite especificar uma imagem que você pode

43
00:03:20,740 --> 00:03:26,225
posicionar à esquerda ou à direita da descrição.

44
00:03:26,225 --> 00:03:29,690
Além disso, você pode incluir um corpo de mídia

45
00:03:29,690 --> 00:03:32,880
que contém a descrição que acompanha a imagem.

46
00:03:32,880 --> 00:03:35,110
Então, como você vê neste exemplo aqui,

47
00:03:35,110 --> 00:03:41,270
o próprio corpo de mídia inclui qualquer conteúdo formatado HTML aqui.

48
00:03:41,270 --> 00:03:44,820
Então aqui estou usando um h2 e h4 juntamente com

49
00:03:44,820 --> 00:03:49,755
uma classe p dentro do corpo de mídia para definir o conteúdo real.

50
00:03:49,755 --> 00:03:54,240
Vamos usar o objeto de mídia no exercício que se segue.

51
00:03:54,240 --> 00:03:57,670
Você também pode fazer uma incorporação responsiva de conteúdo.

52
00:03:57,670 --> 00:04:03,360
Então, por exemplo, se você tiver um vídeo que deseja incluir em sua página da Web,

53
00:04:03,360 --> 00:04:07,690
então você pode usar uma classe iframe para enquadrar o vídeo

54
00:04:07,690 --> 00:04:10,760
e, em seguida, anexá-lo dentro da div com as classes

55
00:04:10,760 --> 00:04:16,410
incorporadas dando tamanhos responsivos para que você possa 16by9,

56
00:04:16,410 --> 00:04:21,020
4by3 ou vídeo, conteúdo a ser exibido.

57
00:04:21,020 --> 00:04:27,630
Então, incorporar responsivo, você pode usar as

58
00:04:27,630 --> 00:04:34,450
tags embed ou iframe ou vídeo ou objeto HTML e, em seguida, anexá-lo dentro de uma div.

59
00:04:34,450 --> 00:04:41,345
Aplicando a incorporação responsiva e também junto com a incorporação responsiva,

60
00:04:41,345 --> 00:04:47,295
especificando as dimensões que você deseja usar para dimensões 4by3 ou 16by9.

61
00:04:47,295 --> 00:04:53,685
Então é assim que você também pode incluir conteúdo de vídeo em suas páginas da Web.

62
00:04:53,685 --> 00:04:57,570
Agora, que vimos o suporte para imagens e mídia,

63
00:04:57,570 --> 00:05:02,230
é hora de ir para um exercício onde veremos como podemos incluir

64
00:05:02,230 --> 00:05:07,310
imagens na página web ou no site em que temos trabalhado.

65
00:05:07,310 --> 00:05:11,345
Vamos fazer algumas alterações na página index.html

66
00:05:11,345 --> 00:05:17,200
incluindo algumas imagens e conteúdo usando o objeto de mídia.