1
00:00:02,419 --> 00:00:08,900
Vale, bien, ahora vamos a ver cómo gestionar las dimensiones de cualquier elemento dentro de nuestra página web, ¿vale?

2
00:00:10,619 --> 00:00:19,780
Y ya esto también nos va a servir para ir poniendo más etiquetas o más propiedades que vamos a dejar siempre fijas en nuestras páginas, ¿vale?

3
00:00:20,280 --> 00:00:23,719
Entonces nos vamos a ir a brackets, ¿vale?

4
00:00:24,440 --> 00:00:28,839
Fijaros que este es el archivo con el que estábamos en el ejercicio anterior, viendo los fondos.

5
00:00:28,839 --> 00:00:34,560
Entonces, para ir reutilizando código, que no sea todo mal rápido, fijaros lo que voy a hacer.

6
00:00:34,640 --> 00:00:38,659
Le voy a dar a archivo y aquí le voy a dar a guardar como, ¿vale?

7
00:00:39,500 --> 00:00:46,179
Y simplemente lo que hago es que le cambio el nombre y donde ponía fondos, ahora lo llamo dimensiones, ¿vale?

8
00:00:46,460 --> 00:00:47,759
Dimensiones.html.

9
00:00:48,799 --> 00:00:54,539
Y ahora lo que voy a hacer es borrarme, pues me voy a borrar todas estas propiedades, ¿vale?

10
00:00:54,539 --> 00:01:01,640
Y me voy a borrar todo el contenido que había creado anteriormente, ¿vale?

11
00:01:02,759 --> 00:01:11,359
Y ahora lo vamos a llamar a esto, dimensiones en CSS, ¿vale?

12
00:01:13,180 --> 00:01:14,640
Ok, pues vale.

13
00:01:15,500 --> 00:01:16,540
Vamos a hacer una cosa.

14
00:01:16,659 --> 00:01:20,079
Lo primero que nos vamos a hacer es crearnos aquí una cabecera.

15
00:01:20,760 --> 00:01:23,140
Recuerdo que esto era importante en HTML5.

16
00:01:23,560 --> 00:01:25,819
Y dentro de esta cabecera nos vamos a crear un párrafo.

17
00:01:25,819 --> 00:01:37,030
que lo vamos a llamar, esto es una cabecera, ¿vale? Y lo que vamos a hacer, fijaros que

18
00:01:37,030 --> 00:01:41,569
yo ya dejo aquí mis características del body ya siempre fijas, ¿vale? Entonces lo

19
00:01:41,569 --> 00:01:48,349
que nos vamos a venir aquí es, lo primero es establecer unas propiedades que ya hemos

20
00:01:48,349 --> 00:01:52,950
visto, que son los márgenes y el espaciado, ¿vale? O el relleno, que la vamos a poner

21
00:01:52,950 --> 00:01:55,890
ahora mismo por defecto, simplemente esto es para hacer pruebas aquí, ¿vale? Vamos

22
00:01:55,890 --> 00:02:00,769
a poner margin 0, ¿vale? Fijaros como al poner 0 se ha subido para arriba porque ya

23
00:02:00,769 --> 00:02:07,769
no hay márgenes, ¿vale? Y vamos a poner también un relleno de 0, ¿vale? Y ahora

24
00:02:07,769 --> 00:02:12,629
vamos a modificar esa cabecera, ese elemento cabecera. En primer lugar le vamos a poner

25
00:02:12,629 --> 00:02:21,849
un color de fondo, ¿vale? background color, ¿vale? Y le vamos a poner todo el rojo, todo

26
00:02:21,849 --> 00:02:29,389
el verde y el azul acero, ¿vale? De tal forma que sea amarillo, ¿vale? Y vamos a empezar

27
00:02:29,389 --> 00:02:34,629
a ver esas propiedades que hablábamos de las dimensiones. Fijaros que al poner yo una

28
00:02:34,629 --> 00:02:40,449
cabecera y dentro un párrafo, mi cabecera me está ocupando todo el ancho de la página,

29
00:02:40,550 --> 00:02:44,930
¿vale? Yo eso lo puedo gestionar para que no me ocupe todo el ancho. ¿Cómo lo hago?

30
00:02:44,930 --> 00:02:48,949
Pues con una propiedad que se llama width, anchura, ¿vale?

31
00:02:49,789 --> 00:02:58,310
Si yo aquí pongo, por ejemplo, 90%, fijaros que ya mi web, perdón, que ya mi cabecera ya no me ocupa todo el ancho de la página,

32
00:02:58,449 --> 00:03:00,310
solo me ocupa el 90% de ella, ¿vale?

33
00:03:00,650 --> 00:03:04,509
Si yo pongo un 50%, pues lo mismo, ¿vale?

34
00:03:06,930 --> 00:03:08,150
Esto es para que veáis propiedades.

35
00:03:08,550 --> 00:03:15,270
De la misma forma que lo hacemos con la anchura, lo podemos hacer con la altura, ¿vale?

36
00:03:15,270 --> 00:03:31,550
¿Vale? Fijaros aquí, yo pongo 20%, ¿vale? 20%. Puedo poner más, puedo poner, por ejemplo, un 50%, ¿vale? Pero fijaros que cuando yo cambio, no me cambia este valor, ¿vale?

