1
00:00:00,330 --> 00:00:00,640
Ahí.

2
00:00:00,660 --> 00:00:01,610
Dar una buena acogida.

3
00:00:01,920 --> 00:00:04,060
Entonces esta lección va a ser muy rápida.

4
00:00:04,200 --> 00:00:10,680
Estamos hablando de dos etiquetas, la etiqueta DIV y la etiqueta spand, y realmente no podemos hablar mucho sobre lo

5
00:00:11,040 --> 00:00:16,480
que hacen y cómo las usamos hasta que lleguemos a ver dónde podemos diseñar las cosas.

6
00:00:16,560 --> 00:00:22,410
Pero solo quiero presentarlos ahora porque les mostraré cosas usando divs y spans.

7
00:00:22,410 --> 00:00:27,110
En los siguientes videos y no hice un gran trabajo de explicarlo en el primer borrador de

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

9
00:00:27,690 --> 00:00:31,820
Así que volví y lo agregué después del hecho después de que se publicó el curso.

10
00:00:31,950 --> 00:00:37,890
Vi algunas preguntas que noté que tal vez podría aclarar si solo hice un mejor trabajo explicando

11
00:00:37,920 --> 00:00:38,800
antes a Dave.

12
00:00:39,000 --> 00:00:39,340
DE ACUERDO.

13
00:00:39,360 --> 00:00:42,030
Así que comencemos a hablar de divisiones y tramos.

14
00:00:42,060 --> 00:00:47,490
Lo primero que diré es que ninguno de los dos, como mencioné, no es útil

15
00:00:47,490 --> 00:00:49,770
hasta que lleguemos a diseñar elementos.

16
00:00:49,770 --> 00:00:56,760
hacen es que te permiten agrupar contenido, por lo que un div según MT-NW es solo un contenedor genérico.

17
00:00:56,760 --> 00:00:58,060
Pero lo que

18
00:00:58,320 --> 00:01:04,440
Entonces, es solo una manera de agrupar las cosas como un ejemplo. No estoy diciendo que esto sea un div

19
00:01:05,040 --> 00:01:09,210
aquí, pero podría ser un div solo un recuadro alrededor de algún contenido.

20
00:01:09,210 --> 00:01:15,420
Parece que hay texto aquí algunas imágenes y más texto para agrupar eso en conjunto y darle un

21
00:01:15,420 --> 00:01:20,380
borde grande o darle un fondo discúlpeme usted puede hacer eso con un div.

22
00:01:20,400 --> 00:01:24,960
Una vez más, todavía no hemos hablado de cómo lo haces, pero la idea es que puedas

23
00:01:24,960 --> 00:01:25,780
agrupar cosas juntas.

24
00:01:25,950 --> 00:01:29,660
Así que me verás usando mucho divs en este curso en el futuro.

25
00:01:29,760 --> 00:01:32,450
Déjame mostrarte un ejemplo rápido.

26
00:01:32,520 --> 00:01:40,290
Entonces, si agrego algo de texto aquí, esto es algo que uno de los estudiantes de este curso señaló en

27
00:01:40,290 --> 00:01:41,750
el foro de discusión.

28
00:01:41,790 --> 00:01:47,410
No sabía que es bueno si solo escribes Lorem y presionas la pestaña.

29
00:01:47,590 --> 00:01:53,170
Nos dará a Lorem Ipsum básicamente un montón de texto de marcador de posición de texto de ejemplo.

30
00:01:53,280 --> 00:01:58,100
Así que voy a usar esto para hacer dos de esos.

31
00:01:58,440 --> 00:02:06,470
Y luego también agregue un H1 y digamos que este H-1 realmente no importa o simplemente coloque algo

32
00:02:06,470 --> 00:02:06,890
allí.

33
00:02:07,020 --> 00:02:08,990
Pero digamos que este es un párrafo

34
00:02:12,060 --> 00:02:14,300
y quiero agrupar estas dos cosas juntas.

35
00:02:14,310 --> 00:02:19,560
El H-1 en el párrafo digamos que eventualmente nuevamente no podemos hacerlo ahora pero eventualmente quiero tener una

36
00:02:19,560 --> 00:02:22,150
caja alrededor de un borde y un borde naranja.

37
00:02:22,260 --> 00:02:24,230
Pero no incluye este.

38
00:02:24,270 --> 00:02:28,630
Lo que puedo hacer es agruparlos en una etiqueta div

39
00:02:33,090 --> 00:02:35,340
para d v y guardar.

