1 00:00:00,690 --> 00:00:04,429 Ya hemos visto cómo es un fichero XML. 2 00:00:05,370 --> 00:00:11,849 Vamos a pasar ahora al elemento fundamental de lo que es Internet para el usuario final, que es la web. 3 00:00:12,210 --> 00:00:23,269 Y la web se basa primero en un protocolo de comunicaciones, que es HTTP, o Hyper Test Transfer Protocol. 4 00:00:24,109 --> 00:00:30,030 Y sobre ese protocolo de transferencia de páginas, pues están esas páginas. 5 00:00:30,030 --> 00:00:45,109 Y esas páginas corresponden o tienen como lenguaje de marcas el lenguaje HTML, que ya en la introducción del módulo dijimos que provenía, que era una variante o una abreviatura o una parte de lo que era SGML. 6 00:00:45,109 --> 00:00:53,109 HTML, repito, se llama Hypertext Markup Language, o lenguaje de marcas de hipertexto. 7 00:00:54,149 --> 00:01:02,189 Y bueno, vuelvo a repetir la importancia que tuvo en su momento y cómo ha cambiado nuestras vidas el que podamos ir saltando de un sitio a otro. 8 00:01:02,189 --> 00:01:05,069 como podemos ver aquí en el título 9 00:01:05,069 --> 00:01:08,349 dentro de nuestro portal de mclibre.org 10 00:01:08,349 --> 00:01:11,150 que agradecemos a Bartolomé Sintes 11 00:01:11,150 --> 00:01:15,329 de este desarrollo y poner esto a disposición de todo el público 12 00:01:15,329 --> 00:01:17,209 vemos que el título es 13 00:01:17,209 --> 00:01:20,310 Páginas web HTML y hojas de estilo CSS 14 00:01:20,310 --> 00:01:23,030 bueno, ya las veremos posteriormente 15 00:01:23,030 --> 00:01:26,150 las hojas de estilo, pero es el elemento que logra 16 00:01:26,150 --> 00:01:29,409 que una página HTML, que al fin y al cabo no tiene que tener 17 00:01:29,409 --> 00:01:32,049 más que el contenido, la estructura del documento 18 00:01:32,049 --> 00:01:37,790 acabe teniendo un formato de visualización que se adapte a diversos dispositivos 19 00:01:37,790 --> 00:01:42,469 y que además pueda ser más o menos agradable dependiendo del gusto del diseñador correspondiente 20 00:01:42,469 --> 00:01:48,430 entonces visto todo esto vamos a empezar para ver qué es una página web 21 00:01:48,430 --> 00:01:52,750 y una página web es un documento de texto con marcas 22 00:01:52,750 --> 00:01:58,870 entonces esto que aparece aquí puede ser el código fuente de una página web 23 00:01:58,870 --> 00:02:04,349 Aquí tenemos una marca que es la marca o etiqueta P 24 00:02:04,349 --> 00:02:07,909 Que significa que empieza un párrafo y con esto lo acabamos 25 00:02:07,909 --> 00:02:12,409 Como conocemos ya XML no hay que contar cómo son estas etiquetas 26 00:02:12,409 --> 00:02:18,569 Bueno, la cuestión que aparece es que hay etiquetas como P que se abren y se cierran 27 00:02:18,569 --> 00:02:23,469 Y a diferencia de XML podemos tener etiquetas vacías 28 00:02:23,469 --> 00:02:27,349 Es decir, etiquetas que no se abren y no se cierran como es HR 29 00:02:27,349 --> 00:02:29,870 HR, vemos que es una etiqueta 30 00:02:29,870 --> 00:02:31,729 que simplemente aparece y que va a significar 31 00:02:31,729 --> 00:02:34,030 que pinta una línea, un salto 32 00:02:34,030 --> 00:02:36,110 un salto con una línea 33 00:02:36,110 --> 00:02:37,849 pintada, y vemos que realmente 34 00:02:37,849 --> 00:02:39,409 pues no se cierra 35 00:02:39,409 --> 00:02:41,569 esta va a ser la gran diferencia con XML 36 00:02:41,569 --> 00:02:43,629 por eso HTML no se puede considerar 37 00:02:43,629 --> 00:02:45,849 XML, aunque se parezca 38 00:02:45,849 --> 00:02:46,550 muchísimo 39 00:02:46,550 --> 00:02:49,409 bueno, este es el código fuente de esta página 40 00:02:49,409 --> 00:02:51,250 y aquí es como se vería en el navegador 41 00:02:51,250 --> 00:02:52,810 un párrafo y detrás otro 42 00:02:52,810 --> 00:02:55,250 vamos a ver, voy a aplicar 43 00:02:55,250 --> 00:02:57,129 el botón derecho aquí 44 00:02:57,129 --> 00:03:00,969 y voy a ver la fuente de este trocito del marco que estamos aquí 45 00:03:00,969 --> 00:03:04,789 y vemos que esto es una página completa 46 00:03:04,789 --> 00:03:06,750 este marco es una página completa 47 00:03:06,750 --> 00:03:07,889 y vemos su estructura 48 00:03:07,889 --> 00:03:11,569 entonces vemos aquí, vamos a ponerlo más grande para verlo mejor 49 00:03:11,569 --> 00:03:15,750 que esta paginita, ese trocito de página 50 00:03:15,750 --> 00:03:19,169 tiene primero el identificador del tipo de documento que va a venir 51 00:03:19,169 --> 00:03:19,870 que es HTML 52 00:03:19,870 --> 00:03:23,210 y que como ya iremos sabiendo 53 00:03:23,210 --> 00:03:25,110 no especificamos qué versión 54 00:03:25,110 --> 00:03:31,270 porque ahora mismo está en continuo movimiento y por tanto no hay un versionado de ellas 55 00:03:31,270 --> 00:03:38,509 tenemos la etiqueta HTML que indica que todo lo que viene a partir de ahora hasta aquí es una página HTML 56 00:03:38,509 --> 00:03:44,370 con un atributo que es LANG o LANGUAGE que dice que va a ser una página en español 57 00:03:44,370 --> 00:03:47,530 dentro siempre aparecen HEAD y BODY 58 00:03:47,530 --> 00:03:54,210 la cabecera donde vamos a explicar cosas sobre la página y lo que vamos a visualizar dentro de la página 59 00:03:54,210 --> 00:03:56,050 el body, dentro de head 60 00:03:56,050 --> 00:03:57,909 lo primero que estamos viendo es 61 00:03:57,909 --> 00:03:59,870 una meta información 62 00:03:59,870 --> 00:04:01,969 de la propia página, en la cual establecemos 63 00:04:01,969 --> 00:04:03,949 que el conjunto de caracteres 64 00:04:03,949 --> 00:04:06,530 se corresponde a UTF-8 65 00:04:06,530 --> 00:04:07,469 UTF-8 66 00:04:07,469 --> 00:04:10,129 que va a ser el estándar para todas las páginas 67 00:04:10,129 --> 00:04:11,849 web, a pesar de que esto lo podemos cambiar 68 00:04:11,849 --> 00:04:13,930 ya veremos que voy a recomendar 69 00:04:13,930 --> 00:04:14,669 en todo momento 70 00:04:14,669 --> 00:04:18,009 que las páginas las creemos ya en este formato 71 00:04:18,009 --> 00:04:19,370 para no tener complicaciones 72 00:04:19,370 --> 00:04:21,649 después tenemos un título 73 00:04:21,649 --> 00:04:23,970 un título que acaba 74 00:04:23,970 --> 00:04:30,050 ahí y que es tan largo como todo esto que aparece aquí, ¿de acuerdo? Este título en 75 00:04:30,050 --> 00:04:36,209 la visualizadora en modernos se puede visualizar aquí, en esta parte de aquí, ¿de acuerdo? 76 00:04:36,649 --> 00:04:41,470 Este como es del marco no aparece, aparece de la página donde estaba incluida y es esto 77 00:04:41,470 --> 00:04:51,689 de aquí. Después tenemos otro meta, otra información que dice, que además es relativamente 78 00:04:51,689 --> 00:04:53,189 moderno que esta página 79 00:04:53,189 --> 00:04:55,870 se adecue al dispositivo 80 00:04:55,870 --> 00:04:57,629 en el que encuentra, al ancho 81 00:04:57,629 --> 00:04:58,649 de su dispositivo 82 00:04:58,649 --> 00:05:01,209 en un inicio internet era 83 00:05:01,209 --> 00:05:03,449 ordenadores, ordenadores peces 84 00:05:03,449 --> 00:05:05,730 y en un inicio anterior incluso simplemente 85 00:05:05,730 --> 00:05:07,430 editor de texto, pero bueno 86 00:05:07,430 --> 00:05:09,810 a día de ya en los normales 87 00:05:09,810 --> 00:05:11,790 navegadores en un 88 00:05:11,790 --> 00:05:13,670 ordenador que tiene una pantalla por mínimo 89 00:05:13,670 --> 00:05:15,610 de 800 x 600 píxeles 90 00:05:15,610 --> 00:05:17,529 ¿qué ocurre? que poco a poco 91 00:05:17,529 --> 00:05:19,509 han ido apareciendo por un lado 92 00:05:19,509 --> 00:05:21,610 pantallas mucho más grandes, pero también por otro 93 00:05:21,610 --> 00:05:23,970 dispositivos pequeños como son nuestros móviles 94 00:05:23,970 --> 00:05:25,569 por lo tanto nuestra página 95 00:05:25,569 --> 00:05:27,750 debe adecuarse un poco a esa 96 00:05:27,750 --> 00:05:29,750 información, ya veremos lo que es el diseño 97 00:05:29,750 --> 00:05:30,430 adaptativo 98 00:05:30,430 --> 00:05:33,870 o responsivo como se dice 99 00:05:33,870 --> 00:05:34,930 en inglés, en el cual 100 00:05:34,930 --> 00:05:37,589 podemos modificar incluso el aspecto 101 00:05:37,589 --> 00:05:39,670 del documento con esos CSS 102 00:05:39,670 --> 00:05:41,769 a los que vamos a trabajar después 103 00:05:41,769 --> 00:05:44,009 en función de que dispositivo 104 00:05:44,009 --> 00:05:45,649 o que tamaños estamos manejando 105 00:05:45,649 --> 00:05:47,750 el head puede incluir 106 00:05:47,750 --> 00:05:49,870 muchas más cuestiones, de momento estas son 107 00:05:49,870 --> 00:05:52,029 básicas y ya iremos viendo algunas más 108 00:05:52,029 --> 00:05:54,189 por ejemplo enlaces, hojas de estilo, etc 109 00:05:54,189 --> 00:05:54,589 etc 110 00:05:54,589 --> 00:05:57,949 en el cuerpo, vemos que empieza 111 00:05:57,949 --> 00:05:59,610 aquí y finaliza aquí 112 00:05:59,610 --> 00:06:01,170 hay dos párrafos 113 00:06:01,170 --> 00:06:03,829 P y P, que es lo que hemos visualizado 114 00:06:03,829 --> 00:06:05,410 realmente en el marco, de acuerdo 115 00:06:05,410 --> 00:06:07,350 este es el trocito que hemos visualizado 116 00:06:07,350 --> 00:06:09,069 en nuestro marco 117 00:06:09,069 --> 00:06:11,430 bueno, este es un documento 118 00:06:11,430 --> 00:06:12,889 perfectamente realizado 119 00:06:12,889 --> 00:06:15,370 que como vemos tiene etiquetas 120 00:06:15,370 --> 00:06:17,629 que se abren y se cierran y algunas 121 00:06:17,629 --> 00:06:18,730 como meta 122 00:06:18,730 --> 00:06:20,230 Que no se abre 123 00:06:20,230 --> 00:06:22,910 Que se abre, perdón, pero no se cierra 124 00:06:22,910 --> 00:06:24,449 Es decir, etiquetas 125 00:06:24,449 --> 00:06:27,990 Que no hace falta cerrar 126 00:06:27,990 --> 00:06:28,750 ¿De acuerdo? 127 00:06:30,069 --> 00:06:31,810 Vamos a cerrar esta ventana 128 00:06:31,810 --> 00:06:33,110 Y vamos a continuar 129 00:06:33,110 --> 00:06:35,670 Voy a poner esto un poco en un formato más pequeño 130 00:06:35,670 --> 00:06:36,430 Porque si no 131 00:06:36,430 --> 00:06:38,970 No vemos la información 132 00:06:38,970 --> 00:06:40,129 Por lo menos así 133 00:06:40,129 --> 00:06:40,990 Bien 134 00:06:40,990 --> 00:06:45,410 HR era de las que decíamos 135 00:06:45,410 --> 00:06:46,589 Que no se abrió, no se cierra 136 00:06:46,589 --> 00:06:47,769 Aquí más ejemplos 137 00:06:47,769 --> 00:06:55,990 Strong, que los navegadores consideran que tiene que convertirse en algo con tipo negrita 138 00:06:55,990 --> 00:07:02,329 o algo un poco más resaltado. Y una cuestión que es muy interesante es ver que por defecto 139 00:07:02,329 --> 00:07:10,589 un conjunto de espacios es solamente un espacio, corresponde a un único espacio. Y el tratamiento 140 00:07:10,589 --> 00:07:17,230 genérico que se hace a los altos de línea es poner simplemente un espacio. Excepto una 141 00:07:17,230 --> 00:07:19,290 etiqueta, que es la etiqueta pre o pre 142 00:07:19,290 --> 00:07:21,490 formateo, que en la cual 143 00:07:21,490 --> 00:07:23,509 lo que hacemos es justo 144 00:07:23,509 --> 00:07:25,470 que lo que hemos puesto aquí se vea 145 00:07:25,470 --> 00:07:27,470 en el mismo modo, de tal manera que veríamos 146 00:07:27,470 --> 00:07:29,589 uno, veríamos esta información 147 00:07:29,589 --> 00:07:31,029 justo de esta manera 148 00:07:31,029 --> 00:07:33,209 ¿de acuerdo? bueno, este comportamiento 149 00:07:33,209 --> 00:07:35,569 se puede variar con una propiedad que ya veremos 150 00:07:35,569 --> 00:07:36,790 dentro de los CSS 151 00:07:36,790 --> 00:07:38,449 que es white space 152 00:07:38,449 --> 00:07:41,089 ¿qué más cuestiones? bueno 153 00:07:41,089 --> 00:07:43,329 pues simplemente como cada 154 00:07:43,329 --> 00:07:45,589 navegador va dándole 155 00:07:45,589 --> 00:07:48,490 un formato a cada estructura de nuestro documento 156 00:07:48,490 --> 00:07:51,490 pero quiero indicar que nuestro documento debe tener 157 00:07:51,490 --> 00:07:54,449 la información propia del documento, no entrar en 158 00:07:54,449 --> 00:07:57,610 cómo se va a visualizar, como ya hemos 159 00:07:57,610 --> 00:08:00,430 visto por aquí, todas las etiquetas pueden 160 00:08:00,430 --> 00:08:02,790 tener atributos, por ejemplo este atributo 161 00:08:02,790 --> 00:08:05,750 title, en el cual si yo 162 00:08:05,750 --> 00:08:09,389 me pongo por encima de este párrafo, me va a aparecer 163 00:08:09,389 --> 00:08:12,089 una ventanita que dice sorpresa 164 00:08:12,089 --> 00:08:15,009 vamos a ponernos por encima y efectivamente ha aparecido ahí en negrita 165 00:08:15,009 --> 00:08:18,389 Bueno, en fondo negro, la palabra sorpresa 166 00:08:18,389 --> 00:08:21,769 O, una cosa que vamos a desaconsejar enormemente 167 00:08:21,769 --> 00:08:24,230 Pero que lo estamos haciendo aquí para comprobarlo 168 00:08:24,230 --> 00:08:26,430 Podemos definir un estilo 169 00:08:26,430 --> 00:08:30,350 En el cual decimos que el color del texto va a ser rojo 170 00:08:30,350 --> 00:08:34,629 Y entonces por eso esto aparece directamente en rojo 171 00:08:34,629 --> 00:08:35,230 ¿De acuerdo? 172 00:08:35,850 --> 00:08:39,149 Bueno, aquí también nos dice nuestro amigo Bartolomé 173 00:08:39,149 --> 00:08:41,549 Que esto es desaconsejado 174 00:08:41,549 --> 00:08:43,710 ¿Cómo ponemos un comentario? 175 00:08:43,710 --> 00:08:46,029 Algo que queremos que aparezca dentro de la información 176 00:08:46,029 --> 00:08:48,009 Pero que no se visualice 177 00:08:48,009 --> 00:08:52,490 Pues con esta información que ya utilizamos en XML 178 00:08:52,490 --> 00:08:54,409 Con lo cual no hay mucho más que contar 179 00:08:54,409 --> 00:08:58,070 Y bueno, la historia de HTML es preciosa 180 00:08:58,070 --> 00:09:00,629 Es una historia realmente apasionante 181 00:09:00,629 --> 00:09:03,269 Y además, sabiendo que se inicia en Europa 182 00:09:03,269 --> 00:09:05,870 Que es de las pocas cosas que se inicia en nuestro continente 183 00:09:05,870 --> 00:09:07,730 Pues también tiene gran interés 184 00:09:07,730 --> 00:09:10,049 Lo que sí hay que decir es que hay dos organismos 185 00:09:10,049 --> 00:09:12,129 Que han estado implicados durante los años 186 00:09:12,129 --> 00:09:13,210 Uno, el V3C 187 00:09:13,210 --> 00:09:17,950 Que es el que ha dado vida hasta la versión HTML4 188 00:09:17,950 --> 00:09:19,549 Y después poco a poco 189 00:09:19,549 --> 00:09:21,929 Un consorcio de grandes empresas 190 00:09:21,929 --> 00:09:24,110 Y ninguna de ellas son desconocidas 191 00:09:24,110 --> 00:09:26,110 Apple, Mozilla, Opera 192 00:09:26,110 --> 00:09:30,190 Pues empezaron a conformar esto que se llama WOT o WG 193 00:09:30,190 --> 00:09:33,490 Y a día de hoy es el que lleva las riendas 194 00:09:33,490 --> 00:09:36,730 Y su recomendación 195 00:09:36,730 --> 00:09:39,350 Que es la norma que realmente deberíamos seguir 196 00:09:39,350 --> 00:09:40,950 Está en esta dirección 197 00:09:40,950 --> 00:09:42,850 Yo ya la he bajado para que la veamos 198 00:09:42,850 --> 00:09:47,750 Y este es el estándar que deberíamos seguir en todo momento 199 00:09:47,750 --> 00:09:50,090 Ya no se está hablando de versionado 200 00:09:50,090 --> 00:09:54,129 Y por eso en el Doctype hemos visto simplemente que decimos HTML 201 00:09:54,129 --> 00:09:56,830 Porque ya no estamos entrando en qué versión estamos 202 00:09:56,830 --> 00:10:03,009 Y aquí, esta página, que es la que actualmente está manejando WOT o WG 203 00:10:03,009 --> 00:10:06,710 Es donde podemos ver todos los elementos que se está trabajando 204 00:10:06,710 --> 00:10:12,470 Y será nuestro elemento de referencia siempre que queramos buscar de verdad cómo se hace algo 205 00:10:12,470 --> 00:10:16,610 porque una cosa que van a tener ustedes siempre en cuenta 206 00:10:16,610 --> 00:10:19,029 es que va a haber muchas páginas que les funcionen 207 00:10:19,029 --> 00:10:22,789 es decir, que se vean lo que ustedes querían ver en el navegador 208 00:10:22,789 --> 00:10:25,889 pero realmente estén mal desarrolladas 209 00:10:25,889 --> 00:10:30,750 es decir, el navegador interpreta que lo que uno ha escrito es de una manera 210 00:10:30,750 --> 00:10:34,190 y lo pone así, pero hace él por su cuenta los cambios 211 00:10:34,190 --> 00:10:38,629 es una cosa muy interesante de ver y ya lo veremos con algún ejemplo concreto 212 00:10:38,629 --> 00:10:40,990 donde hagamos una página muy tonta, muy tonta 213 00:10:40,990 --> 00:10:50,009 y veamos que termina errores y veremos como él automáticamente modifica ese árbol de la página 214 00:10:50,009 --> 00:10:52,389 para adecuarlo a un navegador 215 00:10:52,389 --> 00:10:57,610 bueno, como introducción de lo que es una página web creo que ya es más que suficiente