1 00:00:00,620 --> 00:00:14,439 Ahora vamos a ver cómo añadir encabezados dentro de la página web. Los encabezados son muy importantes porque es la forma de estructurar el código dentro de una página web y darle a entender al navegador qué es lo más importante y qué no. 2 00:00:14,439 --> 00:00:28,260 ¿Vale? Entonces, muy importante que esto lo sepamos utilizar y que lo apliquemos bien, ¿vale? Entonces, nos vamos a ir a nuestro editor, ¿vale? Como veis aquí, ¿vale? 3 00:00:28,260 --> 00:00:39,380 Entonces, aquí tenéis el editor brackets, ¿vale? 4 00:00:39,380 --> 00:00:42,500 Lo primero que vamos a hacer es crear una estructura de HTML, ¿vale? 5 00:00:42,640 --> 00:00:49,399 Recuerdo que utilizando la extensión Emmet es poniendo HTML 2.5 6 00:00:49,399 --> 00:00:52,240 Y luego le damos a la tecla tabulador, ¿vale? 7 00:00:52,640 --> 00:00:54,560 Y nos aparece esto directamente 8 00:00:54,560 --> 00:00:59,979 Yo voy a modificar el título, voy a poner aquí encabezados 9 00:00:59,979 --> 00:01:02,920 de HTML, ¿vale? 10 00:01:03,380 --> 00:01:07,859 Y lo primero que voy a hacer es crear una estructura 11 00:01:07,859 --> 00:01:09,879 basiquita, ¿vale? 12 00:01:10,480 --> 00:01:13,739 Para crear esa estructura, pues vamos a ver las etiquetas 13 00:01:13,739 --> 00:01:16,439 de encabezado. Las etiquetas son muy sencillas porque son 14 00:01:16,439 --> 00:01:19,420 H1 para el nivel 1, H2 para el nivel 2 15 00:01:19,420 --> 00:01:21,939 y así consecutivamente hasta H6, ¿vale? 16 00:01:22,819 --> 00:01:25,840 Entonces, yo por ejemplo 17 00:01:25,840 --> 00:01:29,019 pondría aquí H1, pondría encabezado 18 00:01:29,019 --> 00:01:31,180 1, ¿vale? 19 00:01:31,540 --> 00:01:37,459 Y si yo ahora esto me lo copio y lo pego, seis veces, ¿vale? 20 00:01:37,620 --> 00:01:38,879 Y yo cambio la etiqueta. 21 00:01:40,739 --> 00:01:42,340 Cuatro, cinco y seis. 22 00:01:42,700 --> 00:01:46,620 Fijaros que estas se me ponen en rojo porque no corresponde con la anterior. 23 00:01:46,939 --> 00:01:48,099 Tengo que modificarlas también. 24 00:01:48,280 --> 00:01:50,700 Dos, tres, cuatro, cinco y seis. 25 00:01:51,819 --> 00:01:52,640 Y aquí lo mismo. 26 00:01:52,640 --> 00:01:53,840 Cambio el contenido. 27 00:01:54,939 --> 00:01:55,799 Ahí, ¿vale? 28 00:01:56,480 --> 00:01:58,799 Guardo y actualizo mi página. 29 00:01:58,799 --> 00:02:03,019 Y veis la forma que se nos queda en la estructura de la web, ¿vale? 30 00:02:04,120 --> 00:02:06,599 Entonces, ahora vamos a crear una web con un poco de contenido. 31 00:02:06,959 --> 00:02:09,340 Entonces, voy a comentar estos encabezados, ¿vale? 32 00:02:09,360 --> 00:02:10,180 O los voy a utilizar. 33 00:02:11,259 --> 00:02:12,800 Entonces, vamos a imaginarnos que... 34 00:02:13,460 --> 00:02:15,419 Bueno, no, los voy a comentar mejor, ¿vale? 35 00:02:15,580 --> 00:02:20,240 Para comentar, recuerdo que era el símbolo de menor, cierre de exclamación y dos guiones. 36 00:02:21,020 --> 00:02:26,819 Y hasta donde quiero comentar, pongo los dos guiones y el símbolo de mayor que. 37 00:02:27,520 --> 00:02:27,960 ¿Vale? 38 00:02:28,800 --> 00:02:32,759 Y entonces empezamos y ponemos una etiqueta H1, ¿vale? 39 00:02:33,639 --> 00:02:38,680 H1 y aquí vamos a poner animales vertebrados, ¿vale? 40 00:02:40,039 --> 00:02:44,620 Y para darle contenido voy a crear un texto aleatorio, ¿vale? 41 00:02:44,620 --> 00:02:53,620 Para eso pongo en Google Loren Ipsum, me voy a Loren Ipsum Generator y aquí voy a marcar que quiero un párrafo. 42 00:02:53,620 --> 00:03:16,710 Un párrafo. Le digo a generar y me genera un texto aleatorio que es el que voy a utilizar. Control, T, me vengo aquí, creo una etiqueta de párrafo y lo pego. Entonces fijaros, cuando yo tengo eso, actualizo mi web y esto es lo que me queda. 43 00:03:16,710 --> 00:03:43,080 Y ahora continuamos. Vamos a añadir ahora una etiqueta H2, que sea características. Meto mi etiqueta de párrafo y pego mi texto oratorio. Y vuelvo a hacer lo mismo. Cojo H2 y pongo anatomía. Pongo mi etiqueta de párrafo, pego y tal que así. 44 00:03:43,080 --> 00:04:03,819 ¿Vale? Siguiente etiqueta, H2. Clasificación. Mi etiqueta de párrafo, texto oratorio. Y ahora añado una etiqueta H3. ¿Vale? ¿Por qué? Porque voy a poner diferentes animales vertebrados dentro de esa calificación. 45 00:04:03,819 --> 00:04:32,819 Voy a poner, por ejemplo, los mamíferos, pongo un párrafo, porque yo ahora hablaría de los mamíferos, pongo otra etiqueta H3 para poner las aves, pongo un párrafo y pongo el texto aleatorio, pongo una etiqueta H3, pondría los peces, un párrafo y el texto aleatorio y una última etiqueta H3 y pondría anfibios y reptiles. 46 00:04:33,819 --> 00:04:35,920 y pondría mi etiqueta 47 00:04:35,920 --> 00:04:38,019 de texto de la página, ¿vale? 48 00:04:38,720 --> 00:04:40,879 Guardo, control S para guardar 49 00:04:40,879 --> 00:04:42,259 y actualizo la página. 50 00:04:42,600 --> 00:04:43,959 Y veis que se nos queda así, ¿vale? 51 00:04:45,839 --> 00:04:47,399 Ahora, esto es muy importante. 52 00:04:48,180 --> 00:04:51,100 En HTML no se debe de utilizar 53 00:04:51,100 --> 00:04:53,339 más de una etiqueta H1. 54 00:04:53,579 --> 00:04:53,920 ¿Por qué? 55 00:04:53,920 --> 00:04:56,579 Porque los buscadores consideran que eso es 56 00:04:56,579 --> 00:05:00,100 el contenido principal de la página. 57 00:05:00,240 --> 00:05:02,339 Entonces se pueden volver locos. 58 00:05:02,339 --> 00:05:20,379 Solo hay una forma de que podamos utilizar varias etiquetas H1. ¿Cómo es eso? Pues muy sencillo, ¿vale? Nos venimos a nuestro texto, nuestra página, perdón, y lo que vamos a hacer es meter la etiqueta section, ¿vale? 59 00:05:23,120 --> 00:05:30,019 Esta etiqueta nos va a permitir tener varias etiquetas H1 dentro de la página web, ¿vale? 60 00:05:30,019 --> 00:05:36,040 Entonces, yo, una vez que he metido esa etiqueta H1, me cojo todo el texto que había metido aquí, ¿vale? 61 00:05:37,420 --> 00:05:40,100 Lo corto, control X, ¿vale? 62 00:05:40,540 --> 00:05:42,319 Y lo pego dentro de section. 63 00:05:43,600 --> 00:05:48,680 Y fijaros, está section y luego está todo lo que sería mi página web. 64 00:05:48,680 --> 00:06:06,540 Yo la guardo, actualizo y fijaros que el encabezado H1 me ha cambiado, ¿vale? Estéticamente me ha cambiado, pero sigue siendo un encabezado H1, ¿vale? De cara a la página web sigue siendo un encabezado H1. 65 00:06:06,540 --> 00:06:28,639 De tal forma que yo ahora aquí podría meter una sección nueva, ¿vale? Y lo que voy a hacer es meter, pues, lo mismo que teníamos antes, cojo esta clasificación, ¿vale? Control-C y lo pego, ¿vale? Y ahora en vez de ser animales vertebrados, lo tengo aquí, van a ser animales invertebrados. 66 00:06:28,639 --> 00:07:02,449 Y en la clasificación, pues, lo voy a poner una nueva clasificación. Pondría yo aquí H3 y pondría artrópodos, ¿vale? Con su texto oratorio. Una etiqueta H3 con olíferos, con su texto oratorio. Y una etiqueta H3 con anélidos y equinodermos, con su texto oratorio. 67 00:07:02,730 --> 00:07:15,250 ¿Vale? Guardo, actualizo, ¿vale? Y fijaros que tenemos que animales vertebrados sería una etiqueta H1. ¿Vale? Una etiqueta H1. 68 00:07:15,810 --> 00:07:28,850 Ahora, si yo fuera del section meto una etiqueta H1, ¿vale? Por ejemplo, meto el reino animal, ¿vale? Fijaros cuando ahora actualizo cómo se ve el reino animal. 69 00:07:28,850 --> 00:07:36,269 Se ve más grande, ¿vale? ¿Por qué? Porque eso sería el encabezado, sería el encabezado principal de toda la página web. 70 00:07:36,610 --> 00:07:41,829 Y luego cada sección tiene su propio encabezado, ¿vale? Son cosas diferentes. 71 00:07:42,290 --> 00:07:50,269 Entonces es muy importante que utilicemos bien el elemento section y los elementos h1, h2, h3, etc. ¿Vale? 72 00:07:51,670 --> 00:07:55,370 Bueno, espero que haya quedado claro y que lo utilicéis bien.