40
00:02:35,460 --> 00:02:41,700
actualizo la página o la abro en primer lugar, no se verá diferente en absoluto.

41
00:02:41,700 --> 00:02:42,350
Y si

42
00:02:42,430 --> 00:02:48,180
No va a parecer nada en realidad porque no hay un estilo para que veamos todo lo que sucedió es

43
00:02:48,180 --> 00:02:53,580
que estas dos cosas ahora están agrupadas en un contenedor, solo un cuadro genérico, un contenedor para mantenerlas

44
00:02:53,580 --> 00:02:56,540
juntas para que luego podamos ir al estilo más tarde.

45
00:02:56,580 --> 00:03:01,800
Entonces, si le doy a ese div un fondo, si lo hago tiene un fondo amarillo,

46
00:03:01,800 --> 00:03:07,350
ese fondo amarillo irá más o menos alrededor de este, pero no incluiría ninguno del segundo párrafo.

47
00:03:07,350 --> 00:03:12,440
Así que ese es un lapso div, por otro lado también es un contenedor genérico.

48
00:03:12,630 --> 00:03:14,840
Pero hay una diferencia clave.

49
00:03:14,910 --> 00:03:17,640
Entonces permítanme comenzar con un ejemplo aquí.

50
00:03:17,910 --> 00:03:23,520
Digamos que quería resaltar algunas de estas palabras aquí.

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

52
00:03:24,660 --> 00:03:30,840
Sea lo que sea, quiero que sea amarillo en lugar de negro para que el resto del texto sea negro.

53
00:03:30,930 --> 00:03:34,510
Pero quiero resaltar esto como amarillo y hacer que la fuente sea más grande o algo así.

54
00:03:34,590 --> 00:03:36,090
De nuevo, no sabemos cómo hacer eso todavía.

55
00:03:36,450 --> 00:03:43,410
necesitaría una etiqueta al respecto y si pongo un div ahí mismo, que es un contenedor genérico ups

56
00:03:45,390 --> 00:03:54,960
y guardo y actualizo, verá que se golpea en una nueva línea y eso es porque un div es un bloque elemento de nivel

57
00:03:54,990 --> 00:03:57,120
Pero la idea es que

58
00:03:57,120 --> 00:04:01,410
Entonces eso significa que toma su propia línea como lo hace un párrafo.

59
00:04:01,410 --> 00:04:06,960
Cuando agrega un párrafo en todo después de que ese párrafo se empuja hacia abajo a una nueva línea.

60
00:04:07,230 --> 00:04:10,470
Entonces, un div es un contenedor genérico de nivel de bloque.

61
00:04:10,470 --> 00:04:17,430
Si reemplazo esto con un lapso, esto no va a ser nada impresionante, porque ¿cómo puedo ver algo realmente? Aquí verás

62
00:04:17,430 --> 00:04:22,410
un cambio, pero se verá como un párrafo normal, así que voy a actualizar y

63
00:04:23,930 --> 00:04:25,340
hay un contenedor. .

64
00:04:25,340 --> 00:04:30,140
Ahora hay un lapso genérico alrededor de este contenido que no está haciendo nada.

65
00:04:30,540 --> 00:04:33,860
A diferencia de un div aunque es un contenedor en línea.

66
00:04:33,870 --> 00:04:40,680
Así que span es básicamente para agrupar contenido seleccionando contenido en línea y un div es otra forma de agrupar

67
00:04:40,680 --> 00:04:41,200
contenido.

68
00:04:41,310 --> 00:04:42,930
Pero es un elemento de nivel de bloque.

69
00:04:43,200 --> 00:04:45,840
Entonces sé que esto es un poco teórico en este punto.

70
00:04:45,970 --> 00:04:48,820
Es un poco difícil de entender la utilidad de.

71
00:04:48,990 --> 00:04:55,290
ir a buscar ese tramo que agregue y hacer que sea fuente de quince puntos y amarillo o ir a

72
00:04:55,380 --> 00:05:03,830
buscar ese div que agregue y darle un borde naranja y lo que sea hacer y luego terminamos con un borde naranja alrededor de este contenido.

73
00:05:04,010 --> 00:05:08,060
Pero muy pronto, cuando entremos en C Ss, podremos decir algo así como

74
00:05:08,070 --> 00:05:11,020
Bien, los grandes divs abarcan contenedores genéricos.

75
00:05:11,190 --> 00:05:12,510
Uno es negro, está en línea