37
00:03:31,550 --> 00:03:45,629
¿Vale? ¿Esto por qué ocurre? Pues esto ocurre porque para este, para ahora mismo, para la web, ¿vale? Para HTML o para hojas de estilo, la página solo ocupa la parte donde tiene contenido.

38
00:03:45,750 --> 00:03:56,990
Es decir, solo ocupa esa sección que veis que se llama esto es una cabecera, ¿vale? Entonces nosotros le tenemos que decir que lo que ocupa es el 100%, es todo lo que se ve de la ventana, ¿vale?

39
00:03:56,990 --> 00:04:16,449
Para eso nos vamos a ir a la parte de estilo y esta es una propiedad que vamos a dejar ya siempre, ¿vale? Y aquí vamos a poner y le vamos a decir que todo el HTML, es decir, que toda la página y que todo el body, ¿vale? Todo esto tenga una altura del 100%, ¿vale?

40
00:04:16,449 --> 00:04:42,230
Entonces, fijaros cómo cambia la cosa, porque ahora toda la página, toda la página ocupa el 100%, ¿vale? Si yo le digo que mi cabecera ocupa el 80%, pues fijaros lo que ocupa, ¿vale? Yo puedo también sugestionarle y decirle que ocupe solo el 20%, ¿vale? Y me ocupa esa parte, ¿vale? Esto es importante por si queremos hacer un menú, por ejemplo, o una barra de navegación, lo que queramos, ¿vale?

41
00:04:42,230 --> 00:05:09,110
¿Qué más? ¿Qué más? ¿Qué más? Vale, tenemos otras propiedades que son importantes a la hora de utilizar otros dispositivos, ¿vale? Imaginaros que estamos utilizando dispositivos móviles o dispositivos en televisiones con pantalla más grande, ¿vale? Y es que esas propiedades son el max width, ¿vale? Que en este caso pondríamos una anchura máxima, pues vale, pues imaginaros que yo quiero poner 400 píxeles, ¿vale?

42
00:05:09,110 --> 00:05:17,910
¿Vale? Fijaros que al poner yo el 90%, ese 90% en mi página, en las dimensiones que estáis viendo vosotros en pantalla,

43
00:05:18,350 --> 00:05:23,730
implicaba más de 400. Por lo tanto, esta propiedad que acabo de poner me limita a eso, ¿vale?

44
00:05:23,889 --> 00:05:31,870
En este caso yo voy a poner, por ejemplo, pues 1000 píxeles. ¿Vale? Y fijaros que con 1000 píxeles me sobra, ¿vale?

45
00:05:31,870 --> 00:05:34,850
Si yo pongo 1200 sigo teniendo lo mismo, ¿vale?

46
00:05:37,889 --> 00:05:38,370
Importante.

47
00:05:39,910 --> 00:05:43,430
Otra propiedad, la altura mínima, ¿vale?

48
00:05:43,930 --> 00:05:45,529
La altura mínima de esta cabecera.

49
00:05:45,750 --> 00:05:49,629
Vamos a imaginarnos que yo quiero como una altura mínima 10 píxeles, ¿vale?

50
00:05:50,569 --> 00:05:57,250
Como ese 20%, que yo ahora mismo tengo definido, es por encima de 1000 píxeles, pues me cumple bien, ¿vale?

51
00:05:57,629 --> 00:06:02,230
Y puedo poner de la misma forma un max, una altura máxima, ¿vale?

52
00:06:02,230 --> 00:06:15,569
Pues pongo, por ejemplo, 15 píxeles. Y fijaros ahora que al poner 15 píxeles, él dice, 15 píxeles es menos de lo que yo tenía antes. Fijaros cómo ahora se ha reducido, ¿vale? Pues entonces vamos a poner 100 píxeles, ¿vale?

53
00:06:15,569 --> 00:06:37,089
Y ahora sí, que veis que con 100 píxeles eso es, uy, perdón, 100 píxeles es menor, ¿vale? Es menor que el 20%, ¿vale? Fijaros que si yo pongo 1000 o 10.000, ese 10.000 es mayor o ese 1000 es mayor que el 20%, pero si pongo 100 no, ¿vale?

54
00:06:37,089 --> 00:07:01,750
Entonces yo voy a dejar ahora mismo ese 100, ¿vale? Y de la misma forma también puedo poner un min width, ¿vale? Pues voy a jugar también con eso, ¿vale? Entonces, importante de esta parte, siempre ponemos, definimos una altura del 100%, ¿vale? Para hacerla entender a nuestro dispositivo, a nuestro navegador, que la página ocupa el 100% de lo que estamos viendo y luego podemos ir jugando con los diferentes elementos con las dimensiones, ¿vale?

55
00:07:01,750 --> 00:07:06,310
bueno, pues eso en cuanto a dimensiones

56
00:07:06,310 --> 00:07:07,589
vamos a ir viendo vídeos para que

57
00:07:07,589 --> 00:07:09,949
en el que vamos a ir haciendo hincapié sobre esto

58
00:07:09,949 --> 00:07:11,990
entonces es importante que nos quede claro