1 00:00:00,560 --> 00:00:11,380 Bueno, pues en este vídeo lo que vamos a empezar a hacer es investigar o aprender sobre las diferentes etiquetas que hay para formatear textos en HTML, ¿vale? 2 00:00:12,339 --> 00:00:23,640 Entonces, en este caso, de nuevo nos vamos a ir al editor brackets, ¿vale? Como veis aquí, yo he creado ya un archivo que lo he llamado pruebatextos.html, ¿vale? 3 00:00:23,640 --> 00:00:34,340 prueba-textos.html y lo que vamos a empezar es aprender también a utilizar un complemento de este editor muy útil que se llama emet, con dos emes, ¿vale? 4 00:00:34,359 --> 00:00:42,700 Como veis, por ejemplo, aquí. Entonces, ¿cómo funciona este complemento? Pues este complemento ayuda a escribir el código más rápido. 5 00:00:43,079 --> 00:00:51,679 Entonces, si os acordáis, cuando hicimos la página web, la primera página web, nosotros poníamos la etiqueta, el doctype, poníamos la etiqueta html, 6 00:00:51,679 --> 00:01:01,679 la etiqueta head, la etiqueta body, ¿vale? Entonces, esta extensión del bracket lo que nos permite es, pues, agilizar todo ese proceso, ¿vale? 7 00:01:02,259 --> 00:01:15,079 Entonces, para nosotros escribir todo lo que habíamos escrito en el vídeo anterior, simplemente pondríamos HTML 2.5 y haríamos clic, perdón, no haríamos clic, 8 00:01:15,079 --> 00:01:21,620 y pulsaríamos la tecla tabulador, que es la tecla que está a la izquierda de la Q, ¿vale? Entonces, fijaros que cuando yo pulso esa tecla, 9 00:01:21,680 --> 00:01:26,400 automáticamente ya me sale todo lo que habíamos escrito antes, ¿vale? 10 00:01:26,939 --> 00:01:30,019 Simplemente que en el idioma me aparece en inglés, ¿vale? 11 00:01:30,060 --> 00:01:33,780 Entonces nosotros lo ponemos en castellano, es, ¿vale? 12 00:01:34,540 --> 00:01:37,379 Y aquí cambiamos el título, ¿vale? 13 00:01:37,379 --> 00:01:45,939 Lo que ahora voy a hacer es intentar que seáis capaces de ver al mismo tiempo 14 00:01:45,939 --> 00:01:53,459 Esto es una extensión que tiene por defecto brackets, que es muy útil, ¿vale? 15 00:01:54,079 --> 00:01:57,659 Entonces, si nos vamos a brackets, al editor, ¿vale? 16 00:01:58,000 --> 00:02:02,680 Fijaros que aquí a la izquierda tenéis como una especie de rayo, ¿vale? 17 00:02:02,900 --> 00:02:04,819 Que pone vista previa dinámica. 18 00:02:05,120 --> 00:02:06,939 Entonces, si le dais... 19 00:02:07,579 --> 00:02:10,099 Esto tarda un ratito, ¿vale? 20 00:02:10,099 --> 00:02:29,000 Vale, entonces, como veis aquí, pues, lo que estoy ahora mismo viendo es una utilidad que tiene el brackets, de tal forma que yo cualquier edición que haga en la web se me ve directamente aquí reflejada, ¿vale? 21 00:02:29,000 --> 00:02:41,360 De tal forma que, por ejemplo, si ahora este texto lo borro y digo hola, ¿vale? Fijaros que aquí en el título de la web se me cambia, ¿vale? Pero bueno, voy a dejar como lo tenía. 22 00:02:41,360 --> 00:02:58,819 Y vamos a empezar a ver etiquetas de formato de texto, ¿vale? Entonces, vamos a ir explicando estas etiquetas, ¿vale? Que como digo, son muy importantes, ¿vale? 23 00:03:01,219 --> 00:03:10,080 Y vais a ir viendo cómo se van a ir reflejando en el otro lado, ¿vale? De tal forma que nos sirve para ir haciendo nuestras pruebas de una forma bastante inmediata, ¿vale? 24 00:03:10,080 --> 00:03:28,879 Entonces, en primer lugar, vamos a ver lo que son los comentarios, cómo meter comentarios en HTML, ¿vale? Igual que los metíamos en Python, pues en HTML podemos añadir comentarios que nos sirvan a nosotros para saber cuál es el contenido o qué queríamos hacer en alguna parte de la web, ¿no? 25 00:03:28,879 --> 00:03:41,400 Entonces, para poner un comentario, pondríamos primero la etiqueta, primero el carácter de menor, luego pondríamos cierre de exclamación, dos guiones y ahora pondríamos el comentario. 26 00:03:42,719 --> 00:03:49,099 Este texto es un comentario. Y luego, dos guiones y cerramos, ¿vale? 27 00:03:49,400 --> 00:03:56,800 Entonces, fijaros que esto que acabamos de poner no aparece en nuestra página web, ¿vale? Por ningún lado, ¿ok? 28 00:03:56,800 --> 00:04:08,150 ¿Veis? Entonces, vamos a empezar a ver etiquetas que sí sirven, ¿vale? En primer lugar tenemos la etiqueta de los párrafos, que es, como decía, la tecla P, ¿vale? 29 00:04:09,050 --> 00:04:22,509 Yo le pongo la tecla P y ahora aquí pondría, este es mi primer párrafo. Fijaros que ya directamente el brackets o marca que el párrafo ocupa todo el ancho de la web. 30 00:04:22,509 --> 00:04:28,889 Esto es muy importante y luego explicaremos por qué hay diferentes tipos de etiquetas en función de su ubicación en la web, ¿vale? 31 00:04:29,189 --> 00:04:32,149 Entonces, fijaros que el párrafo ocupa todo ese párrafo. 32 00:04:32,250 --> 00:04:35,170 Si yo ahora pongo una nueva etiqueta P, ¿vale? 33 00:04:35,209 --> 00:04:37,910 Y digo, este es mi segundo párrafo. 34 00:04:38,990 --> 00:04:45,810 Fijaros cómo, al hacer clic en cada uno de ellos, son como zonas diferenciadas que ocupan todo el ancho de la web, ¿vale? 35 00:04:49,120 --> 00:04:50,980 Más etiquetas importantes. 36 00:04:50,980 --> 00:05:09,610 Pues, por ejemplo, vamos a coger un texto, el típico texto Loren Ipsum, ¿vale? Entonces, para eso, vamos a poner un párrafo y, si no me equivoco, aquí hay una opción de poner Loren Ipsum 10. 37 00:05:09,610 --> 00:05:19,490 vamos a poner una etiqueta 38 00:05:19,490 --> 00:05:21,029 como decía P 39 00:05:21,029 --> 00:05:24,810 y lo que yo quiero ahora 40 00:05:24,810 --> 00:05:31,680 vamos a ver 41 00:05:31,680 --> 00:05:33,360 de donde puedo copiar un texto 42 00:05:33,360 --> 00:05:37,279 pues copio un texto 43 00:05:37,279 --> 00:05:40,139 lo voy a copiar a mi editor 44 00:05:40,139 --> 00:05:44,759 y voy ahora mismo 45 00:05:44,759 --> 00:05:45,959 estas etiquetas que he puesto aquí 46 00:05:45,959 --> 00:05:47,540 las voy a quitar y ahora os explico 47 00:05:47,540 --> 00:05:48,860 lo que son 48 00:05:48,860 --> 00:05:52,199 fijaros que al poner 49 00:05:52,199 --> 00:06:03,100 eso, ¿vale? Un párrafo nuevo que tengo aquí marcado, ¿vale? Y ahora vamos a explicar lo que son las etiquetas de salto de línea, que es la etiqueta BR, 50 00:06:03,240 --> 00:06:13,600 de break, ¿vale? Entonces, si yo, por ejemplo, me vengo aquí y pongo una etiqueta BR, ¿vale? Fijaros que he tenido un salto de línea justo en la palabra 51 00:06:13,600 --> 00:06:21,980 ut, ¿vale? ut enim, se me da la línea siguiente. Pero, todo sigue perteneciendo al mismo párrafo, ¿vale? Sigue siendo el mismo conjunto de contenido. 52 00:06:22,519 --> 00:06:30,160 Yo puedo poner párrafo, puedo poner, perdón, saltos de línea donde quiera, ¿vale? Fijaros que si lo pongo aquí, produce un salto de línea, pero todo sigue 53 00:06:30,160 --> 00:06:40,839 perteneciendo, como digo, al mismo párrafo, ¿vale? Entonces, ya tenemos primera etiqueta, etiqueta p, de párrafo, etiqueta br, que sería de etiqueta de salto 54 00:06:40,839 --> 00:06:51,959 de línea, ¿vale? Y ahora vamos a ver cómo poner texto en negrita, ¿vale? Para eso vamos a utilizar una etiqueta que es la etiqueta B, ¿vale? 55 00:06:53,379 --> 00:07:07,040 Yo puedo poner esa etiqueta B, lo puedo poner como elemento independiente, ¿vale? O lo puedo poner perteneciente dentro de un párrafo, ¿vale? 56 00:07:07,040 --> 00:07:14,759 En este caso lo voy a poner como elemento independiente. Fijaros, yo pongo B, automáticamente el editor me rellena, ¿vale? 57 00:07:14,759 --> 00:07:27,920 Y yo pondría aquí, este es mi texto en negrita, ¿vale? Fijaros que cuando yo marco esto, ahora no me aparece como si fuera un párrafo independiente, 58 00:07:27,920 --> 00:07:39,860 Es decir, como si me ocupara todo el ancho de la página, ¿vale? De hecho, si yo ahora aquí pongo... Bueno, ahora explico lo que quiero explicar, ¿vale? 59 00:07:39,860 --> 00:07:53,079 Vamos a poner un salto de línea, un break, ¿vale? Y justo debajo vamos a ver otra etiqueta, ¿vale? Que también es para negrita, que es la etiqueta strong, ¿vale? 60 00:07:53,079 --> 00:08:00,420 Y ponemos esto también es texto en negrita, ¿vale? 61 00:08:00,699 --> 00:08:04,860 ¿Pero qué diferencia hay entre B, la etiqueta B y la etiqueta Strong? 62 00:08:05,560 --> 00:08:10,220 Pues fijaros, la etiqueta Strong es una etiqueta que reconocen los buscadores, ¿vale? 63 00:08:10,459 --> 00:08:17,839 Entonces es una etiqueta que sirve cuando nosotros queremos que cuando ponemos un texto en negrita dentro de una página web, 64 00:08:17,839 --> 00:08:21,000 el buscador sea capaz de referenciar ese contenido, ¿vale? 65 00:08:21,120 --> 00:08:24,439 Y que luego aparezca dentro de los buscadores, ¿vale? 66 00:08:24,459 --> 00:08:38,039 Pues yo qué sé, imaginaros que hemos hecho una página web sobre medio ambiente, ¿vale? Y entonces, pues queremos que cuando la gente busque por palabra contaminación aparezca nuestra página web, ¿vale? Pues esa contaminación la pondríamos como Strong, ¿vale? 67 00:08:38,220 --> 00:08:51,220 Pero si nosotros luego queremos poner un contenido en negrita, por lo que sea, yo qué sé, pues imaginaros que estamos hablando sobre, yo qué sé, sobre las aves, ¿no? En esa página web. 68 00:08:51,220 --> 00:08:59,159 A ver, lo pondríamos en negrita, pero no lo pondríamos como strong, ¿vale? Porque no queremos que nos identifiquen nuestra web por eso, ¿vale? 69 00:09:01,340 --> 00:09:13,019 Más etiquetas que podemos ver, ¿vale? Vamos a poner aquí un salto de línea, br, y vamos a ver la etiqueta para la cursiva, ¿vale? Para poner texto en cursiva. 70 00:09:13,019 --> 00:09:33,379 Esa etiqueta es la etiqueta I, ¿vale? Ponemos I, esto es texto en cursiva, ¿vale? Y fijaros que sale en mi editor, en mi página web, sale en cursiva, ¿vale? 71 00:09:33,379 --> 00:09:57,539 Pongo otro salto de línea y vamos a poner otra etiqueta de texto en cursiva, ¿vale? Que es la etiqueta EM, ¿vale? Que pasa algo parecido a lo que pasaba con la etiqueta STROM, ¿vale? Esto también es texto en cursiva, ¿vale? Y ponemos salto de línea. 72 00:09:57,539 --> 00:10:20,919 Ahí es. Más etiquetas importantes. La etiqueta de resaltado, ¿vale? Si nosotros queríamos poner un texto resaltado, pondríamos un párrafo, por ejemplo, ¿vale? Quiero resaltar la palabra y ahora aquí ponemos la etiqueta Mark, ¿vale? 73 00:10:20,919 --> 00:10:50,100 ¿Vale? Entonces fijaros que aparece como si estuviéramos subrayando esa palabra, ¿vale? En amarillo. Más etiquetas para formato, ¿vale? Por ejemplo, para cambiar el tamaño, para poner un tamaño menor, ¿vale? Pues pondríamos un nuevo párrafo, ¿vale? 74 00:10:50,100 --> 00:11:11,700 Fijaros que al poner el párrafo no tenemos que ir añadiendo salto de línea, él ya automáticamente mete ese salto de línea, que es importante, ¿vale? Y vamos a poner una etiqueta small, y aceptamos las condiciones del banco, por ejemplo, ¿vale? 75 00:11:11,700 --> 00:11:40,080 Y esto nos produce un texto más pequeñito, ¿vale? Con la etiqueta small. Más etiquetas. Etiquetas de tachado. Por ejemplo, si nosotros queremos tachar un texto, ¿vale? Pues pondríamos nuestro párrafo, ¿vale? Y pondríamos para aprobar el proyecto de ley hace falta un 45% de los votos, ¿vale? 76 00:11:40,080 --> 00:12:01,139 Entonces, ese 45 lo queremos borrar, ¿vale? Entonces lo pondríamos entre las etiquetas de del, ¿vale? Entonces fijaros que al añadir esto, ¿vale? Me aparece el 45% borrado, ¿vale? 77 00:12:01,139 --> 00:12:20,980 Y si nosotros quisiéramos añadir un texto, ¿vale? Que sustituyera ese, ¿vale? Pues directamente lo que aquí, en vez de poner la etiqueta de del, ponemos la etiqueta de ins, ¿vale? Y ponemos del 60% de los votos, ¿vale? Y fijaros que aparece como subrayado, ¿vale? 78 00:12:23,710 --> 00:12:25,389 ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? 79 00:12:30,909 --> 00:12:34,070 A ver que yo vea cosas que tengo que apuntar. 80 00:12:35,129 --> 00:12:37,110 Vale, vamos a definirnos. 81 00:12:38,149 --> 00:12:40,370 Voy a copiaros tres párrafos, ¿vale? 82 00:12:41,129 --> 00:12:43,549 Que yo tengo aquí y que he sacado de Wikipedia, ¿vale? 83 00:12:49,850 --> 00:12:51,409 Copio el primer párrafo. 84 00:12:52,990 --> 00:12:55,470 Y lo copio ya con la etiqueta de... 85 00:12:55,470 --> 00:12:58,389 Pongo primero, perdón. 86 00:12:58,389 --> 00:13:07,509 las etiquetas P, ¿vale? Y copio el contenido de ese primer párrafo. ¿Vale? Entonces nos 87 00:13:07,509 --> 00:13:12,409 vamos a Wikipedia y cogemos un texto cualquiera, pero que sea amplio, ¿vale? Que tenga gran 88 00:13:12,409 --> 00:13:36,179 cantidad. Copiamos un segundo párrafo y copiamos un tercer párrafo aquí. ¿Vale? Entonces 89 00:13:36,179 --> 00:13:44,600 Fijaros que vosotros lo que estáis viendo es una web donde hay tres párrafos claramente delimitados, ¿vale? Con una diferenciación propia de la etiqueta, ¿vale? 90 00:13:44,820 --> 00:13:52,399 Y ahora imaginaros que yo quiero añadir una línea horizontal que separe un párrafo de otro porque tengan contenido diferente o por lo que sea, ¿vale? 91 00:13:52,399 --> 00:14:05,460 Entonces hago Enter en Editor y añado la etiqueta que se llama HR, ¿vale? Y fijaros que aparece una línea horizontal, ¿vale? Que ocupa todo el ancho de la web, ¿vale? 92 00:14:05,919 --> 00:14:10,279 Si yo aumento el tamaño de la web, el tamaño de la línea también aumentará, ¿vale? 93 00:14:10,460 --> 00:14:15,350 Aumento el tamaño de la ventana, perdón, no el tamaño de la web. 94 00:14:15,730 --> 00:14:20,690 Vale, más etiquetas, más etiquetas que tienen que ver con el texto, ¿vale? 95 00:14:21,490 --> 00:14:25,830 Por ejemplo, vamos a poner un párrafo, ¿vale? 96 00:14:27,029 --> 00:14:31,929 Ponemos un párrafo nuevo en nuestro editor y vamos a poner una cita, ¿vale? 97 00:14:31,929 --> 00:14:33,690 Vamos a imaginarnos que estamos citando a alguien. 98 00:14:33,690 --> 00:14:58,409 Y ponemos, mi disco favorito de U2, ¿vale? Es el Joshua 3, ¿vale? Y vamos a imaginarnos que nosotros queremos que ese nombre del disco, ¿vale? Sea una cita, ¿vale? 99 00:14:58,409 --> 00:15:09,649 Entonces nos venimos y ponemos la etiqueta cita, ¿vale? Y el Joshua Tree lo metemos dentro del cita, ¿vale? 100 00:15:10,009 --> 00:15:23,149 Entonces fijaros que no sale como en cursiva, ¿vale? Y es una forma de que luego en la página web eso almacene como que es una cita, como que no es texto en cursiva, ¿vale? 101 00:15:23,149 --> 00:15:25,350 Hay que saber diferenciar cuando ponemos la etiqueta. 102 00:15:27,879 --> 00:15:30,620 Más etiquetas, más etiquetas, más etiquetas. 103 00:15:30,740 --> 00:15:31,460 Es importante. 104 00:15:34,820 --> 00:15:38,019 Vale, otra etiqueta podría ser, por ejemplo, 105 00:15:38,879 --> 00:15:43,019 una etiqueta para hacer un entrecomillado de una cita célebre de alguien, ¿vale? 106 00:15:43,039 --> 00:15:44,460 Entonces, pues podríamos poner, por ejemplo, 107 00:15:44,460 --> 00:15:51,419 tenemos un párrafo nuevo y le ponemos tal y como decía Aristóteles, 108 00:15:51,720 --> 00:15:53,460 los puntos, ¿vale? 109 00:15:53,460 --> 00:16:07,779 Y para poner esa cita ponemos una Q, la etiqueta Q, ¿vale? Y ponemos aquí somos lo que hacemos día a día, ¿vale? Entonces fijaros que nosotros al poner esto ya nos aparece entre comillas, ¿vale? 110 00:16:07,779 --> 00:16:28,100 Si tenemos problemas con algunos navegadores, que puede ser que lo tengamos, ¿vale? Simplemente añadiremos un atributo sobre esta etiqueta, ¿vale? Que es el atributo Cite, ¿vale? Y entonces ponemos Cite y entre paréntesis la doble comilla, ¿vale? 111 00:16:28,100 --> 00:16:45,730 ¿Qué más? ¿Qué más etiquetas podemos ver? Pues, por ejemplo, podemos ver la etiqueta de otra forma de hacer citas, ¿vale? Citas literales. 112 00:16:45,730 --> 00:17:12,920 Por ejemplo, imaginemos que nosotros queremos citar sobre un bloque, como un bloque de contenidos, queremos citar un texto Loren Ipsum. Entonces pondríamos la etiqueta P y dijimos, tal y como decía la página web generadora de texto aleatorio, dos puntos. 113 00:17:12,920 --> 00:17:31,099 Y aquí vamos a añadir una etiqueta que se llama block quote. Y vamos a poner un atributo cite y ponemos, vamos a poner aquí, aquí pondríamos la página web de donde hemos sacado esas citas. 114 00:17:31,099 --> 00:17:48,119 ¿Vale? Y dentro del blog quote, pues pondríamos todo nuestro texto Loren Ipso. ¿Vale? De tal forma que lo que vosotros veis es todo lo que es la cita, pero así desplazada con un poco, como si hubiera un poco de sangría. ¿Vale? 115 00:17:48,119 --> 00:18:05,900 Luego nosotros podríamos darle formato a esta cita, ¿vale? Más etiquetas. Vamos a ver, por ejemplo, el cómo poner su superíndice y su índice, ¿vale? Por ejemplo, vamos a poner la fórmula química del agua, ¿vale? 116 00:18:05,900 --> 00:18:22,960 Ponemos un párrafo nuevo y decimos la fórmula química del agua es H. Recuerdo que el 2 es el subíndice, pues entonces pondríamos una etiqueta que sería sub. 117 00:18:22,960 --> 00:18:38,940 ¿Vale? Dos y el otro. Uy, el otro. ¿Vale? Y fijaros que nos aparece ese subíndice. ¿Vale? Y de la misma forma lo podríamos hacer para el superíndice. ¿Vale? 118 00:18:38,940 --> 00:19:08,359 En este caso ponemos otra vez otra etiqueta de párrafo y ponemos el 13.000 en notación científica es 13 por 10 y ponemos sub 3, ¿vale? 119 00:19:11,019 --> 00:19:15,920 Y fijaros que nos aparece el 3 en exponente, ¿vale? 120 00:19:16,400 --> 00:19:24,210 Y por último, vamos a ver la etiqueta SPAM, ¿vale? 121 00:19:25,369 --> 00:19:33,430 Y aquí voy a hacer un inciso o una parada para que distingamos entre lo que es una etiqueta SPAM y una etiqueta P, ¿vale? 122 00:19:33,470 --> 00:19:37,450 Porque la SPAM en determinado momento se puede utilizar como una etiqueta de párrafo, ¿vale? 123 00:19:37,450 --> 00:20:02,819 Pero para que veáis la diferencia, fijaros que si yo ahora aquí meto una etiqueta spam, y pongo este es un nuevo párrafo, fijaros que cuando yo ahora si hago un enter y añado una nueva etiqueta spam, 124 00:20:02,819 --> 00:20:20,839 y pongo este es un segundo párrafo, fijaros como ese spam me aparece justo a continuación, no me aparece realmente como párrafo, ¿vale? 125 00:20:21,099 --> 00:20:31,619 ¿Esto por qué? Pues esto es porque la etiqueta spam siempre se autocompleta de forma horizontal, es decir, que no es como el párrafo que te va a ocupar siempre todo el ancho de la web, ¿vale? 126 00:20:31,619 --> 00:20:38,160 No es como la etiqueta P. Por lo tanto, tenemos que saber cuándo utilizar la etiqueta SPAN y cuándo utilizar la etiqueta P. ¿Vale? 127 00:20:38,160 --> 00:20:42,160 Si queremos que ocupe todo el ancho de la web, siempre va a ser una etiqueta P. ¿Vale? 128 00:20:43,500 --> 00:20:48,519 Ventaja, que nosotros dentro de las etiquetas P podemos utilizar etiquetas SPAN. ¿Vale? 129 00:20:48,799 --> 00:20:54,119 Entonces, fijaros, si yo ahora mismo este SPAN lo modifico y pongo una P, ¿vale? 130 00:20:54,119 --> 00:21:09,940 Ahora el segundo párrafo se me ha ido abajo, ¿vale? Pero yo podría coger esto, cortarlo y pegarlo aquí, ¿vale? Y fijaros que me está apareciendo, ese span me está apareciendo dentro de un párrafo, ¿vale? 131 00:21:09,940 --> 00:21:26,099 Y yo ahora a ese span le puedo meter, puedo editarlo, ¿vale? Y por ejemplo le puedo cambiar el color, ¿vale? Entonces yo podría poner aquí el atributo style, ¿vale? Y en entrecomillado pondría color, dos puntos. 132 00:21:26,099 --> 00:21:43,440 Y fijaros que aquí me aparecen un montón de colores que yo puedo elegir, ¿vale? Pues yo qué sé, pues dar magenta, ¿vale? Y al elegir el dar magenta, pues veis como aquí me aparece y me cambia el color, ¿vale? 133 00:21:43,440 --> 00:22:05,769 Bueno, esto sería en cuanto a una edición básica de texto, un formateo básico de texto. Luego vamos a entrar un poco más en detalle, bueno, un poco más en detalle, nos vamos a ver más formatos de texto en un siguiente vídeo, ¿vale? Para no acumularlo todo en un vídeo largo.