1
00:00:00,330 --> 00:00:00,640
Lá.

2
00:00:00,660 --> 00:00:01,610
Bem vindo de volta.

3
00:00:01,920 --> 00:00:04,060
Então esta lição vai ser muito rápida.

4
00:00:04,200 --> 00:00:10,680
Estamos apenas falando sobre duas tags da etiqueta DIV e da tag spand e realmente não podemos falar tanto quanto o

5
00:00:11,040 --> 00:00:16,480
que eles fazem e como os usamos até que possamos ver avaliar onde podemos modelar as coisas.

6
00:00:16,560 --> 00:00:22,410
Mas eu só quero apresentá-los agora porque vou mostrar-lhe coisas usando divs e extensões.

7
00:00:22,410 --> 00:00:27,110
Nos próximos vídeos e na verdade não fiz um excelente trabalho para explicá-lo no primeiro rascunho

8
00:00:27,120 --> 00:00:27,640
deste curso.

9
00:00:27,690 --> 00:00:31,820
Então eu voltei e adicionei isso em um após o fato depois que o Curso foi publicado.

10
00:00:31,950 --> 00:00:37,890
Eu vi algumas perguntas que eu notei que talvez eu pudesse esclarecer se eu fizesse um trabalho melhor,

11
00:00:37,920 --> 00:00:38,800
explicando Dave anteriormente.

12
00:00:39,000 --> 00:00:39,340
ESTÁ BEM.

13
00:00:39,360 --> 00:00:42,030
Então vamos começar a falar sobre divs e extensões.

14
00:00:42,060 --> 00:00:47,490
A primeira coisa que vou dizer é que ambos, como eu mencionei, não são úteis até

15
00:00:47,490 --> 00:00:49,770
que possamos chegar aos elementos de design.

16
00:00:49,770 --> 00:00:56,760
fazem é que eles permitem agrupar conteúdo juntos, de modo que um div de acordo com o MT-NW é apenas um recipiente genérico.

17
00:00:56,760 --> 00:00:58,060
Mas o que eles

18
00:00:58,320 --> 00:01:04,440
Então, é apenas uma maneira de agrupar as coisas juntas como um exemplo, não estou dizendo que esta é uma div

19
00:01:05,040 --> 00:01:09,210
aqui, mas isso pode ser uma div apenas uma caixa em torno de algum conteúdo.

20
00:01:09,210 --> 00:01:15,420
Parece algum texto aqui, algumas imagens e algum texto mais para agrupar isso e dar uma grande

21
00:01:15,420 --> 00:01:20,380
margem ou dar um fundo, desculpe-me, você pode fazer isso com uma div.

22
00:01:20,400 --> 00:01:24,960
Mais uma vez, não conversamos sobre como você faz isso ainda, mas a idéia é que você pode agrupar

23
00:01:24,960 --> 00:01:25,780
as coisas juntas.

24
00:01:25,950 --> 00:01:29,660
Então, você vai me ver usando muito muito esse curso nesse caminho.

25
00:01:29,760 --> 00:01:32,450
Deixe-me apenas mostrar-lhe um exemplo rápido.

26
00:01:32,520 --> 00:01:40,290
Então, se eu adicionar algum texto aqui e isso é realmente algo que um dos alunos deste curso apontou

27
00:01:40,290 --> 00:01:41,750
no fórum de discussão.

28
00:01:41,790 --> 00:01:47,410
Eu não sabia sobre o que é bom se você apenas digitar Lorem e clicar na aba.

29
00:01:47,590 --> 00:01:53,170
Isso nos dará Lorem Ipsum, basicamente, apenas um monte de texto de espaço de texto de texto.

30
00:01:53,280 --> 00:01:58,100
Então eu vou usar isso, faça dois desses.

31
00:01:58,440 --> 00:02:06,470
E então também adicione um H1 e digamos que este H-1 realmente não importa ou simplesmente coloque qualquer coisa

32
00:02:06,470 --> 00:02:06,890
lá.

33
00:02:07,020 --> 00:02:08,990
Mas digamos que este é um parágrafo

34
00:02:12,060 --> 00:02:14,300
e quero agrupar essas duas coisas juntas.

35
00:02:14,310 --> 00:02:19,560
O H-1 no parágrafo, digamos, eventualmente, de novo, não podemos fazê-lo agora, mas, eventualmente, eu quero ter uma

36
00:02:19,560 --> 00:02:22,150
caixa ao redor é uma borda e fronteira laranja.

37
00:02:22,260 --> 00:02:24,230
Mas não inclui esse.

38
00:02:24,270 --> 00:02:28,630
O que posso fazer é agrupá-los em uma etiqueta div,

