1 00:00:10,760 --> 00:00:18,460 Bien vamos a continuar con nuestro proyecto vamos a ver el contenido del archivo contenido 2.La HTML 2 00:00:21,020 --> 00:00:22,510 definimos lo siguiente. 3 00:00:22,520 --> 00:00:30,080 Doctrine HTML también el elemento de G.T y agregamos nuestro meta y todo el código va a ser similar 4 00:00:30,230 --> 00:00:37,820 al archivo contenido 1.La HTML según lo hemos comentado del uso de selectores CSS así que también hacemos 5 00:00:37,820 --> 00:00:46,250 referencia al archivo estilo CSS según se indica agregamos el título contenido 2 y comenzamos con nuestro 6 00:00:46,250 --> 00:00:54,090 body y en este caso este primer DIV podemos observar que ya no tiene el selector de Heydi debido a que 7 00:00:54,090 --> 00:01:02,110 estamos en el contenido 2.La HTML y el tabulador que va a estar activo va a ser el tabulador 2 por lo 8 00:01:02,110 --> 00:01:07,600 tanto en este primer tabulador únicamente se aplica el estilo de Etap pero ya no se va a aplicar el 9 00:01:07,600 --> 00:01:13,780 estilo de Heydi que este selector únicamente debería aplicar a un solo elemento dentro de todo el archivo 10 00:01:13,840 --> 00:01:15,160 HTML. 11 00:01:15,160 --> 00:01:20,350 Por ello es la diferencia entre un selector de tipo Class y un selector de tipo Heidi 12 00:01:24,290 --> 00:01:30,530 así que este es nuestro primer tabulador el cual va a hacer referencia al contenido 1 punto HTML y debido 13 00:01:30,530 --> 00:01:35,270 a que estamos en el segundo tabulador este sí debería ser el tabulador activo. 14 00:01:35,270 --> 00:01:41,540 Por lo tanto además de indicar que vamos a utilizar los estilos de la clase Etap también vamos a indicar 15 00:01:41,540 --> 00:01:48,110 que vamos a utilizar los estilos del selector único llamado Heydi y aunque podamos aplicar a más de 16 00:01:48,110 --> 00:01:54,260 un elemento este estilo de tipo identificador único la idea es que únicamente lo apliquemos a un solo 17 00:01:54,260 --> 00:01:57,680 elemento el navegador no nos va a indicar ningún problema. 18 00:01:57,680 --> 00:02:03,950 Sin embargo a nivel de código nosotros deberemos aplicar estas mejores prácticas y si vamos a utilizar 19 00:02:04,040 --> 00:02:10,430 un selector de tipo Heydi únicamente deberíamos aplicarlo a un solo elemento en toda la página HTML 20 00:02:13,350 --> 00:02:20,450 de manera similar vamos a manejar los tres elementos el más externo más interno y un hipervínculo y 21 00:02:20,520 --> 00:02:26,550 a cada uno de estos elementos por medio de hojas de estilo vamos aplicarles una imagen y un estilo según 22 00:02:26,550 --> 00:02:32,040 corresponda y a cada uno de estos elementos le vamos a aplicar una imagen y también un estilo según 23 00:02:32,040 --> 00:02:32,750 corresponda 24 00:02:36,820 --> 00:02:41,150 y finalmente agregamos el último tabulador que va a corresponder al contenido. 25 00:02:41,150 --> 00:02:45,160 3 agregamos un salto de línea. 26 00:02:45,250 --> 00:02:50,890 También agregamos simplemente un ejemplo de contenido de la página 2 para que sepamos que estamos en 27 00:02:50,890 --> 00:02:59,040 la página 2 y hacemos referencia a un hipervínculo que nos lleva al Index cerramos el body y también 28 00:02:59,070 --> 00:03:08,220 el documento HTML íbamos a codificar ahora el contenido de nuestro documento tres puntos HTML. 29 00:03:08,470 --> 00:03:14,730 Básicamente es lo mismo únicamente vamos a hacer la diferencia del contenido 3 y del tabulador. 30 00:03:15,010 --> 00:03:20,770 En este caso el tercer tabulador es el que se va a activar y por lo tanto podemos observar que en el 31 00:03:20,770 --> 00:03:28,080 tercer tabulador vamos a indicar que vamos a aplicar el estilo único es decir el selector Heydi. 32 00:03:28,150 --> 00:03:35,710 Por lo tanto agregamos el Heydi igual al actual recordemos que estos estilos los vamos a agregar a nuestro 33 00:03:35,710 --> 00:03:40,930 archivo estilos puntos CSS y esto lo vamos a definir a continuación. 34 00:03:40,930 --> 00:03:47,980 Lo demás es lo mismo y agregamos un párrafo donde indiquemos que estamos en la página 3 y también agregamos 35 00:03:48,040 --> 00:03:49,990 un link para regresar al Index. 36 00:03:49,990 --> 00:03:53,290 Con eso terminamos el código de contenido 3.La HTML 37 00:03:56,020 --> 00:04:01,110 bien ahora vamos a agregar el contenido de nuestro archivo estilos puntos CSS. 38 00:04:01,110 --> 00:04:08,040 Aquí una parte interesante es que si no aplicamos este archivo estilo CSS y ejecutamos hasta este momento 39 00:04:08,070 --> 00:04:15,020 el proyecto podremos observar únicamente hipervínculos y texto así que incluso se les invita a ejecutar. 40 00:04:15,060 --> 00:04:21,090 Hasta este momento el proyecto y podrán observar que funciona correctamente pero que visualmente no 41 00:04:21,090 --> 00:04:27,720 se entiende el manejo de tabuladores y es debido a las hojas de estilo que podremos apreciar correctamente. 42 00:04:27,780 --> 00:04:33,330 El manejo de tabuladores y podamos obtener el efecto deseado así que a través de esta hoja de estilo 43 00:04:33,420 --> 00:04:35,500 es que vamos a obtener este efecto. 44 00:04:35,580 --> 00:04:38,930 Vamos a manejar algunas imágenes dentro de nuestro proyecto. 45 00:04:39,000 --> 00:04:45,210 Estas imágenes se pueden descargar directamente en la carpeta CSS y hacer referencia directamente al 46 00:04:45,210 --> 00:04:46,590 nombre de la imagen. 47 00:04:46,620 --> 00:04:52,350 Sin embargo en este momento estamos utilizando rutas absolutas para que no tengan ningún problema en 48 00:04:52,350 --> 00:04:54,160 ejecutar este proyecto. 49 00:04:54,390 --> 00:05:00,030 Pero como estamos comentando se pueden descargar las imágenes a esta carpeta y sólo poner el nombre 50 00:05:00,030 --> 00:05:03,570 de la imagen ya sin la R.L completa. 51 00:05:03,570 --> 00:05:09,390 Como primer paso vamos a agregar el elemento Bodhi así que los siguientes estilos que definamos van 52 00:05:09,390 --> 00:05:13,450 a aplicar a nuestro elemento Bodhi de nuestros documentos HTML. 53 00:05:13,830 --> 00:05:19,680 Recordemos que esta hoja de estilos ya está aplicando a varios documentos y no solamente a un documento 54 00:05:20,280 --> 00:05:27,980 así que el background va a ser el color blanco posteriormente todos los elementos de tipo imagen que 55 00:05:27,980 --> 00:05:34,490 agreguemos a nuestros documentos HTML van a tener el borde igual a cero es decir que no va a tener ningún 56 00:05:34,490 --> 00:05:43,130 marco posteriormente los elementos de tipo H1 van a tener lo siguiente vamos a agregar el atributo de 57 00:05:43,130 --> 00:05:49,790 PADI para quien va a ser un espacio entre el margen de nuestro elemento HTML y el contenido interno 58 00:05:49,790 --> 00:05:57,140 que tiene el elemento HTML es decir que cada uno de los elementos HTML está encerrado como si fuera 59 00:05:57,140 --> 00:06:02,690 dentro de un marco y tenemos dos propiedades que podemos manejar que podemos manipular. 60 00:06:02,690 --> 00:06:09,350 Una es el margen y otra es el concepto de Padín el Padín básicamente es el espacio que tenemos entre 61 00:06:09,380 --> 00:06:17,510 el elemento HTML el contenido y nuestra caja externa o como hemos comentado nuestro marco pero también 62 00:06:17,510 --> 00:06:22,270 tenemos el concepto de margen y el margen también es un elemento que podemos definir. 63 00:06:22,970 --> 00:06:29,780 Así que básicamente estamos indicando que vamos a tener un espacio de 5 píxeles en el padrón y básicamente 64 00:06:29,810 --> 00:06:36,680 el Padín se puede especificar de la siguiente manera vamos a comenzar especificando los espacios primero 65 00:06:36,710 --> 00:06:38,360 en la parte superior. 66 00:06:38,660 --> 00:06:45,340 Después en la parte derecha después en la parte inferior y después en la parte izquierda. 67 00:06:45,600 --> 00:06:50,810 Así cada uno de estos valores lo que se va a hacer es que se van a ir aplicando en cada uno de estos 68 00:06:50,810 --> 00:06:56,280 elementos así que en primer lugar este primer valor corresponde a la parte superior. 69 00:06:56,330 --> 00:07:04,100 Después a la parte derecha a la parte inferior y después a la parte izquierda así que podemos observar 70 00:07:04,100 --> 00:07:10,490 que estamos empezando en la parte superior y en el sentido de las manecillas del reloj estamos especificando 71 00:07:10,580 --> 00:07:12,260 los demás elementos. 72 00:07:12,390 --> 00:07:19,700 Si únicamente especificamos un elemento como puede ser 5 pixeles entonces se aplican los 5 píxeles a 73 00:07:19,700 --> 00:07:24,550 todos los elementos tanto superior derecho inferior e izquierdo. 74 00:07:24,650 --> 00:07:30,250 Se aplican 5 píxeles de separación entre el elemento y la caja que lo rodea. 75 00:07:30,350 --> 00:07:36,650 Eso también es más fácilmente observable si inspeccionamos nuestro elemento ya que al inspeccionarlo 76 00:07:36,830 --> 00:07:42,110 la sección de Inspección de nuestro navegador de Google Crom nos puede ayudar a entender más rápidamente 77 00:07:42,170 --> 00:07:43,350 este elemento. 78 00:07:43,430 --> 00:07:48,950 Así que básicamente este concepto de Padín es un espacio que se va a dejar entre nuestro contenido y 79 00:07:48,980 --> 00:07:49,610 la caja. 80 00:07:49,610 --> 00:07:57,440 El margen del elemento que rodea a cualquier elemento HTML que definamos y como hemos comentado también 81 00:07:57,450 --> 00:08:03,030 no solamente tenemos el Padín sino que también tenemos el concepto de márgen el cual viene posterior 82 00:08:03,060 --> 00:08:04,100 al padre. 83 00:08:04,230 --> 00:08:10,740 El padre es interno y el margen es externo y de igual manera se definen los elementos primero superior 84 00:08:11,100 --> 00:08:13,440 derecho inferior e izquierdo. 85 00:08:13,530 --> 00:08:19,370 En ese orden es que vamos a definir los elementos de nuestro margen posteriormente agregamos el color 86 00:08:19,370 --> 00:08:25,450 que se va a manejar en el texto de nuestro elemento H1 y finalmente el Foncillas. 87 00:08:25,580 --> 00:08:30,980 Así que definimos también este elemento para que manejemos otro tipo de tamaño de fuente en los elementos 88 00:08:30,980 --> 00:08:40,270 de tipo H1 y cerramos los estilos que vamos a aplicar a este elemento H1 posteriormente para crear los 89 00:08:40,270 --> 00:08:46,930 tabuladores se aplica la técnica la cual hemos comentado que es por medio de tres bloques así que vamos 90 00:08:46,930 --> 00:08:49,210 a manejar un hub externo. 91 00:08:49,210 --> 00:08:56,230 Posteriormente un interno y vamos a manejar un elemento más interno que va a ser un hipervínculo así 92 00:08:56,230 --> 00:09:01,570 que vamos a definir este tipo de IP vamos a ir agregando de manera anidada las imágenes hasta formar 93 00:09:01,570 --> 00:09:04,300 todos los elementos de la imagen del tabulador 94 00:09:07,010 --> 00:09:08,680 así que nuestro Dib más externo 95 00:09:11,840 --> 00:09:17,780 le vamos a asignar una imagen llamada izq. Tab punto GIFF que si observamos nuestra imagen del tabulador 96 00:09:18,590 --> 00:09:24,050 vamos a poder observar que en este caso tenemos una imagen izquierda que vendría siendo esta esquina 97 00:09:24,080 --> 00:09:25,380 izquierda redondeada. 98 00:09:25,400 --> 00:09:31,370 También tenemos una imagen del lado derecho que va a ser una imagen derecha redondeada y tenemos la 99 00:09:31,370 --> 00:09:39,390 imagen central que se debería poder extender tanto a izquierda como a derecha así que en este caso esta 100 00:09:39,390 --> 00:09:42,880 primera imagen se está aplicando al Dib más externo. 101 00:09:42,930 --> 00:09:49,110 Posteriormente vamos a definir otro Dib que se va a aplicar al div de la parte derecha que es el interno 102 00:09:49,470 --> 00:09:53,970 y posteriormente vamos a agregar un hipervínculo y le vamos a asignar la imagen central 103 00:09:56,530 --> 00:10:03,130 recordemos que si esta imagen la descargamos y la depositamos dentro de la carpeta CSS entonces simplemente 104 00:10:03,130 --> 00:10:09,700 podemos poner este nombre de la imagen y omitir toda esta ruta como siguiente paso lo que vamos a indicar 105 00:10:09,700 --> 00:10:15,640 por medio de nuestra hoja de estilo es que este elemento se va a desplegar como un bloque es decir que 106 00:10:15,640 --> 00:10:21,640 se debe demostrar ya que un dip que no tiene ningún elemento podría desaparecer de nuestro documento 107 00:10:21,670 --> 00:10:27,550 HTML pero en este caso si deseamos que se muestre y por lo tanto vamos a indicar la opción de display 108 00:10:27,640 --> 00:10:33,870 igual a block y también este tabulador lo vamos a flotar hacia la izquierda 109 00:10:36,330 --> 00:10:43,650 indicamos el alto de la imagen el cual es de 21 píxeles y agregamos el Padín en este caso no vamos a 110 00:10:43,650 --> 00:10:49,140 agregar ningún PADI por lo tanto indicamos que para todos los elementos de tipo Padín va a aplicar el 111 00:10:49,140 --> 00:10:56,640 valor de cero píxeles tanto para el patín superior derecho inferior e izquierdo según hemos comentado 112 00:10:56,640 --> 00:11:01,920 que si únicamente asignamos un valor entonces va a aplicar a las cuatro posiciones 113 00:11:05,330 --> 00:11:08,890 y finalmente agregamos una separación entre tabuladores. 114 00:11:08,930 --> 00:11:16,500 Por lo tanto agregamos la propiedad de márgen y podemos observar que el margen únicamente lo estamos 115 00:11:16,500 --> 00:11:24,620 aplicando en la parte derecha en la parte superior e cero y en la parte derecha es un píxel en la parte 116 00:11:24,680 --> 00:11:29,950 inferior es cero y en la parte izquierda también va a ser el valor de cero. 117 00:11:29,990 --> 00:11:35,810 Por lo tanto esto sí es importante memorizar el orden en que se aplican estos elementos ya que va a 118 00:11:35,810 --> 00:11:41,810 ser como hemos comentado de la parte superior y en el sentido de las manecillas del reloj se van a ir 119 00:11:41,830 --> 00:11:47,350 aplicando los siguientes elementos son siempre cuatro valores que se van a definir en este orden y en 120 00:11:47,350 --> 00:11:52,890 caso de que se defina solamente un valor entonces se va a aplicar ese mismo valor a todos los elementos. 121 00:11:53,170 --> 00:11:58,660 Así que básicamente lo que estamos haciendo es que estamos aplicando lo siguiente tenemos un DIV que 122 00:11:58,660 --> 00:12:00,250 es el más externo. 123 00:12:00,250 --> 00:12:07,580 Posteriormente agregamos un padre si es que tenemos algún valor es decir una separación entre nuestro 124 00:12:07,580 --> 00:12:14,300 contenido del DIV tenemos aquí el Padín y posteriormente tenemos ya el margen y dentro de ese margen 125 00:12:14,300 --> 00:12:20,150 podemos especificar hacia fuera también el espacio en píxeles que debe de ocupar. 126 00:12:20,150 --> 00:12:25,250 Así que de esta manera es que estamos empezando a dar forma a los elementos por medio de las hojas de 127 00:12:25,250 --> 00:12:31,370 estilo vamos a detener hasta aquí este vídeo y en el siguiente vídeo vamos a continuar codificando este 128 00:12:31,370 --> 00:12:33,130 archivo de estilos puntuó CSS.