1 00:00:11,910 --> 00:00:16,860 Vamos a analizar a continuación el ejercicio de manejo de tablas con HTML. 2 00:00:16,920 --> 00:00:17,930 Están listos. 3 00:00:17,970 --> 00:00:18,450 Vamos 4 00:00:21,590 --> 00:00:27,170 el objetivo del ejercicio es crear un proyecto para poner en práctica el concepto de tablas con HTML 5 00:00:27,710 --> 00:00:30,800 y al finalizar deberemos observar lo siguiente según se muestra 6 00:00:34,880 --> 00:00:38,000 como primer paso vamos a crear nuestro proyecto. 7 00:00:38,000 --> 00:00:44,810 El nombre del proyecto es manejo tablas HTML y lo vamos a depositar en la ruta mostrada y damos clic 8 00:00:44,810 --> 00:00:45,590 en Finalizar 9 00:00:49,130 --> 00:00:56,060 como siguiente paso vamos a crear un archivo llamado estilos CSS así que vamos a crear un nuevo archivo 10 00:00:56,060 --> 00:00:57,620 de tipo CSS. 11 00:00:57,650 --> 00:01:04,550 El archivo se llama estilos y se deposita a nivel raíz por lo tanto el campo de folder está vacío. 12 00:01:05,240 --> 00:01:11,240 Recordemos que no es necesario agregar la extensión punto CSS en automático al seleccionar el tipo de 13 00:01:11,240 --> 00:01:15,710 archivo CSS va a agregar la extensión y damos clic en Finalizar 14 00:01:18,790 --> 00:01:26,870 como siguiente paso vamos a modificar nuestro archivo índex punto HTML agregamos el Doctrine. 15 00:01:27,100 --> 00:01:30,820 Iniciamos nuestro documento HTML y agregamos un cabecero. 16 00:01:31,000 --> 00:01:38,280 También el meta de Charged y vamos a agregar un link hacia nuestra hoja de estilos estilos CSS 17 00:01:41,310 --> 00:01:49,120 agregamos un título llamado ejercicio tablas HTML y cerramos nuestro cabecero ahora vamos a comenzar 18 00:01:49,120 --> 00:01:58,920 con nuestro body y agregamos un título de tipo H1 con el texto de ejercicio tablas HTML y vamos a comenzar 19 00:01:58,980 --> 00:02:00,300 a crear nuestra tabla. 20 00:02:00,300 --> 00:02:06,180 En este caso va a ser una tabla con un ancho de 500 píxeles y también vamos a indicar que se va a mostrar 21 00:02:06,210 --> 00:02:07,100 un borde. 22 00:02:07,260 --> 00:02:09,960 En este caso el borde es de un píxel. 23 00:02:10,050 --> 00:02:13,370 Posteriormente podemos agregar un título a esta tabla. 24 00:02:13,380 --> 00:02:18,600 Para ello vamos a utilizar el elemento caption y agregamos el título de tabla. 25 00:02:18,660 --> 00:02:27,110 Lenguajes de Programación y cerramos el título de esta tabla y comenzamos a agregar los renglones de 26 00:02:27,110 --> 00:02:28,130 esta tabla. 27 00:02:28,130 --> 00:02:36,420 Para ello abrimos la etiqueta Borrow y posteriormente este primer renglón va a ser para alimentos de 28 00:02:36,420 --> 00:02:37,380 tipo Gelder. 29 00:02:37,380 --> 00:02:40,130 Por lo tanto vamos a agregar un tipo T y Bolger. 30 00:02:40,230 --> 00:02:48,020 Por lo tanto agregamos un elemento TH de Taiwo el Gelder y el primer Gelder que vamos a agregar es el 31 00:02:48,020 --> 00:02:49,280 nombre. 32 00:02:49,280 --> 00:02:51,240 Cerramos nuestro Bolger. 33 00:02:51,680 --> 00:02:57,540 Posteriormente agregamos otro Gelder que va a contener el texto de descripción. 34 00:02:57,620 --> 00:03:05,970 Cerramos esta etiqueta y agregamos una tercera etiqueta llamada creador y cerramos este Gelder y con 35 00:03:05,970 --> 00:03:12,660 eso cerramos nuestro primer renglón el cual es un renglón que tiene tres columnas pero son de tipo Gelder 36 00:03:13,050 --> 00:03:16,100 con los textos de nombre descripción y creador. 37 00:03:18,100 --> 00:03:22,390 Ahora vamos a agregar un registro pero en este caso ya va a contener datos. 38 00:03:22,390 --> 00:03:28,810 Para ello vamos a declarar un elemento de tipo T R pero vamos a agregar un estilo y en este caso el 39 00:03:28,810 --> 00:03:32,530 estilo va a ser una clase llamada Routh 1. 40 00:03:32,560 --> 00:03:40,640 Este estilo lo vamos a agregar a nuestro archivo estilos puntos CSS posteriormente agregamos una columna 41 00:03:40,700 --> 00:03:49,880 en este caso ya vamos a utilizar la etiqueta de Tibol data y agregamos el texto IAVA y cerramos nuestro 42 00:03:49,880 --> 00:03:59,870 primer dato vamos a continuar modificando nuestro archivo índex punto HTML posteriormente agregamos 43 00:03:59,870 --> 00:04:05,010 otro elemento de tipo TD y en este caso agregamos el texto. 44 00:04:05,010 --> 00:04:07,150 Desarrollo de aplicaciones generales. 45 00:04:07,200 --> 00:04:15,380 Su fuerte está en las aplicaciones empresariales y cerramos nuestra columna y agregamos una tercer columna 46 00:04:15,680 --> 00:04:22,190 en este caso el desarrollador de este lenguaje es James Gosling y cerramos nuestro último dato nuestra 47 00:04:22,190 --> 00:04:30,930 última columna y con eso cerramos nuestro segundo registro ahora vamos a agregar un tercer registro 48 00:04:31,200 --> 00:04:37,080 pero en este caso debido a que es un elemento también de datos vamos a agregar ahora otro registro y 49 00:04:37,080 --> 00:04:44,430 en este caso este registro vamos a utilizar la clase Rog 2 y de esta manera cada uno de los registros 50 00:04:44,430 --> 00:04:50,610 que vayamos agregando podemos ir modificando los estilos para que se vaya viendo el resultado deseado. 51 00:04:50,610 --> 00:04:57,240 Según se mostró al inicio así que en este caso el registro 2 va a tener otro color y vamos a agregar 52 00:04:57,240 --> 00:05:05,240 la siguiente columna con el siguiente texto Ya destruí cerramos nuestra columna la descripción de esta 53 00:05:05,240 --> 00:05:11,690 columna es desarrollo aplicaciones para Internet mayormente enfocadas en el front end de las aplicaciones 54 00:05:11,690 --> 00:05:12,800 web. 55 00:05:12,800 --> 00:05:20,450 Cerramos esta columna y agregamos una tercer columna y el creador es Brendan Aicha y cerramos nuestra 56 00:05:20,450 --> 00:05:27,260 columna y con eso también cerramos nuestro renglón y agregamos un último renglón en este caso vamos 57 00:05:27,260 --> 00:05:28,670 a repetir el estilo. 58 00:05:28,670 --> 00:05:32,750 Por lo tanto vamos a indicar que la clase que se va a utilizar es la clase de rock. 59 00:05:32,780 --> 00:05:41,560 1 agregamos una columna en este caso el lenguaje de PHP póstumamente la descripción es lenguaje para 60 00:05:41,560 --> 00:05:44,190 crear aplicaciones web de rápido desarrollo. 61 00:05:44,230 --> 00:05:51,820 Cerramos esta etiqueta abrimos una columna más y el creador es Rasmus leaguer Dorff y cerramos nuestra 62 00:05:51,820 --> 00:05:58,660 columna y también con eso cerramos nuestro registro y con eso cerramos también nuestra tabla. 63 00:05:58,660 --> 00:06:05,230 Así que vamos a tener cuatro renglones uno es de tipo Gelder y tres de tipo data y cada renglón tiene 64 00:06:05,230 --> 00:06:06,920 tres columnas. 65 00:06:06,970 --> 00:06:10,780 Con eso cerramos también el bodhi y el documento HTML. 66 00:06:10,780 --> 00:06:14,170 Recuerden que para cualquier duda pueden dar clic en el nombre del archivo. 67 00:06:14,170 --> 00:06:19,270 Sin embargo se les solicita codificar línea en línea para que quede claro este ejemplo de tablas con 68 00:06:19,270 --> 00:06:28,550 HTML ahora vamos a modificar nuestro archivo estilos pontos CSS y el primer elemento que vamos a modificar 69 00:06:28,580 --> 00:06:29,570 es el body. 70 00:06:29,780 --> 00:06:37,160 Así que vamos a los siguientes estilos al body de nuestro documento HTML modificamos el background con 71 00:06:37,160 --> 00:06:38,380 el color siguiente. 72 00:06:38,540 --> 00:06:44,780 Recordemos que el color está en código hexadecimal posteriormente indicamos el font family. 73 00:06:44,780 --> 00:06:53,880 En este caso el font family de Comic Sans MS y con eso cerramos el body de nuestro documento HTML. 74 00:06:53,940 --> 00:07:00,990 Ahora vamos a agregar el estilo para nuestro elemento de caption que es el título de nuestra tabla indicamos 75 00:07:00,990 --> 00:07:09,880 que el alto de nuestro título va a ser de 30 puntos también el fondo Waite va a ser Bold y el color 76 00:07:09,970 --> 00:07:11,270 va a ser el indicado. 77 00:07:11,680 --> 00:07:20,170 Recordemos que está en código hexadecimal y con eso cerramos dos estilos para el elemento caption. 78 00:07:20,170 --> 00:07:26,430 Ahora vamos a agregar los estilos para los elementos de h Tex. 79 00:07:26,630 --> 00:07:33,820 Va a ser el centro el color también va a ser el indicado en código hexadecimal y también el color de 80 00:07:33,820 --> 00:07:34,600 fondo. 81 00:07:34,750 --> 00:07:41,760 En este caso también vamos a agregar este color en código hexadecimal y con eso cerramos los estilos 82 00:07:41,970 --> 00:07:44,060 para nuestro elemento Th. 83 00:07:44,250 --> 00:07:49,790 Ahora vamos a agregar los estilos para los elementos de tipo TD Text Line. 84 00:07:49,820 --> 00:07:57,060 En este caso va a ser justificado el color también va a ser el indicado en código hexadecimal y el background 85 00:07:57,120 --> 00:08:02,610 es opcional modificarlo si quitan los comentarios lo va a aplicar pero si lo dejamos entre comentarios 86 00:08:02,730 --> 00:08:08,930 va a dejar el fondo que tenga por default y el 6 va a ser de tipo Smoot. 87 00:08:09,680 --> 00:08:15,430 Así que la fuente va a ser de tamaño pequeño el vertical line se va a poner el texto a la mitad. 88 00:08:15,430 --> 00:08:22,430 Por lo tanto utilizamos la propiedad de el y con eso terminamos los estilos de nuestro elemento de tipo 89 00:08:22,500 --> 00:08:29,970 de posteriormente agregamos los estilos para nuestro registro 1 así que en este caso agregamos la clase 90 00:08:30,190 --> 00:08:31,230 ROV 1. 91 00:08:31,260 --> 00:08:37,440 Por ello utilizamos la notación de punto y agregamos el siguiente estilo agregamos que el color de fondo 92 00:08:37,560 --> 00:08:44,340 va a ser el color indicado en código hexadecimal y también para el renglón 2 vamos a modificar el background 93 00:08:44,820 --> 00:08:52,090 esto para que tengamos una diferencia de color entre cada uno de los registros de nuestra tabla de HTML. 94 00:08:52,110 --> 00:08:55,230 Con esto terminamos nuestro archivo estilos puntos CSS 95 00:08:58,060 --> 00:09:02,810 como siguiente paso vamos a ejecutar nuestro proyecto y el resultado es como sigue. 96 00:09:03,070 --> 00:09:09,820 Podemos observar que hemos modificado el estilo de nuestro título también el estilo de nuestro título 97 00:09:09,820 --> 00:09:17,800 de la tabla HTML y también hemos hecho lo siguiente en nuestra tabla HTML como primer lugar hemos modificado 98 00:09:17,830 --> 00:09:23,860 los estilos de cada uno de los elementos que son de tipo Gelder así que este primer renglón que es un 99 00:09:23,860 --> 00:09:26,650 T.R todos estos van a ser T.R 100 00:09:30,880 --> 00:09:37,480 incluye cada uno de esos registros incluye tres columnas pero en este caso estos elementos son de tipo 101 00:09:37,490 --> 00:09:38,390 Th. 102 00:09:38,590 --> 00:09:44,410 Así que a estos elementos les hemos aplicado un estilo para que parezcan precisamente cabeceros de nuestra 103 00:09:44,410 --> 00:09:52,400 tabla HTML tanto a los textos de nombre descripción y en este caso también el título de creador. 104 00:09:52,740 --> 00:09:58,840 Y podemos observar que en este primer renglón hemos asignado un color en este caso el color blanco y 105 00:09:58,840 --> 00:10:05,830 utilizamos cada uno de los elementos de tipo TD precisamente para ir agregando elementos de tipo dato 106 00:10:06,070 --> 00:10:15,020 a nuestra tabla son tres elementos de tipo tben y a este primer renglón de tipo data le asignamos la 107 00:10:15,020 --> 00:10:17,230 clase de rol 1. 108 00:10:17,270 --> 00:10:24,140 Posteriormente a este segundo renglón de tipo data le hemos agregado la clase de tipo robados y podemos 109 00:10:24,140 --> 00:10:30,350 observar que el color de fondo es distinto y así conforme vayamos agregando elementos a nuestra tabla 110 00:10:30,560 --> 00:10:36,830 podremos ir modificando el estilo para que podamos observar claramente una diferencia entre los registros 111 00:10:37,250 --> 00:10:43,880 y así podamos ir modificando la presentación de nuestra tabla HTML así que la idea de los estilos es 112 00:10:43,880 --> 00:10:50,900 que podamos ir alternando entre un registro y otro y de esta manera poder identificar cada uno de los 113 00:10:50,900 --> 00:10:58,450 elementos de nuestra tabla y poder leer los elementos más fácilmente como tareas extra. 114 00:10:58,450 --> 00:11:04,540 Del ejercicio se deja realizar la inspección con el navegador web y entender cada uno de los elementos 115 00:11:04,720 --> 00:11:07,820 que componen la tabla de la página web. 116 00:11:07,990 --> 00:11:13,730 Además revisar los estilos CSS aplicados a cada elemento de la tabla HTML. 117 00:11:14,050 --> 00:11:20,440 Recordar que la inspección del código HTML consiste en seleccionar una parte del código desde el navegador 118 00:11:20,440 --> 00:11:24,300 web dar clic derecho y seleccionar inspeccionar. 119 00:11:24,310 --> 00:11:29,080 Con esto van a poder realizar la inspección de los elementos de la tabla HTML 120 00:11:33,400 --> 00:11:34,430 como conclusión. 121 00:11:34,480 --> 00:11:40,630 Con este ejercicio hemos puesto en práctica el concepto de tablas con HTML hemos visto cada uno de sus 122 00:11:40,630 --> 00:11:47,610 elementos así como aplicamos algunos estilos para mejorar la apariencia visual de nuestra tabla HTML.