39
00:02:33,090 --> 00:02:35,340
portanto, d v e save.

40
00:02:35,460 --> 00:02:41,700
eu atualizar a página ou realmente abrir, em primeiro lugar, não vai parecer diferente.

41
00:02:41,700 --> 00:02:42,350
E se

42
00:02:42,430 --> 00:02:48,180
Não vai se parecer com nada, na verdade, porque não há um estilo para que possamos ver tudo o

43
00:02:48,180 --> 00:02:53,580
que aconteceu é que essas duas coisas agora são agrupadas em um recipiente, apenas uma caixa genérica, um

44
00:02:53,580 --> 00:02:56,540
recipiente para mantê-los juntos, então podemos ir estilo mais tarde.

45
00:02:56,580 --> 00:03:01,800
Então, se eu dedique a esse div um fundo se eu fizesse ter um fundo

46
00:03:01,800 --> 00:03:07,350
amarelo que o fundo amarelo iria aproximadamente em torno disso, mas não incluiria o segundo parágrafo.

47
00:03:07,350 --> 00:03:12,440
Então, esse é um intervalo div, por outro lado também é um recipiente genérico.

48
00:03:12,630 --> 00:03:14,840
Mas há uma diferença fundamental.

49
00:03:14,910 --> 00:03:17,640
Então, deixe-me começar com um exemplo aqui.

50
00:03:17,910 --> 00:03:23,520
Digamos que queria destacar algumas dessas palavras aqui.

51
00:03:23,670 --> 00:03:24,600
Porta de Ipsum.

52
00:03:24,660 --> 00:03:30,840
Seja qual for o que eu queira fazer deste amarelo, em vez de preto, então o resto do texto é preto.

53
00:03:30,930 --> 00:03:34,510
Mas eu quero destacar isso como amarelo e fazer a fonte maior ou algo assim.

54
00:03:34,590 --> 00:03:36,090
Mais uma vez, não sabemos como fazer isso ainda.

55
00:03:36,450 --> 00:03:43,410
precisaria de uma tag em torno disso e se eu coloquei uma diva ali, que é um pacote genérico

56
00:03:45,390 --> 00:03:54,960
de contêineres e eu salvei e atualizei, você verá que é derrubado em uma nova linha e é porque uma div é um bloco elemento de nível.

57
00:03:54,990 --> 00:03:57,120
Mas a idéia é que eu

58
00:03:57,120 --> 00:04:01,410
Então, isso significa que ele ocupa sua própria linha exatamente como faz um parágrafo.

59
00:04:01,410 --> 00:04:06,960
Quando você adiciona um parágrafo em tudo, depois que esse parágrafo é pressionado para uma nova linha.

60
00:04:07,230 --> 00:04:10,470
Então, um div é um recipiente genérico de nível de bloco.

61
00:04:10,470 --> 00:04:17,430
Se eu substituir isso por um intervalo, isso não vai ser impressionante, porque como eu posso ver algo realmente, você

62
00:04:17,430 --> 00:04:22,410
verá uma mudança aqui, mas será apenas um parágrafo regular, então eu vou atualizar e

63
00:04:23,930 --> 00:04:25,340
há um recipiente .

64
00:04:25,340 --> 00:04:30,140
Agora, há um espaço genérico em torno desse conteúdo que não está fazendo nada.

65
00:04:30,540 --> 00:04:33,860
Ao contrário de uma div embora seja um recipiente em linha.

66
00:04:33,870 --> 00:04:40,680
Portanto, span é basicamente agrupar conteúdo selecionando conteúdo na linha e um div é outra maneira de agrupar

67
00:04:40,680 --> 00:04:41,200
conteúdo.

68
00:04:41,310 --> 00:04:42,930
Mas é um elemento de nível de bloco.

69
00:04:43,200 --> 00:04:45,840
Então eu sei que isso é um pouco teórico neste momento.

70
00:04:45,970 --> 00:04:48,820
É meio difícil entender a utilidade de.

71
00:04:48,990 --> 00:04:55,290
como ir encontrar esse período que eu adicionei e torná-lo fonte de quinze pontos e amarelo ou vá achar

72
00:04:55,380 --> 00:05:03,830
que div eu adicionei e dê-lhe uma borda de laranja e tudo o que nós faça e depois acabamos com uma borda laranja em torno deste conteúdo.

73
00:05:04,010 --> 00:05:08,060
Mas muito em breve, quando entrarmos em C Ss, poderemos dizer algo

74
00:05:08,070 --> 00:05:11,020
Todos os recipientes genéricos de grande divs span.

75
00:05:11,190 --> 00:05:12,510
Um é preto está na linha