1 00:00:00,300 --> 00:00:22,539 Bueno, vamos a empezar con nuestro pequeño curso de HTML, vamos a seguir estos apuntes, los tendréis en el aula virtual, y bueno, un archivo HTML es básicamente un archivo de texto, lo puedo editar con cualquier editor de texto, el Visual Studio Code, lo de notas, el Notepad Plus, el que queráis. 2 00:00:22,539 --> 00:00:24,780 Yo estoy usando aquí en Linux 3 00:00:24,780 --> 00:00:28,079 Si nos vamos a los apuntes 4 00:00:28,079 --> 00:00:29,600 Vamos a ver 5 00:00:29,600 --> 00:00:31,199 Bueno, aquí hay una pequeña teoría 6 00:00:31,199 --> 00:00:32,479 Que os tenéis que leer 7 00:00:32,479 --> 00:00:37,729 Bueno, y la estructura básica de un documento HTML 8 00:00:37,729 --> 00:00:40,009 Es esta, vamos a verla 9 00:00:40,009 --> 00:00:42,369 Esto es recomendable que lo vayáis escribiendo 10 00:00:42,369 --> 00:00:43,590 Todo documento en HTML 11 00:00:43,590 --> 00:00:44,649 Tiene que empezar por esto 12 00:00:44,649 --> 00:00:47,149 .type 13 00:00:47,149 --> 00:00:49,990 HTML, estamos diciendo que esto es un HTML 14 00:00:49,990 --> 00:00:51,969 Fijaros que sale negrita 15 00:00:51,969 --> 00:00:53,329 Voy a guardarlo 16 00:00:53,329 --> 00:00:54,530 Hago aquí un guardar como 17 00:00:54,530 --> 00:01:02,700 me voy aquí al curso este que estoy preparando y le voy a poner un nombre como tan original como 18 00:01:02,700 --> 00:01:11,140 página 1.html la extensión es importante página 1.html le doy a guardar y veis que ya lo reconoce 19 00:01:11,140 --> 00:01:16,620 el editor lo reconoce y me ha cambiado los colores esto es importante porque luego nos va a ayudar a 20 00:01:16,620 --> 00:01:23,700 escribir mejor bueno lo que todo comentó tiene que empezar con la etiqueta html y cerrarse con 21 00:01:23,700 --> 00:01:30,060 la etiqueta html mira a esto llamamos etiquetas de acuerdo estas cositas está la etiqueta de 22 00:01:30,060 --> 00:01:38,739 apertura y este que tiene aquí la barrita es la etiqueta de cerrar todo documento html tiene que 23 00:01:38,739 --> 00:01:48,079 tener lo que se llama una cabecera lo que hago es que la abro y la cierro y un cuerpo que abro 24 00:01:48,079 --> 00:01:53,239 y cierro. Dentro de la cabecera, muy muy 25 00:01:53,239 --> 00:01:57,159 importante, tengo que meterle un atributo que se llama 26 00:01:57,159 --> 00:02:00,620 meta, que lo que le voy a decir es que la codificación 27 00:02:00,620 --> 00:02:04,420 que voy a usar es UTF-8. 28 00:02:05,700 --> 00:02:08,780 Esto es importante, le estoy diciendo que el código de caracteres que voy a usar 29 00:02:08,780 --> 00:02:13,180 es el UTF-8, porque si no nuestras queridas señes, los acentos 30 00:02:13,180 --> 00:02:16,979 no saldrían bien. Lo guardo y ahora voy a abrir 31 00:02:16,979 --> 00:02:30,110 esta bonita página web que he hecho, esto lo abro, mi bonita página web. Bueno, para 32 00:02:30,110 --> 00:02:35,289 abrirlo podéis cogeros el navegador de ficheros, o sea, podéis coger el navegador de ficheros 33 00:02:35,289 --> 00:02:43,650 e iros a donde tenéis la página y hacerle doble clic, que se abrirá, o bien dentro 34 00:02:43,650 --> 00:02:50,849 del propio navegador, control o, se abrirá esta ventanita que permite buscar el archivo 35 00:02:50,849 --> 00:02:57,669 y lo hago aquí lo tenemos de momento es algún documento en blanco si nos fijamos aquí explotado 36 00:02:57,669 --> 00:03:09,849 algo a nada que un navegador esto bueno bueno me sale aquí una ventanita en blanco le puedo 37 00:03:09,849 --> 00:03:18,530 meter contenido por ejemplo por ejemplo bueno es para meter párrafos abril cierro siempre 38 00:03:18,530 --> 00:03:25,669 a viciar. También es importante que probéis en vuestro editor si, usando P y tabulador, 39 00:03:25,930 --> 00:03:29,830 se autocompleta, porque hay muchos editores que la autocompletan y te ponen ya directamente 40 00:03:29,830 --> 00:03:34,050 este que estoy usando o no. No es mala idea cuando estás aprendiendo a escribirlo todo 41 00:03:34,050 --> 00:03:37,430 a mano, ¿eh? Eso es muy bueno. Pues vamos a hacer algo muy importante que es poner Hola 42 00:03:37,430 --> 00:03:42,669 Mundo. Los informáticos tenemos toda la tontería de cuando aprendemos algo ponemos Hola Mundo. 43 00:03:42,669 --> 00:03:59,490 Ahí lo tenemos. Me está diciendo hola mundo. Un hola mundo bastante soso, no tiene formato ningún. Fijaos que aquí me pone la dirección del archivo, dónde lo tengo el archivo. Esto lo puedo cambiar poniéndolo, poniendo un title. 44 00:03:59,490 --> 00:04:03,990 abro y cierro, siempre abro y cierro, probad 45 00:04:03,990 --> 00:04:08,050 a poner la barra, perdón, el tabulador, probad a poner 46 00:04:08,050 --> 00:04:12,189 title y tabulador a ver si vuestro editor lo soporta, hay muchos editores 47 00:04:12,189 --> 00:04:15,849 que lo soportan, y aquí voy a poner hola 48 00:04:15,849 --> 00:04:20,230 este texto va a ser 49 00:04:20,230 --> 00:04:23,129 el que va a aparecer aquí, si le doy a recargar la página 50 00:04:23,129 --> 00:04:28,149 puedo recargar la página, veis que pone hola, o F5 que es lo mismo 51 00:04:28,149 --> 00:04:47,170 El más rápido. Bueno, pues ya he cambiado el título. Voy un poquito rápido porque esto es un vídeo. Bueno, esto es lo que acabamos de hacer. Bueno, importante. Puedo usar símbolos unicode porque lo he marcado yo. 52 00:04:47,170 --> 00:04:55,370 Con estos dos símbolos marco el principio y el fin de una etiqueta y luego este simbolito lo veremos más adelante. 53 00:04:55,810 --> 00:04:57,110 Marca el comienzo de una referencia. 54 00:04:59,529 --> 00:05:07,329 Vais a ver que no puedo poner este símbolo. Estos símbolos no los puedo poner directamente porque representan, veis que representan etiquetas. 55 00:05:07,810 --> 00:05:11,569 ¿Qué tengo que hacer para poner estos símbolos de mayor y menor igual? 56 00:05:12,110 --> 00:05:18,250 Voy a meter otro párrafo como ejemplo y hay que poner esta cosa tan curiosa. 57 00:05:18,250 --> 00:05:34,009 Esto significa greater than, y esto significa less than, ¿de acuerdo? Mayor y menor, mayor y menor. 58 00:05:34,009 --> 00:05:53,699 Si voy a la página y la recargo, ¿dónde estás? Aquí. Y la recargo. ¿Lo veis ahí en los símbolos? De acuerdo. Y luego, para poner el ampersand, se pone amp.ampersand.amp.com. 59 00:05:53,699 --> 00:06:10,019 si voy a mi página y la recargo, ahí lo tengo, el ampersand, vamos a continuar, tal, bueno, hay muchos símbolos 60 00:06:10,019 --> 00:06:16,000 que los puedo meter directamente, pero tengo también unos códigos que me sirven para introducir los documentos, 61 00:06:16,420 --> 00:06:24,160 vamos a esperar para eso, vamos más adelante, bueno, la estructura ya la hemos visto, el top type también, 62 00:06:24,160 --> 00:06:45,620 Bueno, con lang le especifico el idioma, ¿vale? Si pongo lang igual a s, lang igual a es, le estoy diciendo que el idioma de este documento va a ser el castellano, el español, ¿de acuerdo? 63 00:06:45,620 --> 00:06:52,959 A esto se le llama un atributo. O sea, esto es la etiqueta y a esto de aquí se le llama atributo. 64 00:06:53,019 --> 00:06:59,779 Los atributos suelen ser un valor, perdón, un nombre igual a un valor. 65 00:07:00,079 --> 00:07:04,639 Y el valor entre comillas. Las comillas pueden ser simples, como las he puesto aquí, o dobles. 66 00:07:05,199 --> 00:07:07,360 Me es indiferente. Puedo usar cualquiera de las dos. 67 00:07:09,019 --> 00:07:14,139 Veis que aquí he usado la comilla simple y aquí he usado la comilla doble. Es indiferente usar una u otra. 68 00:07:16,420 --> 00:07:17,220 Bueno, la cabecera. 69 00:07:19,839 --> 00:07:21,519 Bueno, en la cabecera puedo meter el título, 70 00:07:22,720 --> 00:07:26,660 puedo meter una referencia a dónde está localizado el documento, 71 00:07:26,720 --> 00:07:29,759 me lo salto, y los meta, que hay muchos tipos de meta. 72 00:07:30,720 --> 00:07:32,980 ¿De acuerdo? Como, por ejemplo, el nombre del autor, 73 00:07:33,660 --> 00:07:37,500 el idioma, la descripción, las palabras importantes que define el documento. 74 00:07:38,779 --> 00:07:39,779 Hay muchos metas. 75 00:07:39,779 --> 00:07:42,120 Pero vamos, el más importante va a ser este, el charset. 76 00:07:43,220 --> 00:07:45,240 Body. Voy un poquito rápido, pero bueno. 77 00:07:45,579 --> 00:07:48,220 el body, bueno, el body 78 00:07:48,220 --> 00:07:50,579 es el documento principal, le puedo cambiar 79 00:07:50,579 --> 00:07:52,699 el color de fondo poniendo esto, no lo voy a 80 00:07:52,699 --> 00:07:54,779 hacer, porque ahora voy a tener una herramienta 81 00:07:54,779 --> 00:07:55,660 mucho más poderosa 82 00:07:55,660 --> 00:07:58,660 bueno, para 83 00:07:58,660 --> 00:08:00,680 meter comentarios, esto es importante 84 00:08:00,680 --> 00:08:02,000 ves que aquí 85 00:08:02,000 --> 00:08:04,660 está este simbolito, este simbolito 86 00:08:04,660 --> 00:08:06,240 es para meter comentarios 87 00:08:06,240 --> 00:08:07,899 si yo me vengo aquí y pongo 88 00:08:07,899 --> 00:08:12,410 ves que lo ha cambiado de color 89 00:08:12,410 --> 00:08:17,829 bueno, pues veis que este cachito de aquí 90 00:08:17,829 --> 00:08:19,889 es un comentario, lo que hace 91 00:08:19,889 --> 00:08:28,470 el html es ignorarlo esto lo guardo y si me voy a mi página web y la recargo ves que no sale nada 92 00:08:28,470 --> 00:08:33,629 porque la ha ignorado esto es un comentario que usamos a veces los programadores o el señor que 93 00:08:33,629 --> 00:08:38,669 está haciendo la página para meter algún tipo de comentario se me ha olvidado poner no sé qué 94 00:08:38,669 --> 00:08:46,450 o hay que hacer esto de acuerdo vais a ver muchas veces el todo ves que incluso la apuesta de tu 95 00:08:46,450 --> 00:08:51,990 nombre, todo significa por hacer. Cuando veis un comentario que pone todo, oye, que falta hacer 96 00:08:51,990 --> 00:08:57,769 esto. Y el fix me. Ves que cuando lo escribo lo pone incluso de otro color. Fix me. Fix me 97 00:08:57,769 --> 00:09:02,070 significa arreglame. O sea, en los comentarios a veces vais a encontrar todo. Todo significa, 98 00:09:02,070 --> 00:09:08,610 pues queda por hacer esto. O fix me. Oye, que esto está estropeado y hay que arreglarlo. Vale, 99 00:09:08,649 --> 00:09:18,059 lo vais a ver en muchos comentarios. El todo y el fix me. Vale. Bueno, la estructura de un 100 00:09:18,059 --> 00:09:25,799 documento html suele variar mucho pero suele ser esta una cabecera una barra de navegación de 101 00:09:25,799 --> 00:09:32,100 navegación la información principal las barras laterales que pueden tener un a un lado al otro 102 00:09:32,100 --> 00:09:37,940 etcétera etcétera etcétera y luego la parte de abajo esto en html5 lo vamos a representar así 103 00:09:37,940 --> 00:09:45,179 esto va a ser un header un nav bueno aquí está la parte principal que van a ser secciones section 104 00:09:45,179 --> 00:09:47,639 los aside y los footer, ¿vale? 105 00:09:48,299 --> 00:09:53,259 Si es que lo metemos en nuestro documento, vais a ver que aparentemente no pasa nada. 106 00:09:53,840 --> 00:10:00,490 Por ejemplo, si pongo aquí un header, pongo un header, 107 00:10:04,940 --> 00:10:15,179 y voy a meter un párrafo, vais a ir a nuestra página web 108 00:10:15,179 --> 00:10:19,320 y aparentemente no pasa nada, ha puesto cabecera. 109 00:10:19,919 --> 00:10:26,000 Esto luego le vamos a indicar con una cosa que se llama ccss como debe de colocarlo. 110 00:10:26,100 --> 00:10:28,159 De hecho, lo vamos a ver casi en el siguiente vídeo. 111 00:10:28,460 --> 00:10:34,850 Si pongo un footer, pues vais a ver que tampoco pasa nada. 112 00:10:35,250 --> 00:10:37,289 Oye, no me coloques esto. 113 00:10:40,639 --> 00:10:47,279 Footer, barra, footer, vais a ver que no pasa nada. 114 00:10:53,009 --> 00:10:55,029 Piede, página. 115 00:10:56,330 --> 00:11:03,090 Fijaos que estos elementos, el footer, el footer que representa el pie, el header que representa la cabecera, 116 00:11:06,730 --> 00:11:09,350 no los pone por defecto en estas zonas que pone aquí. 117 00:11:09,350 --> 00:11:23,649 O sea, en lo que pongamos como header, dentro de la etiqueta header, dentro de aquí, de las etiquetas, puedo meter otras etiquetas. Esto se me olvida decirlo. Aquí dentro del header o dentro de cualquier etiqueta puedo meter otras. Esto lo puedo llenar de contenido. 118 00:11:24,409 --> 00:11:27,690 ¿De acuerdo? Pues aquí con esta etiqueta, que aparentemente no hace nada, 119 00:11:28,250 --> 00:11:31,149 le estoy indicando que lo que va aquí dentro va a ser la cabecera. 120 00:11:31,850 --> 00:11:39,190 Esta que se llama footer, lo que está indicando es que lo que vaya aquí dentro va a ser el pie de la página. 121 00:11:41,159 --> 00:11:44,299 Voy a parar aquí. Voy a parar aquí. 122 00:11:44,299 --> 00:11:49,299 Y un poquito más en el siguiente vídeo vamos a ver cómo se le da formato a eso. 123 00:11:51,240 --> 00:11:56,009 A ver si soy capaz yo de parar. Vale.